用于视差滚动的Stellar.js已被弃用

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;
  }