markdalgleish / stellar.js

Stellar.js - Parallax scrolling made easy
http://markdalgleish.com/projects/stellar.js/
MIT License
4.64k stars 1.33k forks source link

On page reload background-position gets wrong #60

Open camspy opened 11 years ago

camspy commented 11 years ago

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?

ProVega commented 10 years ago

I am having the same issue - any fix or progress on this?

aftabmj commented 10 years ago

Me too.

gosteev commented 9 years ago
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