Principle and Implementation of parallax scroll

As an elegant and cool way to display pages, Parallax Scrolling is favored by more and more front-end designers. You can still see its shadows in the 2014 Web Design Trend of Apsara stack, so we have to study the principle and implementation method of parallax scrolling.

1. Parallax scrolling

Parallax Scrolling refers to the web page display technology that visually forms a three-dimensional motion effect by moving multiple levels of elements in a webpage rolling process. Designers at home and abroad have achieved many cool effects, 14 amazing cross-border rolling websites with interesting stories, 17 Inspiring Examples of Parallax Scrolling Sites, and 18 beauul ul Examples of Parallax Scrolling in Web Design.

2. features the parallax rolling effect is cool and suitable for personalized display. The Parallax is rolled out slowly, and is suitable for the scenarios where you can tell stories. Parallax scrolling is easy to get lost and requires strong navigation functions. 3. the principle is that the text, images, and backgrounds of traditional web pages all scroll at the same speed in the same direction, while the parallax scroll is at different speeds for content and multi-level backgrounds, or different directions.
Sometimes you can add some transparency and size animations to optimize the display. 4. Implementation 4.1 simple implementation using the background-attachment attribute. Background-attachment: fixed | scroll | local
By default, scroll is selected. When a page is scrolled, the content and the background are moved together. If the value is fixed, the background is relative to the browser. Use the picture and background of Alloy Team's blog "Love Story of parallax rolling" to see the effect.

<Div class = "article section1"> every morning when I work overtime, walking Alone on the dark way home </div> <div class = "article section2"> I think of running in the sunset that day </div> <div class = "article section3"> that's what I passed away, youth </div>

Css is very simple,

/* Set the background's background-attchment attribute in a unified manner */. article {width: 960px; margin: 0 auto; height: 800px; padding: 40px; font: 24px/1.5 'Microsoft yahei'; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; line-height: 400px ;} /* set different backgrounds and colors for each part */. section1 {color: white; background-image: url (http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg );}. section2 {color: # FF8500; background-image: url (http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg );}. section3 {color: #747474; background-image: url (http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg );}

In addition, the animation effect on 4.2 is a little dull. When we scroll the page, we can add some animations to the text to see the effect. Let's listen to the scroll event. When the page scrolls somewhere (), we add an animation to the element.

var articleHeight =800;var section1 = document.getElementById('section1'),section2 = document.getElementById('section2'),section3 = document.getElementById('section3');window.addEventListener('scroll',scrollHandler);function scrollHandler(e){var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;if(scrollTop > 0 && scrollTop < articleHeight){section1.classList.add('anim');}else if(scrollTop >= articleHeight && scrollTop < articleHeight*2){section2.classList.add('anim');}else if(scrollTop >= articleHeight*2 && scrollTop < articleHeight*3){section3.classList.add('anim');}}

Html and css must also be modified.

/* Set the background's background-attchment attribute in a unified manner */. article {width: 960px; margin: 0 auto; height: 800px; padding: 40px; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; font: 24px/1.5 'Microsoft yahei'; line-height: 400px; text-indent:-25em ;} /* set different backgrounds and colors for each part */. section1 {color: white; background-image: url (http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg );}. section2 {color: # FF8500; background-image: url (http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg );}. section3 {color: #747474; background-image: url (http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg );}. anim {-webkit-transition: all 1 s loading-in;-moz-transition: all 1 s loading-in;-ms-transition: all 1 s loading-in; transition: all 1 s short-in; text-indent: 3em ;}

4.3 In the first two cases of background movement, only the background remains fixed. We can add motion to a multi-level element, including the background, to achieve parallax scrolling. When there are multiple backgrounds, make sure that the above background is transparent. Let's take a look at the effect of nettuts, study it, and see the implementation process.

In the html file, data-speed and data-type are used to pass parameters to js.

<!-- Section #1 --><section id="home" data-speed="10" data-type="background">  <article>I am Absolute Positioned</article></section><!-- Section #2 --><section id="about" data-speed="4" data-type="background">  <article>Simple Parallax Scroll</article></section>

CSS file,

#home {    background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/home.jpg) 50% 0 no-repeat fixed;    height: 1000px;    margin: 0 auto;    width: 100%;    max-width: 1920px;    position: relative;    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);}#about {    background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/about.jpg) 50% 0 no-repeat fixed;    height: 1000px;    margin: 0 auto;    width: 100%;    max-width: 1920px;    position: relative;    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);}/* Introduction */ #home article {    background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/intro.png") no-repeat scroll center top transparent;    height: 458px;    position: absolute;    text-indent: -9999px;    top: 291px;    width: 100%;}#about article {    background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/parallax.png") no-repeat scroll center top transparent;    height: 458px;    position: absolute;    text-indent: -9999px;    top: 291px;    width: 100%;}

Javascript. jquery is used here.

$(document).ready(function () {    // Cache the Window object    $window = $(window);     $('section[data-type="background"]').each(function () {        var $bgobj = $(this); // assigning the object         $(window).scroll(function () {             // Scroll the background at var speed            // the yPos is a negative value because we're scrolling it UP!                                          var yPos = -($window.scrollTop() / $bgobj.data('speed'));             // Put together our final background position            var coords = '50% ' + yPos + 'px';             // Move the background            $bgobj.css({                backgroundPosition: coords;            });        }); // window scroll Ends    });});

5. for more information about tutorials, plug-ins, and content, see resource lazy materials: How to build a parallax rolling website HTML5 Alloy Team's Parallax rolling Love Story RIA Coder's Edge Animate 10 minutes and zero code implement HTML5 PARALLAX rolling effect "codrops" parallax slider with jquery "16 best jQuery PARALLAX rolling effect tutorial"
Let the web page dance! 25 free parallax rolling plug-ins W3Cplus 10 excellent parallax rolling plug-ins
Another article in this blog titled "30 + beautiful parallax scroll Webpage Design appreciation" W3Cfun "23 parallax scroll plug-ins that bring you a perfect experience": "18 Jia makes rolling technology better on the floor the website is complete! Thank you for reading this article. I hope it will help you a little! ---------------------------------------------------------------

Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------