Home > Developer > JavaScript
How to create a parallax effect of the site, in this article we will introduce you to create parallax effect through JavaScript, without using any third-party libraries such as jquery, in the production of parallax effect, the different elements of the Web page to move at different speeds, generally speaking, Objects farther away from the user move at slower speeds than objects near them, and vice versa.
How to create a Web site for parallax effects
Animation
Just like any animation, you change some action based on something else, like time. In this case, however, you are on a page that is part of your site relative to the observer location.
The speed of the animation controls how fast visitors scroll down the page. This means that viewers can control how fast the animation actually is. If the guest scrolls are really fast, the animation will progress really fast. If the guest rolls slowly, the animation will progress slowly.
This will create an animated visitor to decide how to move quickly. When you quickly move through the pages of a book, it looks like a moving image. Different videos for your users to decide how to adjust the time progress.
Parallax is often used to make the background move more slowly than other pages, and it can also be used to move objects faster. This will make them look like they are close to our users.
Simple Parallax Tutorial
We will create a very simple parallax site. This will make the background slower than the other pages as you scroll down.
Click here to view live Parallax Demo.
JavaScript code
We're going to put this JavaScript code together, one piece at a time:
var topdiv = document.getElementById ("Topdiv");
var speed = 1.5;
Window.onscroll = function () {
var yoffset = Window.pageyoffset;
TopDiv.style.backgroundPosition = "0px" + (yoffset/speed) + "px";
}
For parallax work, we need to adjust the top of the background element. In this case, it is contained in the same div as the id:topdiv, stored in a variable named Topdiv. The position of the background adjusts by changing the elements of the backgroundposition:
var topdiv = document.getElementById ("Topdiv");
TopDiv.style.backgroundPosition =
We will set it to x position 0; We do not do any parallax scrolling.
var topdiv = document.getElementById ("Topdiv");
TopDiv.style.backgroundPosition = "0px"
We will have to specify a small portion of our "topdiv" div and how far we scroll down the page. We can use Window.pageyoffset. We store it in a variable to make yoffset.
var yoffset = Window.pageyoffset;
We also need to know how slow we want our background to move. We will divide the yoffset our speed. We will use the value 1.5.
var speed = 1.5;
Before we go on, your code should look like this:
var topdiv = document.getElementById ("Topdiv");
var speed = 1.5;
var yoffset = Window.pageyoffset;
TopDiv.style.backgroundPosition = "0px"
We will now end setting the Y position of the background to make yoffset/speed.
var topdiv = document.getElementById ("Topdiv");
var speed = 1.5;
var yoffset = Window.pageyoffset;
TopDiv.style.backgroundPosition = "0px" + (yoffset/speed) + "px";
Finally, we want this code to run every time the page scrolls. So we're going to turn it into a window.onscroll = function () feature.
var topdiv = document.getElementById ("Topdiv");
var speed = 1.5;
Window.onscroll = function () {
var yoffset = Window.pageyoffset;
TopDiv.style.backgroundPosition = "0px" + (yoffset/speed) + "px";
}
HTML code
This is our basic HTML. We will change the background topdiv elements.
<! DOCTYPE html>
<body>
<div id= "Topdiv" >
<div>
</div>
</div>
</body>
Add CSS to HTML
Next, we'll add some basic styling. Specify the image that we will use as background in this case img1.jpg. Change whatever image you want at your whim. We will make the height of our div element 1500px, but you can make it as high as you think.
<body onload= "Startparallax ()" style= "width:100%; margin:0; padding:0; " >
<div id= "Topdiv" style= "height:1500px; Background:url (' parallaxdemobackgroundimage.jpg ') no-repeat; >
<div style= "Position:absolute; width:40%; margin-left:30%; top:70%; Text-align:center; Padding:1em 0; Background:rgba (255, 255, 255, 0.8); border:1px Solid Rgba (16, 16, 16, 0.7); Border-radius:1em; box-shadow:3px 3px 4px Rgba (64, 64, 64, 0.3); " >
</div>
</div>
add JavaScript
Next, we need to add JavaScript. This is the same script we created earlier.
<script>
var topdiv = document.getElementById ("Topdiv");
var speed = 1.5;
Window.onscroll = function ()
{
var yoffset = Window.pageyoffset;
TopDiv.style.backgroundPosition = "0px" + (yoffset/speed) + "px";
}
</script>
</body>
the final code
The complete code should look like the following
<body style= "width:100%; margin:0; padding:0; " >
<div id= "Topdiv" style= "height:1500px; Background:url (' parallaxdemobackgroundimage.jpg ') no-repeat; >
<div style= "Position:absolute; width:40%; margin-left:30%; top:70%; Text-align:center; Padding:1em 0; Background:rgba (255, 255, 255, 0.8); border:1px Solid Rgba (16, 16, 16, 0.7); Border-radius:1em; box-shadow:3px 3px 4px Rgba (64, 64, 64, 0.3); " >
</div>
</div>
<script>
var topdiv = document.getElementById ("Topdiv");
var speed = 1.5;
Window.onscroll = function ()
{
var yoffset = Window.pageyoffset;
TopDiv.style.backgroundPosition = "0px" + (yoffset/speed) + "px";
}
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
