Image fade-in

OurJud
02 Jan 2016, 21:15I'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.
Thanks in advance.
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.

jaynabonne
03 Jan 2016, 19:29You 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:
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.
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.
Alex
03 Jan 2016, 20:05I 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/

jaynabonne
03 Jan 2016, 20:15Thanks, Alex. 
I had tried this in my test:
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.

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.


jaynabonne
03 Jan 2016, 20:35Ok, 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:
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
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>

OurJud
03 Jan 2016, 22:29Many thanks, Jay.
I'll have a go at adding this and let you know how I get on.
I'll have a go at adding this and let you know how I get on.

OurJud
03 Jan 2016, 22:42Well 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?
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?

OurJud
05 Jan 2016, 01:05jaynabonne 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??

OurJud
05 Jan 2016, 01:20Halle-bloody-luja! I got it working!

jaynabonne
05 Jan 2016, 08:55Woo hoo! 
