Stellar.js for parallax scrolling is deleyed

Question

I am using the plugin stellar.js to create a parrallax effect... Esentially I want a simple background scroll slower than the rest of the site like www.OmarHabash.com.

I think everything is set up correctly this is the site that I am working on.... The first three spotlight divs are scrolling slower than but it seems to gradually speed up... It is not supposed to do that.

This is the init that I am using

$(window).stellar();

and this is one of three divs that I am using the script on.

<div class="home-100-2" data-stellar-background-ratio="1.1" style="background: url('<?php the_field('sl-image-2') ?>')fixed;">

if you look at the site you will see the problem. http://dfwima.4mf.co/

Answer 1

You have some CSS transition styling applied to .home-100-1, .home-100-2, .home-100-3. Try to remove them:

  .home-100-1, .home-100-2, .home-100-3 {
    height: 320px;
    background: #000;
    border-bottom: 10px solid #000;
    width: 100%;
    /* transition: all .6s; */
    /*-moz-transition: all .6s;*/
    /* -webkit-transition: all .6s; */
    /* -o-transition: all .6s; */
    background-size: 100% auto !important;
  }