Menu
I've done a bit of research and written a simple bit of jQuery that scrolls the background at a slightly different pace to the foreground, creating a parallaxing effect as you scroll down a website.
Unfortunately it's a bit jerky.
Here's the basic layout of the HMTL:
<body>
<section>
Site content goes here.
</section>
</body>
Here's the CSS:
body {
background-image: url('../images/bg.png');
background-repeat: repeat-y;
background-position: 50% 0;
}
Here's the JS:
$(window).scroll(function () {
$("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
});
https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/
Pretty simple, but my problem is that it's a bit jerky when you scroll, even on a powerful computer.
Is there a way to make the background parallax animate smoothly?
354
Parallax scrolling is a web design technique in which the website background moves at a slower pace than the foreground. This results in a 3D effect as visitors scroll down the site, adding a sense of depth and creating a more immersive browsing experience. Parallax is based on optical illusion.
Parallax scrolling is a computer graphics technique used by web designers to create a faux-3D effect. As users scroll down a webpage, different layers of content or backgrounds move at different speeds, and this creates an optical illusion.
To make a Parallax effect, select the interaction to "after delay" and for the animation, choose "smart animate". Then play with the duration and delay as you want.
Parallax is an effect that creates the appearance of depth and dimension by moving two elements at different rates when scrolling through a web page or slide.
Add transition property to your CSS so it can be accelerated by the GPU like this:
body {
background-image: url('../images/bg.png');
background-repeat: repeat-y;
background-position: 50% 0;
transition: 0s linear;
transition-property: background-position;
}
Try animating a property that can be hardware accelerated in browsers that support it. Rather than changing the background-position property, use an absolutely positioned img and then change its position using CSS transforms.
Take a look at stellar.js. That plugin gives you the option of animating using CSS transforms in capable browsers (stellar.js will let you animate background images, with the caveat that it won't work as smoothly on mobile devices). It also makes use of requestAnimationFrame, meaning less CPU, GPU, and memory usage.
If you deem a plugin overkill, you can at least check out the approach taken and adapt it to your needs.
24
Set the css of the body as below:
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
}
Then using Javascript just get the pageYOffset on page scrolling, and set it to background position of the body background image as below:
window.addEventListener('scroll', doParallax);
function doParallax(){
var positionY = window.pageYOffset/2;
document.body.style.backgroundPosition = "0 -" + positionY + "px";
}
Just checkout my post here: http://learnjavascripteasily.blogspot.in/
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
