Question

I want to guide an image through a path. The scroll down of browser should bring the image down the path, and the scroll up of browser should make the image to trace back its path.

Here is an example of what I would like to acheive:

I want to guide that bug down the path as the user scrolls down through the article on the page and make it retrace its path when the user scrolls up (The bug’s head will always be in the direction of motion).

How can I achieve this using jQuery and javascript?

Answer 1

You’ll need to calculate the path you intend to use, and then bind a function to the scroll event that moves the image based on the distance scrolled, something like :

$(window).on('scroll', function(e) {
    var S = $(this).scrollTop(),                // scrolled distance
        T = 10 + (S/24),                        // value for Top
        L = 10 + Math.abs(Math.sin(S/400)*50);  // value for Left

    $("img").css({top: T+'%', left: L+'%'});    //set CSS
});​

FIDDLE