›

Howdy, Stranger!

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

Sign In Register

Categories

Animated Background Image for Harlowe?

NeoromanNeoroman
edited May 2015 in Help! with 2.0
I was thinking about this as a potential thing for my game. As the player enters a new passage, the image could change to signify a new location or scenario. Specifically, a second will pass and the image will fade in and slowly move from side to side. If the player clicks over to another passage where there's supposed to be an image change, the previous image will fade out and the next will fade in.

Is this possible? Can it be possible? Only time will tell!

Comments

  • timsamofftimsamoff
    I had this idea too, but since Twine games are really only single HTML pages (i.e., with one <body> selector), making this happen would be difficult.

    I guess that you could set a variable for each passage (I do this anyway) that got passed to a JavaScript script that changed the class/ID of the <body> tag and reloaded the page. Then you could load a new bg image per passage. It was more than I wanted to get into at this point though.

    Another way might be to add a <div> with a unique class/ID to each passage that was styled to fill the entire <body> space. Then, per passage, you could change the background image of the <div>.

    I’d love to know if there’s an easier way.
  • ClarettaClaretta
    edited May 2015
    Since Harlowe doesn't have any native support for class switching you might want to look into GSAP.

    You'll also need some basic knowledge of website animation.
  • greyelfgreyelf
    Demo 2 in this article may give you an idea on how this could be done.

    Basically you have multiple background images loaded but only the current one is visible, then you use some javascript to change which one is visible.
  • ClarettaClaretta
    edited May 2015
    That's how I do it in my story yes. I'd prefer waiting until my story is published for releasing the exact code though. But I can say it is very possible.
  • NeoromanNeoroman
    greyelf wrote: »
    Demo 2 in this article may give you an idea on how this could be done.

    Basically you have multiple background images loaded but only the current one is visible, then you use some javascript to change which one is visible.

    Demo 3 is even closer to what I'm looking for, but the other demos are useful as well. Now all that's left is to figure out the slow movement.
Sign In or Register to comment.