Home/ Questions/Q 3966048
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T03:32:51+00:00

The picture is pretty much explanatory by itself. The div behind contains a bunch

  • 0

The picture is pretty much explanatory by itself. The div “behind” contains a bunch of little square photos that I want to animate smoothly. I’m really not good with jQuery animations, could anyone help me out with this?

(Window is fixed, pictures move “inside” it, animating forever since the page load)

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m a fan of SIN/COS functions, so let me share with you my shot at this problem.

    The idea is to have a function that runs forever, and as soon as possible so that the animation is smooth. I use a sin/cos functions to determine the new x (left) and y (top) coordenates of the div, and I have a series of parameters that allow the configuration of the speed and range of the animation.

    Just paste this into an HTML file and test it in your browser.

    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    </head>
    <body>
        <div id="stuff" style="background: red; width: 200px; height: 200px; margin: auto; position: relative;">
        a b c<br />
        d e f<br />
        g h i<br />
        j k l<br />
        </div>
        <script>
            var start = new Date();
            var x_speed = 0.001, // bigger ---> faster
                y_speed = 0.01, // bigger ---> faster
                x_multiplier = 300, // how far away I can go on the X axis
                y_multiplier = 20, // how far away I can go on the Y axis
                x_offset = 0,
                y_offset = 0;

            function animate() {

                var now = new Date();
                var elapsed_time = now - start;

                var x = Math.sin((elapsed_time)*x_speed) * x_multiplier + x_offset;
                var y = Math.cos((elapsed_time)*y_speed) * y_multiplier + y_offset;


                $("#stuff").css({
                    left : x,
                    top : y
                });

                setTimeout(animate, 0);
            }

            setTimeout(animate, 76);

        </script>
    </body>
</html>
    • 0