treehouse : what would you like to learn today?
Web Design Web Development iOS Development

scrolling an image across a web page

  • Here is the site I am referring to: http://www.volll.com/#section_main.

    I would like to know where I could find out how to make images scroll across my website, as the clouds are doing in this site. any links or tuts would be greatly appreciated.
  • All the little animations like the fish, and the boat, and the water are just animated gifs which you can make in photoshop or fireworks. The "new" is just flash.
  • I appreciate the response but this I know, it is how to achieve the gifs to scroll across the page that I dont know how to do.Anyone any ideas.
  • If you check out the site in Firebug you'll see that the gifs are being moved with a bit of custom javascript. Some simple margin adjustments make the fish look like they're moving up and down.

    The clouds are being moved with a simple animated position value. This is pretty easy with jQuery if you want to keep it simple as possible. The trick being looping the effect. Check out this tutorial that cropped up on J4D recently. It shows you technique to achieve the effect your after. Possibly?

    Trovster's Header Effect

    Hope that steers you in the right direction.
  • thanks for the response Toby but it doesnt really help. I cant get anywhere with that tutorial. I have sort of achieved this look before using the horizontal way template. I need it to move on its own like in the site mentioned. Sorry to be a pain.
  • Do you mean this?

    Cloud Idea
  • yeas toby this is exactly what I am looking for.