I am trying to implement the parallax effect myself. Yes, I understand that there are ready-made solutions, but for the sake of self-development I decided to write this thing from scratch and on the “bare” js (without jq). So, I ran into the problem that the "layers" that I process through js twitch, and only when scrolling with the wheel. When scrolling manually, everything is OK. I update the layers as follows:

window.onscroll = function () { requestAnimFrame(scrollCalc); } scrollCalc = function() { for (var i = 0; i < parallaxes.length; i++) { var offset = (parallaxParents[i].getBoundingClientRect().top) * (-1) * parallaxes[i].magnitude; parallaxes[i].style.transform = "translate3d(0, " + offset + "px, 0)"; } } requestAnimFrame = ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); } );

parallaxParents stores parent dom elements of parallax layers, and parallaxes actually contains these layers.

PS: pulls on chrome, and noticed microfreezes in firefox. I believe that the root cause of these two nuances may lie in the same problem.

  • I had a similar problem when I was doing a flashlight effect. Lying terribly in chrome, podlagivalo in mozilla, and, oddly enough, flew on IE - P. Ilyin

1 answer 1

I asked myself, I decided it myself =) I wrote the solution in English stack overflow.

Smooth parallax effect