# Posted By

delineo on 12/03/10

# Statistics

Viewed 406 times
Favorited by 0 user(s)

# Scrolling animation

/ Published in: jQuery
Save to your folder(s)

Copy this code and paste it in your HTML
`<ul id="homeExploreAni"><li><img src="/images/pic-home-explore-wellbeing.gif" alt="" /></li><li><img src="/images/pic-home-explore-support.gif" alt="" /></li><li><img src="/images/pic-home-explore-keep-learning.gif" alt="" /></li></ul> <script type="text/javascript"> \$(document).ready(function () {     // set up home explore animation    \$("#homeExploreAni li:eq(0)").css("left", "-10px");    \$("#homeExploreAni li:eq(1)").css("left", "80px");    \$("#homeExploreAni li:eq(2)").css("left", "170px");     // moves ani left    function manAniLoop() {        \$("#homeExploreAni li").animate({ left: "-=90px" }, 200, CheckPositionLeftAni());    };     function CheckPositionLeftAni() {        \$("#homeExploreAni li").each(                function () {                    if (\$(this).css("left") == "-10px") {                        \$(this).css("left", "260px");                    };                    if (\$(this).css("left") == "170px") {                        FocusOnAni(this);                    };                    if (\$(this).css("left") == "80px") {                        FocusOffAni(this);                    };                });    };     // increases text/image size on central item    function FocusOnAni(item) {        \$(item).children("img").animate({ width: "90px", height: "90px", left: "0px", top: "0px" }, 100);    }     // decreases text/image size on central item    function FocusOffAni(item) {        \$(item).children("img").animate({ width: "40px", height: "40px", left: "25px", top: "25px" }, 100);    } }); </script>`

## Comments

Subscribe to comments

You need to login to post a comment.