Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Questions about manipulating/orienting background images

Hi Twine peeps,

(Using Harlowe)

I'm looking for some background stylesheet help.

1. Is there a way to have a background transition slowly with a fade into a new background?

2. Is there a way to lock the background so that if a passage has enough text requiring the user to scroll down, the passage scrolls, but the background doesn't? I don't like having half the background scroll away when reading down a long passage of text.

3. Is there a way to have a background that is longer than the game window move slowly from left to right, stopping once it reaches the end of the image? I want it to shift over time on its own, and stop once there's no more image to reveal.

Thanks in advance for any advice with regard to these questions!

Comments

  • An important thing you need to clarify is do you want the background image to only appear behind the central passage area of the page (the tw-passage element) or behind the whole page (the html element).

    Knowing this will help whomever suggests solutions to determine the amount of effort required to implement them, or if they are even possible.
  • edited October 2015
    greyelf wrote: »
    An important thing you need to clarify is do you want the background image to only appear behind the central passage area of the page (the tw-passage element) or behind the whole page (the html element).

    Knowing this will help whomever suggests solutions to determine the amount of effort required to implement them, or if they are even possible.

    Good call, greyelf! Thanks for the heads up on that. I'd like the background to be behind the entire page, not just behind the passage area.
  • edited November 2015
    For anyone who stumbles on this question, I was able to make the following work for one of my Q3 (How to make an ultra wide background scroll itself from the far left across the entire image, resting at its far right)

    ~STYLESHEET CODE~

    html.transition {
    transition: 14.25s linear;
    -webkit-transition: 14.25s linear;
    }

    Then I applied the same long image to both passages using SEPARATE passage tags:

    ~PASSAGE 1 CODE, put this in your stylesheet~

    html.space1 {
    background-image: url("SameNameOfImage");

    );
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    }


    ~PASSAGE 2 CODE, put this in your stylesheet~

    html.space2 {
    background-image: url("SameNameOfImage");

    );
    background-size: cover;
    background-position: top right; <- (note right instead of left)
    background-repeat: no-repeat;
    }

    I then applied the ".transition" tag to the 2nd passage. (.transition can be .whateveryouwant as long as it's the same in the html.whateveryouwant as well.)

    Messing with the amount of time in the top transition code makes the background shift to the right at different speeds depending on your end goal. Hope this helps someone!


  • edited November 2015
    Hmmm... I just used the same code concept to get a fade transition effect with two different images. Seems I've killed 2 birds with one stone.

    I'm just looking for assistance with locking down the background when the user scrolls down an extended passage so that the background does not scroll off screen. Any help or advice would be greatly appreciated, though if I can't discover a solution, I know that I can always just shorten my passages so that scrolling to read is no longer necessary. I'd prefer to be able to have longer passages for flow where desired.
  • warning: I am not a CSS/Javascript expert by any vague definition of the word, so someone with more experience will be needed to give an actual solution.

    I know of two methods to achieve the 'locking down' effect to are looking for:

    1. The CSS overflow and overflow-y properties.
    You will need to use either one of these properties to first disable the web-browser's scroll-bar at the html element level and then to enable a scroll-bar at the tw-passage element level. I tried to work out the exact CSS required but a combination of Harlowe and my weak CSS-fu overcame me.

    2. Use Javascript and movement/scrolling events to dynamically move the background image so that it appears in the relevant area of the viewport.
  • Inserting--

    overflow: hidden;

    --inside my html within the stylesheet did the trick to lock down the background, but I'm not getting the same success in enabling overflow or overflow-y inside of my tw-passage section of my stylesheet. I'l keep trying and will make sure to post if/when I find success. Thanks for the advice, greyelf!
  • Update: I still can't figure out how to prevent the background from scrolling away whenever a passage has text requiring the user to scroll up.

    I've trie dressing around with overflow, overflow-x, overflow-y, in both the HTML and the tw-passage portions of the stylesheet. I've been able to lock everything down so that you can't scroll at all, but I can't seem to free up JUST the passage to scroll and keep the background properly still.

    Any insight/help would be much appreciated. I was just going to edit all my passages to reduce the total text and prevent the need for scrolling at all, but then I realized that if I resize the window during play the passage doesn't compensate, and the problem persists anyway. Help?
  • edited November 2015
    Here is what I use in the story's CSS.
    Let me know if this helps or if I have completely misunderstood your question:
    body {
     background: url("some-url-here.jpg");
     background-attachment: fixed;
    }
    

  • Melyanna wrote: »
    Here is what I use in the story's CSS.
    Let me know if this helps or if I have completely misunderstood your question:
    body {
     background: url("some-url-here.jpg");
     background-attachment: fixed;
    }
    

    I put this in my html section, AND IT WORKED! The passage scrolls but the background remains completely without scrolling away! THANK YOU Melyanna!

Sign In or Register to comment.