Controlling image movement using scroll bar of browser

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?

Answers


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


I don't believe you can directly capture the mouses scroll with javascript or jquery alone. As that works with whats part of the browser, and inside the "window". You can however capture a scroll event. Based on the windows height/width. It takes a little calculation via javascript to build a reliable/stable equation that will work on all browsers in all resolutions. I'm not going to go into details here more so due to the fact that your question is rather vague and doesn't supply a problem to be solved more than it sounds like a demand for an answer.

But the essence of what you may want to do is, get the width/height of the window/body. And through some trickery of smoke and mirrors or in this case HTML and CSS and properly laying out a bunch of layers on top of one another create a page thats a mile long, with a hidden scroll bar, that you have 2 layers on top of one acting as your "path" and the other your image.. Of which when scrolled from point a to point b is tracked via the scrolling event of the page being a mile long under it all. And then use that couples with the width/height found to make adjustments so it doesnt run off screen at any given point (less thats what you want).


Need Your Help

Horizontal overflow occuring with CSS3 3D transformations

3d css3 scrollbar overflow transformation

I have a problem on http://mr.si/ with CSS3 3D transformation. I am doing it plainly for fun and exploring new CSS functions but it disturbs me.

Why use outer `section` element in HTML5 markup?

html html5

Why would a HTML5 website adopt the following structure? I am specifically interested in the use of the outer <section> element.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.