Howdy, Stranger!

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

Fade in background image on start passage

I'm using Sugarcube for Twine 2.0. I'm hoping someone can help me with the following:

I have a background image that is the same on each passage throughout the game, but I'd like it to fade in on the start passage (and only this passage). Is there a way to
a) have a background image fade in
b) have the fade in effect occur on only one passage?

Thanks!

Comments

  • edited December 2015
    Try this.

    Add a tag to start passage - call it anything... for this example we'll use imagefade

    In the same passage (main body) add this (replacing http://******.jpg with you own image url)::

    Then open your CSS (Up arrow at the bottom left of the screen, next to the house icon and game title) and choose 'Edit Story Stylesheet.

    Then add this:
    .imagefade {
            
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    
        -webkit-animation: myfirst 5s ; /* Chrome, Safari, Opera */
        animation: myfirst 5s ;
      }
    
      /* Chrome, Safari, Opera */
      @-webkit-keyframes myfirst {
        from {opacity: 0.2;}
        to {opacity: 1;}
      }
    
      /* Standard syntax */
      @keyframes myfirst {
        from {opacity: 0.2;}
        to {opacity: 1;}
      }
    

    The two instances of myfirst 5s are used to control the fade in speed. Increase the value here if you want a slower fade in.
Sign In or Register to comment.