Experience Summary of jQuery parallax scrolling effect webpage implementation method, jquery Parallax

Experience Summary of jQuery parallax scrolling effect webpage implementation method, jquery Parallax

This article summarizes and analyzes the implementation of jQuery parallax scrolling effect web pages. We will share this with you for your reference. The details are as follows:

The first two core functions are based on jQuery:

1. $ (document). scrollTop ();

This function is mainly used to return the pixel value from the current top of the page to the top of the page, which is a non-negative integer.

2. $ (window). scroll ();

This event is used to monitor whether the page is scrolled. Once it is scrolled, the callback function is triggered.

The following code is obtained for the two functions:

$(window).scroll(function() {var top = $(document).scrollTop();if (top == 100) alert(top);});

The code above indicates that when the page is scrolled, check whether the pixel between the current top and the start of the page is 100. If yes, the message box is displayed.

When you can determine the scroll distance, you can perform other operations. The rest is the positioning of various css.

When creating a page, we need to determine which images require parallax scrolling. For each image, we need to define the CSS attribute

position: absolute;

At this moment, the div will drift to the upper left corner of the page. Of course, you 'd better write left: 0px; top: 0px; and the width and height of the div. If necessary, you need to write overflow and background, all images must be in png format.

After setting the attributes, locate the starting position of the div. That is, to modify left and top, you can modify right and bottom if necessary.

After the above work is completed, you can set the animation.

The function used is css. I set it like this:

$('#text1').css('top', text1_top-parseInt(s_top)*0.15+'px');

The above code is stored in the scroll () function. It can be executed as long as Page scrolling is detected. Here, s_top is the current rolling distance, as mentioned previously. Textshorttop is the original position of $ ('# text1') and needs to be read after the page is loaded. Generally used:

var text1_top = $('#text1').offset().top;

And cannot be placed in the scroll () function.

Now let's start to describe the principle of parallax scroll:

After the page is loaded, get the height of $ ('# text1') from the top of the page and assign it to textdesktop.

When the page scroll event is triggered, execute the following statement ('{text1'}.css ('top', text1_top-parseInt (s_top) * 0.15 + 'pxy'), meaning: As the page goes down, subtract the top distance of text1 from the current moving distance by 0.15 times. That is to say, the page moves 100 pixels down each time, and text1 only moves up to 15 pixels, and so on. Note that if the minus sign is a plus sign, it is to move 15 pixels down. In other words, the plus sign is the same direction, and the minus sign is the opposite direction.

It is triggered only when the page is rolled to a certain distance. My statement is to judge:

if (s_top > 200) {$('#text1').css('top', text1_top-parseInt(s_top - 200)*0.15+'px');}

When the scroll distance is 200 pixels, run the following statement: the difference is s_top-200, where the base number starts from 0. If the base number is not reduced by 200, then the base number is not 0, but 200. Then # the parallax scrolling of text1 is not correct.

Finally, I want to talk about the offset function. Its main purpose is to determine the left and top values of the current element. We have mentioned that position: absolute; is used to set the div. If the div does not set this, but you need to scroll, you must first use the offset function to determine the left and top of an element, use the css function to assign values to the elements to be located (before setting position: absolute;), and then set the element to position: absolute; this is also required in scroll () function.

When compiling a parallax scrolling page, the biggest experience is to have a clear idea, and pay attention to the running sequence. Sometimes the callback function is needed.

You need to have a relatively quiet environment to write code. You need to relax, so that the efficiency will be higher. When you need to rest, you need to rest and write the code in one breath.