Create a parallax scrolling effect using jQuery and CSS
Recently, sites with a parallax scrolling effect began to appear everywhere. I didn’t want to skip this, so I created a demo page with parallax scrolling effect using jQuery and CSS.
Even if you are not familiar with the term "parallax scrolling" , you are probably familiar with the technique. Parallax scrolling is a 2D animation process that creates the illusion of depth. Animation of the front layers is faster than background animation. When you watch a moving car, it seems to you that the objects located in front of the car move faster than the objects located behind the car. Parallax scrolling uses the same principle to make the viewer think that he is watching the 3D scene.
My demo page shows one of the ways to create a vertical parallax scrolling effect.
')
Watch the demo
Download source
You can scroll in the usual way, use the navigation menu on the right side of the page or the next / previous buttons that appear under each article.
The page contains four, independently animated layers, to create the illusion of depth.
In Safari, scrolling is smooth (at least on my computer), but the demo should work in any modern browser.
Disclaimer 1: Since this is only an experiment, I did not optimize the demo to work on mobile devices.
Disclaimer 2: The navigation menu that is used in the demo is overseen on the Nike Better World website. If you plan to use similar navigation on your site, keep in mind its origin.
The articles and the background layer are assigned a fixed position using CSS, and the z-index property is also assigned to them so that new layers appear above the background layer. Four layers are used: small clouds, large clouds, balloon / landscape image, layer with articles.
Each layer has absolute positioning. This was the most difficult part of the whole process, since the elements should be positioned so that when scrolling to any of the four articles, the article is equally aligned with the browser window. In this case, this was achieved by trial and error.
Just a few lines of code using jQuery is needed to create a parallax scrolling effect. I was surprised how simple it is.
The foreground layer is always aligned at the top of the document, while the movement of the other layers is adjusted depending on their depth.
The lower the layer, the slower it moves.
The rest of the jQuery code is used to control the navigation. When the user presses the navigation button, the page scrolls to the corresponding article. If the user has javascript disabled, the anchors used on the links come into play. They still allow you to navigate the page, but without animation.
I am sure that there are many other ways to create a parallax scrolling effect, and I hope my experience will serve as a starting point for exploring this method.
What is “parallax”?
Even if you are not familiar with the term "parallax scrolling" , you are probably familiar with the technique. Parallax scrolling is a 2D animation process that creates the illusion of depth. Animation of the front layers is faster than background animation. When you watch a moving car, it seems to you that the objects located in front of the car move faster than the objects located behind the car. Parallax scrolling uses the same principle to make the viewer think that he is watching the 3D scene.
Demo and Download
My demo page shows one of the ways to create a vertical parallax scrolling effect.
')
Watch the demo
Download source
You can scroll in the usual way, use the navigation menu on the right side of the page or the next / previous buttons that appear under each article.
The page contains four, independently animated layers, to create the illusion of depth.
In Safari, scrolling is smooth (at least on my computer), but the demo should work in any modern browser.
Disclaimer 1: Since this is only an experiment, I did not optimize the demo to work on mobile devices.
Disclaimer 2: The navigation menu that is used in the demo is overseen on the Nike Better World website. If you plan to use similar navigation on your site, keep in mind its origin.
How it works
The articles and the background layer are assigned a fixed position using CSS, and the z-index property is also assigned to them so that new layers appear above the background layer. Four layers are used: small clouds, large clouds, balloon / landscape image, layer with articles.
/* ( / ) */ #parallax-bg3 { z-index: 3; position: fixed; left: 50%; /* */ top: 0; width: 940px; margin-left: -470px; /* */ } Each layer has absolute positioning. This was the most difficult part of the whole process, since the elements should be positioned so that when scrolling to any of the four articles, the article is equally aligned with the browser window. In this case, this was achieved by trial and error.
#bg3-1 { position: absolute; top: -111px; left: 355px; } #bg3-2 { position: absolute; top: 812px; left: 321px; } /* … */ Just a few lines of code using jQuery is needed to create a parallax scrolling effect. I was surprised how simple it is.
$(window).bind('scroll',function(e){ parallaxScroll(); }); function parallaxScroll(){ var scrolled = $(window).scrollTop(); $('#parallax-bg1').css('top',(0-(scrolled*.25))+'px'); $('#parallax-bg2').css('top',(0-(scrolled*.5))+'px'); $('#parallax-bg3').css('top',(0-(scrolled*.75))+'px'); } The foreground layer is always aligned at the top of the document, while the movement of the other layers is adjusted depending on their depth.
The lower the layer, the slower it moves.
The rest of the jQuery code is used to control the navigation. When the user presses the navigation button, the page scrolls to the corresponding article. If the user has javascript disabled, the anchors used on the links come into play. They still allow you to navigate the page, but without animation.
Next steps
I am sure that there are many other ways to create a parallax scrolling effect, and I hope my experience will serve as a starting point for exploring this method.
Source: https://habr.com/ru/post/142137/
All Articles