I've had an idea for some fancy, film-like opening credits to my game. I'll use the wait script and clear screen to run a couple of pre-title credits, but then I want to finish on a nice slow fade-in of the game's title (it's an image).

I guess I'd use CSS like this, but I'm not sure how I would target the title image. I know under normal circumstance the image url would simply go where /image.jpg/ is in the code, but I'm not altogether clear.

#image {
    background: url('/image.jpg/') no-repeat center center fixed;

    -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 ;
  }

Thanks in advance.

You can generally attach CSS to an image by giving the image a class attribute when you output it, where the class attribute matches what you've defined in the CSS (or you can use an ID, if you know the ID is unique). For example:

OutputTextNoBr("<img src=\"" + GetFileURL("image.jpg") + "\" class=\"fadeinimg\">")

I'd post some working code, but I tried getting this to work in Quest, and I couldn't. It's possible Quest doesn't support CSS3, or maybe I just was doing something wrong. I tried a jQuery fadeIn as well, but I couldn't get that to work either (not sure if it was a problem with caching). So I don't have a complete solution for you at the moment.

I did an intro screen fade-in in Moquette, and I included that in the tech writeup http://blog.textadventures.co.uk/2013/1 ... with-text/

Thanks, Alex.

I had tried this in my test:

OutputTextNoBr("<img src=\"" + GetFileURL("image.jpg") + "\" onload=\"$(this).fadeIn(5000);\">")

but it didn't work. The image would always just show up. (It did the same if I used a class or ID instead.) If I put a console log in there, it printed. But no fade in. Perhaps the more extensive way you set it up would work better. Or maybe I just made some bonehead mistake.

Ok, I got it to work. I was missing that you have to set "display:none" on the image, which didn't make sense to me earlier as it uses opacity to fade in the image - and the first thing it does it set display to "inline". It must be checking if display is already not "none".

At any rate, the CSS is:

<css>
<![CDATA[
    <style>
        #titleimage {
            display: none;
        }
    </style>
]]>
</css>

and the code (wherever you like it - I had it in my start script, which I'm showing since you do need the CDATA stuff if you're adding it via code view) is

<start type="script">
<![CDATA[
    OutputTextNoBr (game.css)
    OutputTextNoBr("<img src=\"" + GetFileURL("image.jpg") + "\" id=\"titleimage\" onload=\"$(this).fadeIn(5000);\">")
]]>
</start>

Many thanks, Jay.

I'll have a go at adding this and let you know how I get on.

Well there we go. Should come as no surprise that I failed.

I don't know how to add that start script. I already have some JS in my start script, but how do I add the above?

jaynabonne wrote:Ok, I got it to work. I was missing that you have to set "display:none" on the image, which didn't make sense to me earlier as it uses opacity to fade in the image - and the first thing it does it set display to "inline". It must be checking if display is already not "none".

At any rate, the CSS is:

<css>
<![CDATA[
    <style>
        #titleimage {
            display: none;
        }
    </style>
]]>
</css>

and the code (wherever you like it - I had it in my start script, which I'm showing since you do need the CDATA stuff if you're adding it via code view) is

<start type="script">
<![CDATA[
    OutputTextNoBr (game.css)
    OutputTextNoBr("<img src=\"" + GetFileURL("image.jpg") + "\" id=\"titleimage\" onload=\"$(this).fadeIn(5000);\">")
]]>
</start>

Can you please explain how I implement all this, as though you were talking to a 9 year-old, as that's the only way I'll understand.

I guess I just add the CSS to my existing CSS block which hides the command box?

But it's the second part I don't get. I already have some JS in my Start Script, so how do I add yours? If I go to 'Add Script' I don't know which option to pick from the list??

Halle-bloody-luja! I got it working!

Woo hoo!