Grow your CSS skills. Land your dream job.

scrolling an image across a web page

  • # October 20, 2008 at 10:53 am

    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.

    # October 20, 2008 at 11:37 am

    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.

    # October 20, 2008 at 3:08 pm

    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.

    # October 20, 2008 at 4:04 pm

    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.

    # October 21, 2008 at 4:18 am

    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.

    # October 21, 2008 at 9:41 am

    Do you mean this?

    Cloud Idea

    # October 22, 2008 at 6:33 am

    yeas toby this is exactly what I am looking for.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".