I have created an own function to parallax a div with the css transform translate manipulation. The parallax itselfs works very well, but if you scroll and the parallax container come to the top of the screen, the transform manipulation stops at 0 +/- 2 and doesn’t count anymore.
The optical effect is, that the parallax container stops at the top of the browser.
But! If i take a look in the console, and i dump this value, which i set in the function, the value continues the count, such i expect. But the browser stop to set it in the transform translate manipulation.
I use jQuery/Javascript and css.
Javascript:
As note:
I use https://github.com/moagrius/isOnScreen for the “isonScreen” function.
//Scroll Event Handler:
$(document).scroll(function(){
var st = $(this).scrollTop();
$('.parallexcontainer').each(function(){
if($(this).isOnScreen()) {
s = $(this).offset().top-st;
parallax_slider('.parallexcontainer .ce_image',s,4,0);
}
});
});
//parallax function
function parallax_slider(e,s,m,d) {
//element|scrollpos|speee|direction
de = "";
if(d != 1) {
de = "-";
}
var pos_neu = s/m;
console.log("pos neu: "+pos_neu);
$(e).css("transform", 'translate(0px,' + de + '' + pos_neu + 'px)');
}
The CSS Element:
<div class="parallexcontainer">
<div class="ce_image">
<img src="image" alt="image">
</div>
</div>
CSS Code:
.parallexcontainer {
width: 100%;
height:900px;
}
.parallexcontainer img {
width:100%;
height:auto;
}
Here is an example of the result of the manipulated div in the developer tools, if the parallax container position is smaller then 0. This value is always different, it’s between +2 and – 2.
enter image description here
And here is the output of the console if, the parallax container position is smaller the 0.
enter image description here
I think my calculation is right. But the browser doesn’t set the correct value if we under 0 of the parallax position to the top of the browser.
But why.
I hope i could explain the problem as well as possible.
I have tried different ways, but it doesn’t work.
I hope someone can help me.
Very thank you!
Lorello is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.