diegoversiani / smooth-parallax Goto Github PK

Hi Diego!

Love the plugin. It has what other parallax plugin don't have - smooth transitions on scroll end.

Like those clouds in the demo: https://diegoversiani.me/smooth-parallax/

Unfortunately this one specific feature doesn't work in Firefox (Quantum) and also breaks the element movement entirely.

It works on Chrome, Edge, IE 11 and Safari, though - so that's nice.

I am trying to use Smooth Parallax with a background image on Blogger/BlogSpot. However, I cannot get the image to start at the top of the page when scrolled all the way to the top; the background image always jumps down a little bit after the page loads.

I tried modifying start-position-y to "0" and a negative quantity, but it made no difference. Maybe my container is the problem? I think it would be helpful to allow negative values for start-position-y if you don't already (but it looks like you already do, based on your hippie van example).

JS:

    <script type="text/javascript" src="https://wad11656.github.io/smooth-parallax.min.js"></script>
    <script type="text/javascript">
      window.addEventListener("load", function () {
        SmoothParallax.init();
      });
    </script>

HTML Body:
<img class="parallax_bg" src="https://drive.google.com/uc?id=1EHze1D1aTRvMiEWLNhUT7vwYVvJ1Ahxv" container=".content-outer" smooth-parallax="" start-movement="0.09" end-position-y="2.5"></img>

CSS:

.parallax_bg {
  width: 100%;
  z-index: 0;
  position:absolute;
}

HTML structure:

...
<div class="site-offset">
    <a href="#" id="k-flux" smooth-parallax="" container=".site-offset" start-movement="0.05">FLUX</a>
    <div id="content" class="content">
    ...
    </div>
</div>
...

Init as required:

<script type="text/javascript">
  window.addEventListener("load", function () {
    SmoothParallax.init();
  });
</script>

If well understood the point, #k-flux should move within ".site-offset". No error, warning or whatsoever. It just doesn't work.