Open camspy opened 11 years ago
I am having the same issue - any fix or progress on this?
Me too.
var fakeListenerParallax;
fakeListenerParallax = setInterval((function() {
$('[data-stellar-background-ratio]').each(function() {
var ofs;
ofs = $(this).offset().top * $(this).data("stellar-background-ratio");
ofs = -ofs;
ofs = ofs + $(window).scrollTop() * 0.5;
$(this).css("background-position", "0px " + ofs + "px");
});
}), 15);
setTimeout((function() {
clearInterval(fakeListenerParallax);
}), 200);
this goes to $(window).load(). you can play with interval value to find lowest one for your website
I am using Stellar.js v0.6.2 jQuery plugin to display 6 background images with parallax effect.
Everything works fine on first load of the page, but if I reload/refresh it, I see that the background-position settings are wrong and the parallax effects are ruined.
This is Stellar.js settings that I use:
scrollProperty: 'scroll', positionProperty: 'position', horizontalScrolling: false, verticalScrolling: true, horizontalOffset: 0, verticalOffset: 0, responsive: true, parallaxBackgrounds: true, parallaxElements: true, hideDistantElements: true,
This is what I have in HTML source, as an example: ...section class="visible" id="contact" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20"...
This is how correct background position looks when page is opened for a first time: ...section class="visible" id="contact" data-stellar-vertical-offset="20" data-stellar-background-ratio="0.6" style="background-position: 30px 82.4701px;"...
This is how it looks when I refresh the page (the same position of the section in the window) as before: ...section class="visible" id="contact" data-stellar-vertical-offset="20" data-stellar-background-ratio="0.6" style="background-position: 30px -305.2px;"...
As you see, the negative value -305.2px is what ruins the parallax.
I cannot sleep without finding what causes that. Can you help me?