How can I make an image slide across the screen when another object loads?
Alright, this is REALLY convoluted but I think it would be cool
I have a music player on my blog:
And I also have two pictures:
<!--SCM Music Player by Adrian C Shum - http://scmplayer.net-->
<!--End of SCM Music Player script-->
I want img1 to slide from the left side of the screen to its fixed position on the right over the span of 2.6 (or 3, if decimals aren't possible) seconds. But this should only happen after the music starts playing (so it should domino after its loaded and autoplays). (From there, if possible, I'd like img1 to just hover up and down but I can live without that.)
<img src="IMAGE1.png" id="img1">
<img src="IMAGE2.png" id="img2">
Then I'd like img2 to just appear AFTER img1 has finished its initial animation (the slide across the screen). That needs to do nothing but just stay there.
The final and most important piece of the puzzle is that this can only happen ONCE. This is a blog so I don't want the pictures to re-load if someone goes to the next page. The music player has this property already but I'd like it for the pictures.
This is horribly complicated, I know, and I'm sorry to even be asking. But I think it would be really cool to get done.