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