SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy How to make this flying cloud effect?

    is there any example code for the following flying "clouds and plane" effect?
    it looks really nice.
    can anyone help me?

    http://www.graphicairlines.com/galnew/

  2. #2
    SitePoint Zealot Amit Yaron's Avatar
    Join Date
    Jan 2011
    Location
    Hod Haharon, Israel
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just checked with my DOM Inspector, and saw that the moving cloud is an image inside a DIV element. The DIV element has a style attribute, and its 'top' and 'left' change all the time.
    In java script you can do it with a function:
    Code:
    function move_cloud() {
      cloudDiv = Document.getElementById('c2');
      intTop = parseInt(cloudDiv.style.top);  // Get rid of the 'px'
      intTop += 1;                                   // For example
      cloudDiv.style.top = intTop + "px";     // Important to add the unit (pixels)
      intLeft = parseInt(cloudDiv.style.left); // Get rid of the 'px'
      intLeft += 1;                                  // For example
      cloudDiv.style.left = intLeft + "px";    // Important to add the unit (pixels)
    
      setTimeout(100, "move_cloud()");     // 1st argument depends on how fast you want
                                                         // Your picture to move.
    }
    Don't forget to initially call 'move_cloud()' somehow.


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
  •