SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    jQuery animate plane across screen - out left side - back in on right side?

    In a continuos loop? So it indefinitely flys across the screen exiting out the left side and flying back in from the right side.Not finding much on google for this question? Can anyone show me how to accomplish this? Thanks!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi Eric,

    Not difficult with jQuery.
    Here's some code for you to play around with:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery animation example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          #plane{
            position:relative; 
            top:0px; 
            background-image: url(http://www.your-new-site.com/img/plane.png);
            background-repeat: no-repeat; 
            display:block;
            height:100px; 
            width:135px;
          }
        </style>
      </head>
      
      <body style="overflow:hidden">
        <span id="plane"></span>
      
        <script>
          $(document).ready(function() {
            
           function flyPlane(){
             plane.css('left', startPos);
             plane.animate({left: -200}, 7000, 'linear')
           };
           
            var screenWidth = $(document).width();
            var startPos = screenWidth;
            var plane = $('#plane')
            flyPlane();
            setInterval(function() {
              flyPlane();
            }, 9000);
          });
        </script>
      </body>
    </html>
    Be sure to swap out the site name of the image url in the CSS for that of your new site.

    Does that help?
    Is there anything you would like me to explain about the code?

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    As expected it works perfect Pullo! Didn't test yet but I assume it works in ie8 too. Took me a little bit to figure out those three numbers for some reason. But I got it now. Thanks Pullo it looks awesome!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by EricWatson View Post
    As expected it works perfect Pullo! Didn't test yet but I assume it works in ie8 too.
    Dude, it works on IE7, too.
    I couldn't test, but I'm sure it even works on IE6.
    You gotta love jQuery

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool even better.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Good morning,

    Is this how I would write multiple functions/doc readys? It works this way but i doubt it's the best way to write it.

    Code:
     $(function() {
            
           function nearClouds(){
             nearclouds.css('right', startPos);
             nearclouds.animate({right: -1268}, 60000, 'linear')
           };
           
            var screenWidth = $(document).width();
            var startPos = screenWidth;
            var nearclouds = $('#nearclouds')
            nearClouds();
            setInterval(function() {
              nearClouds();
            }, 63000);
          
    	 function farClouds(){
             farclouds.css('right', startPos);
             farclouds.animate({right: -1068}, 90000, 'linear')
           };
           
            var screenWidth = $(document).width();
            var startPos = screenWidth;
            var farclouds = $('#farclouds')
            farClouds();
            setInterval(function() {
              farClouds();
            }, 93000);
          });

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    additionally, how would I also go about including an amimation that slowly takes a balloon up 50px - pauses - then back down 50px - pauses - in an infinite loop?

    This is the closest I could come - which is not very close.
    $("#balloon").animate( {"top": "+=30px"}, 4000, "linear" );
    $("#balloon").animate( {"top": "-=30px"}, 4000, "linear" );

    Thanks!

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi Eric,

    I would do this:

    Code JavaScript:
    $(function() {
      function nearClouds(){
        nearclouds.css('right', startPos);
        nearclouds.animate({right: -1268}, 60000, 'linear');
      }
     
      function farClouds(){
        farclouds.css('right', startPos);
        farclouds.animate({right: -1068}, 90000, 'linear');
      }
     
      var startPos = $(document).width();
      var nearclouds = $('#nearclouds')
      var farclouds = $('#farclouds')
     
      nearClouds();
      farClouds();
     
      setInterval(function() {nearClouds();}, 63000);
      setInterval(function() {farClouds();}, 93000);
    });

    I would keep the function definitions within $(document).ready() as they are only called from here (i.e. they are not needed elsewhere on the page) and in this way they don't pollute the global namespace.

    If we are just talking about these two functions then this is all I would do, as the code is still relatively readable.
    If you want to animate multiple elements, I would abstract everything out into an animateMe() function.

    Bit like this:

    Code JavaScript:
    $(function() {
     
      function animateMe(el, startStyle, endStyle, duration, repeat){
        setTimeout(function(){animateMe(el, startStyle, endStyle, duration, repeat)}, repeat);
        el.css(startStyle);
        el.animate(endStyle, duration, 'linear', function(){
          el.css(startStyle);
        });
      }    
     
      w = $(document).width()
      animateMe($('#nearClouds'),{right: w}, {right: -1268}, 60000, 63000);
      animateMe($('#farClouds'),{right: w}, {right: -1068}, 90000, 93000);
    });

    This assumes that the elements disappear off the screen like in the last example, as the animation then starts over.
    If you wanted to animate them between two points (i.e. forward and back), that would require an extra function.

    Does this help at all?

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Awesome tremendously helpful! And how is the best way to go about adding the balloons up 50px - pause - down 50px pause - in a infinite loop? Thanks for your help.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi Eric,

    Here's a revised version with two methods - one for a single way animation (i.e. plane enters left and exits right) and one for a two way animation as you describe in the above post.

    Remember to swap the url for the planes with that of your new website.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery animation example</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          #plane, #plane1{
            background-image: url(http://www.your-website-here.com/img/plane.png); 
            position:relative; 
            background-repeat: no-repeat; 
            display:block;
            height:100px; 
            width:135px;
          }
        </style>
      </head>
      
      <body style="overflow:hidden">
        <span id="plane"></span>
        <span id="plane1"></span>
        <script>
          $(function() {
            function animateOneWay(el, startStyle, endStyle, duration, repeat){
              setTimeout(function(){animateOneWay(el, startStyle, endStyle, duration, repeat)}, repeat);
              el.css(startStyle);
              el.animate(endStyle, duration, 'linear');
            }
            
            function animateTwoWay(el, startStyle, endStyle, duration, pause){
              rep = pause*2 + duration*2
              setTimeout(function(){animateTwoWay(el, startStyle, endStyle, duration, pause)}, rep);
              el.css(startStyle);
              el.animate(endStyle, duration, 'linear').delay(pause);
              el.animate(startStyle, duration, 'linear').delay(pause);
            }
                
            w = $(document).width()
            animateOneWay($('#plane'),{left: w+200}, {left: -200}, 3000, 4000);
            animateTwoWay($('#plane1'),{top: 200}, {top: 150}, 1000, 1000);
          });
        </script>
      </body>
    </html>
    Hope that helps you.

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool I hopefully will be able to put all that together. I like the animateMe function. I'd like to get all the animations into that. So what I'm trying to do is 1) plane flys left across screen. 2) different clouds float right across screen at different speeds. 3) the balloons float up and down. All very slowly so you don't want to shoot yourself.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Yeah, should all be possible using the two functions.
    Have a play around with it and let me know how you get on.

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Nice! OK this is the cleanest I can get it. I edited it a little bit and moved some things around. Does this look good or can you see anyways to clean it up a bit and/or speed it up? Also, should I put it all in a documentReady or does $function suffice. I'll have to test this on another computer too because on mine it spikes my cpu and kills it. Thanks a bunch! It looks amazing but, I'm torn. Just because you can doesnt mean you should right. I'll slow it all down a lot and see if its not to much movement. ACTUALLY! In addition how would one go about providing a "stop animation" button? That way they can turn it all off at least. Thats a good compromise.

    Code JavaScript:
    $(function() {
     
      function animateMe(el, startStyle, endStyle, duration, repeat){
        setTimeout(function(){animateMe(el, startStyle, endStyle, duration, repeat)}, repeat);
        el.css(startStyle);
        el.animate(endStyle, duration, 'linear');
      }    
      function animateTwoWay(el, startStyle, endStyle, duration, pause){
              rep = pause*2 + duration*2
              setTimeout(function(){animateTwoWay(el, startStyle, endStyle, duration, pause)}, rep);
              el.css(startStyle);
              el.animate(endStyle, duration, 'linear').delay(pause);
              el.animate(startStyle, duration, 'linear').delay(pause);
      }
      w = $(document).width()
      animateTwoWay($('#balloon1'),{bottom: 250}, {bottom: 150}, 15000, 4000);
      animateTwoWay($('#balloon2'),{bottom: 400}, {bottom: 250}, 20000, 7000);
      animateMe($('#nearclouds'),{right: w}, {right: -1268}, 60000, 63000);
      animateMe($('#farclouds'),{right: w}, {right: -1068}, 90000, 93000);
      animateMe($('#plane'),{left: w}, {left: -650}, 20000, 23000);
    });

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Does this look good or can you see anyways to clean it up a bit and/or speed it up?
    Nope. That's looking pretty optimized.

    Quote Originally Posted by EricWatson View Post
    Also, should I put it all in a documentReady or does $function suffice.
    Code JavaScript:
    $(function() {
      alert('Ready to do your bidding!');
    });

    is the same as this:

    Code JavaScript:
    $(document).ready(function() {
      alert('Ready to do your bidding!');
    });

    The first is just a shortcut for the second.

    Quote Originally Posted by EricWatson View Post
    I'm torn. Just because you can doesnt mean you should right.
    You said it ...
    I would try not to overdo it, but a bit of subtle animation can really spice up your page.

    Quote Originally Posted by EricWatson View Post
    In addition how would one go about providing a "stop animation" button? That way they can turn it all off at least.
    Add this to the page:

    HTML Code:
    <a href="" id="stop">Stop this madness!</a>
    new JS:

    Code JavaScript:
    $(function() {
      var t1, t2;
     
      function animateOneWay(el, startStyle, endStyle, duration, repeat){
        t1 = setTimeout(function(){animateOneWay(el, startStyle, endStyle, duration, repeat)}, repeat);
        el.css(startStyle);
        el.animate(endStyle, duration, 'linear');
      }
     
      function animateTwoWay(el, startStyle, endStyle, duration, pause){
        rep = pause*2 + duration*2
        t2 = setTimeout(function(){animateTwoWay(el, startStyle, endStyle, duration, pause)}, rep);
        el.css(startStyle);
        el.animate(endStyle, duration, 'linear').delay(pause);
        el.animate(startStyle, duration, 'linear').delay(pause);
      }
     
      w = $(document).width()
      animateOneWay($('#plane'),{left: w+200}, {left: -200}, 3000, 4000);
      animateTwoWay($('#plane1'),{top: 200}, {top: 150}, 1000, 1000);
     
      $('#stop').click(function(){
        $("body").find('*').stop(true, true);
        window.clearTimeout(t1);
        window.clearTimeout(t2);
        return false;
      })
    });

    The "stop" code is at the bottom. For it to work you need to assign variables to the timeouts.

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Awesome - your the man! That should set me strait. Show the coolness and let them turn it off. Perfect. You just made a mini jquery.spritely minus the sprites. Spritely is a bit overkill for my needs. This does perfect. Thanks again

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ha-ha! Better yet I may just do a stylesheet switcher and turn it to a nice soft peaceful night scene.

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ha-ha! Better yet I may just do a stylesheet switcher and turn it to a nice soft peaceful night scene.
    Might want to check this out then: http://hibbard.eu/using-cookies-with...tyle-switcher/
    Maybe it helps.

  18. #18
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Man I just went through the first 2 pages of google. Not one style switcher meets my needs. Not one of them allows you to only put the stuff in you want changed in the alt stylesheet. Each one makes you have to maintain 2 or three separate nearly identical stylesheets. I have a script that works perfect from my old site but I wanted to stick with a jquery plugin. Anyone know of one that has cookies and uses cascading stylesheets - verses one or the other. And a toggle would be a nice addition.

  19. #19
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I figured out an easy way to toggle the animation. I only need to add !important to the position. That overrides jquery. That can easily be done with a stylesheet switcher. But too bad I don't know how to do it without that. All the peices at least. Because its so easy doesn't really need a simi large script to handle it. I just need to toggle a class (can do that), and add a cookie that remembers the class added (don't know how to do that). Just thought I'd throw it out there see if anyone new how?

    Like I said earlier, there are some very simple jquery script changers out there but they don't do cascade and/or cookie.

  20. #20
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    God that too me forever to find this thread. lol. Thought it good to update with my final solution. Credit to pullo at bottom of tut for his invaluable help. http://www.websitecodetutorials.com/...kie-on-off.php

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Thanks Eric!
    You beat me to it with the tutorial, but it's great to have this summarized in one place.


Bookmarks

Posting Permissions

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