Parallax scrolling learning notes (1): full screen scrolling

 

Reprinted please indicate the source: orangutan Captain http://www.cnblogs.com/wayns/p/parallax_study_page_scroll.html

 

Parallax scrolling)It refers to making multi-layer backgrounds move at different speeds to form a three-dimensional motion effect and bring a very good visual experience. As a hot trend in web design in 2014, more and more websites have applied this technology. Http://www.awwwards.com/top-10-web-design-topics-of-2014.html

Here are some of the award-winning works on awwwards: http://www.awwwards.com/websites/parallax/

Learning Materials: http://www.alloyteam.com/2014/01/parallax-scrolling-love-story/

 

After reading a lot of scroll parallax works, I was amazed by it, so that I wanted to try it myself.

In my own design of the scroll parallax, I want to do the kind of full screen scrolling. When I roll it, I switch the whole page and start the parallax action on the next page. (It's about soy sauce. I feel like I'm talking about it in a mess)

I think this is an article about full screen scrolling. It seems that it has nothing to do with the scroll Parallax. To put it bluntly, I want to share it with you by myself!

 

First, let's talk about how to scroll the screen. js scrolling screen has several implementation methods. If the younger brother is not talented, two methods will be introduced. If you have more methods, please reply to me and let me record accumulation. Thank you.

1 window. scroll (x, y); // scroll to coordinates (x, y) 2 3 document. body. scrolltop = y; // scroll by setting the scrolltop value of the body

 

First version:

We first use document. Body. scrolltop to switch the screenDemo source code

As you can see, the whole screen is barely rolled here, but the switching is not smooth when the screen is rolled, and it is changed in a flash.

As a patient with obsessive-compulsive disorder, I cannot do this. Now we want to switch slowly when rolling.

Version 2: (manual failover)

Use window. Scroll (0, Y) to implement vertical scrolling, and use the setinterval function to implement slow-motion switching.Demo Source code

The implementation principle is to determine the position to scroll to by calculating the offsettop value of the next section to roll up or down.

When you start to scroll, that is, when the current position is the farthest from the target location, the scroll speed is the fastest,

As the screen gets closer and closer to the target position, it slows down and ends rolling.

 

There is no compatibility test here. I only tried chrome and Firefox.

Are you welcome to discuss any questions?

 

Parallax scrolling learning notes (1): full screen scrolling