Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:
    Code:
    <!--SCM Music Player by Adrian C Shum - http://scmplayer.net-->
    <script type="text/javascript" src="http://scmplayer.net/script.js" ></script>
    <script type="text/javascript">
    SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'40'},'playlist':[{'title':'2Spooky Battle','url':'http://a.tumblr.com/tumblr_mbdoptQ5LT1rte8jio1.mp3'}],'placement':'bottom','showplaylist':'false'}");
    </script>
    <!--End of SCM Music Player script-->
    And I also have two pictures:
    Code:
    <html>
    <head>
    <style type="text/css">
    
    #img1{
      position: fixed;
      right: 10px;
      bottom: 100px;
      z-index: 10;
    }
    
    #img2{
      position: fixed;
      left: 10px;
      top: 10px;
      z-index: 10;
    }
    
    </style>
    </head>
    
    <body>
      <img src="IMAGE1.png" id="img1">
      <img src="IMAGE2.png" id="img2">
    </body>
    </html>
    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.)

    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.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    you would have to look at your audio plugin to see if there is a "playback start" event listener. Most have this.

    You would then set an interval to move your image1 pixel by pixel across the screen until it reaches its final position (you can divide the amount of pixels it needs to move by the seconds it should take to get there and set your values accordingly). Once it reaches that position you would change image 2 from display:none to display:inline.

    None of it's that complicated, but finding that event listener would be my first step.

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    you would have to look at your audio plugin to see if there is a "playback start" event listener. Most have this.

    You would then set an interval to move your image1 pixel by pixel across the screen until it reaches its final position (you can divide the amount of pixels it needs to move by the seconds it should take to get there and set your values accordingly). Once it reaches that position you would change image 2 from display:none to display:inline.

    None of it's that complicated, but finding that event listener would be my first step.
    I looked and found
    Code:
    {if(elm.addEventListener){elm.addEventListener(evType,fn,useCapture);return true;}
    as the only mention of an event listener

    Also, what you see in my first post is basically the extent of my knowledge of HTML and coding in general so I'm not really sure of how to implement anything else you said..

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    hmm, I don't really know - from the documentation it seems to be made from 3 other libraries. You could try adding an onplay alert, by replacing that line with this:
    Code:
    SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'40'},'playlist':[{'title':'2Spooky Battle','url':'http://a.tumblr.com/tumblr_mbdoptQ5LT1rte8jio1.mp3'}], 'onplay': function() {alert('playing');},'placement':'bottom','showplaylist':'false'}");
    and seeing if it alerts when playback begins

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    hmm, I don't really know - from the documentation it seems to be made from 3 other libraries. You could try adding an onplay alert, by replacing that line with this:
    Code:
    SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'40'},'playlist':[{'title':'2Spooky Battle','url':'http://a.tumblr.com/tumblr_mbdoptQ5LT1rte8jio1.mp3'}], 'onplay': function() {alert('playing');},'placement':'bottom','showplaylist':'false'}");
    and seeing if it alerts when playback begins
    I've done that and the player still works but how would I link the appearance of the images to the "onplay" feature?
    Forget everything about it moving; I can take care of that myself through use of .gifs but I just want it to appear when the music starts.

    Thank you so much for your help, by the way.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •