SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make a Clound Image Move ?

    How to make a cloud like the websites below to move ?

    www.volll.com
    www.arbel-designs.com

    Thanks.

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can:
    1. Create your own animation sequence by using setInterval. During each interval, you can change the top/left CSS properties of the target images.
    2. YOu can use the jQuery animate method to move your images across the screen.

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TommiChi View Post
    You can:
    1. Create your own animation sequence by using setInterval. During each interval, you can change the top/left CSS properties of the target images.
    2. YOu can use the jQuery animate method to move your images across the screen.
    Great TommiChi, thank you for your answer.

    Can you show the link above example so that I can learn it ?

    Thanks.

  4. #4
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there rosiewp,

    here is one possible method for you to try...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>floating clouds</title>
    
    <style type="text/css">
    body {
         background:#444;
         margin:0;
         padding:0;
     }
    #clouds {
         height:125px;
         margin-top:100px;
         border-top:1px solid #003;
         border-bottom:1px solid #003;
         background-image:url(http://www.coothead.co.uk/images/floating_clouds.jpg);
     }
    </style>
    
    <script type="text/javascript">
    
      var i=0;
      var speed=25;
    
    function rollClouds() {
    
       document.getElementById('clouds').style.backgroundPosition=i+'px 0';
          
       i--;
     
       scroller=setTimeout(function(){rollClouds()},speed);
     }
    
     window.addEventListener?
     window.addEventListener('load',rollClouds,false):
     window.attachEvent('onload',rollClouds);
    
    </script>
    
    </head>
    <body>
    
    <div id="clouds"></div>
    
    </body>
    </html>
    
    coothead

  5. #5
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Here's a VERY simple page I put together to point out where your possibilities are. Enjoy:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
    <style>
    div {
    margin:0;
    margin-left:0;
    width:100px;
    height:100px;
    overflow:hidden;
    position:absolute;
    top:50px;
    left:50px;
    border:solid thin #000;
    }
    </style>
    </head>
    <body>

    <div>I am a cloud</div>
    <script>

    function animationSequence(params)
    {

    var animationArray = [], i = 0, iMax = Math.ceil(params.speed / params.interval);
    //Linear easing
    var diff = Math.round((params.start - params.end) / iMax);
    while(i <= iMax) {
    animationArray.push(params.start - (diff * i))
    i++;
    }
    animationArray[iMax] = params.end;
    return animationArray;

    }

    function animate(elem, cssProperty, startPoint, endPoint, speed)
    {

    var params = {
    elem: elem,
    start: parseInt(startPoint),
    end: parseInt(endPoint),
    css: cssProperty,
    speed: speed,
    interval: 20
    }

    var animationArray = animationSequence(params);
    var currPos = function()
    {
    return parseInt(params.elem.style[params.css]);
    }

    var i = 0, iMax = animationArray.length - 1;
    params.elem.style[params.css] = animationArray[0] +'px';
    var action = setInterval(function() {
    if(currPos() == animationArray[i]) {
    i++;
    params.elem.style[params.css] = animationArray[i] +'px';
    }
    if(currPos() == animationArray[iMax]) {
    clearInterval(action);
    }
    }, params.interval);

    }

    animate(document.getElementsByTagName('div')[0], 'left', 50, 600, 7000)
    </script>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @coothead @TommiChi

    Thank you very much Guys! You are the Man!


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
  •