<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>

http://openbolton.co.uk/

Scrolling animation

images, animation

jQuery