0
\$\begingroup\$

I'm working on a website and am trying to implement a parallax effect on an image and title (possibly other elements too).

I'm trigering the effect with .scroll() and updating the transform property with .css("transform","translate3d(0,x,0)").

It works fine but on some pages with a lot of elements the frame rate drops and the effect becomes jittery. Especialy on the title as the translate3d() doesn't seem to update at the same rate as the page scrolls.

My main aim is to optimize this effect with a higher frame rate.

The code is here and I also made a pen to test it out here

$( document ).ready(function() {
var $window = $(window);
function scroll_elements(){
  var scroll = $window.scrollTop();
  var scrollLayer1 = scroll/1.4;
  var scrollLayer2 = scroll/1.2;
  
  $(".layer1").css(
    "-webkit-transform","translate3d(0," +  scrollLayer1  + "px,0)",
            "transform","translate3d(0," +  scrollLayer1  + "px,0)"
  );
  $(".layer2").css(
    "-webkit-transform","translate3d(0," +  scrollLayer2  + "px,0)",
            "transform","translate3d(0," +  scrollLayer2  + "px,0)"
  );
}

$window.scroll(scroll_elements);
});
*{margin:0;padding:0;}
body{background:#000;}
.bg{position:relative;z-index:1;}
.bg img{
  display:block;
  width:100%; height:auto;
}
.bg h1{
  position:absolute;
  top:33%;left:0;
  width:100%;
  font-size:100px;
  text-align:center;
}
.cont{
  position:relative;
  z-index:2;
  background:rgba(0,0,0,0.9);
  font-size:27px;
  color:#fff;
  padding:5%;
}
.cont *{
  max-width:900px;
  margin:5% auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <div class="bg">
    <img class="layer2" src="https://hdwallpapersforandroid.files.wordpress.com/2013/11/windows-nature-android-landscape-hd-city-109835.jpg" alt="" />
    <h1 class="layer1">Lorem Ipsum</h1>
  </div>
  <div class="cont">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et purus porta, porta dolor vel, pulvinar turpis. Suspendisse aliquam placerat turpis, sed ullamcorper nisl vestibulum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod tempor elit a pulvinar. Integer vehicula purus ipsum, id ultricies risus placerat sit amet. Cras vel ante egestas diam egestas sagittis. Mauris facilisis, dolor pulvinar tempus vestibulum, elit lectus gravida sem, sed volutpat dui dolor vel purus. Praesent nec ligula ac mi faucibus hendrerit vitae sed felis. Nullam vehicula magna vitae ultrices dapibus. Pellentesque facilisis dui a diam scelerisque pharetra. Vestibulum dapibus imperdiet molestie. Fusce fringilla facilisis metus, in iaculis lectus fermentum eget. Ut tortor quam, imperdiet sit amet nisi in, fringilla porta sapien. Aenean a enim vestibulum, bibendum dolor sed, consequat mi.</p>
    <p>Fusce faucibus nulla id iaculis sagittis. Duis ac arcu a ex elementum feugiat. Proin ut quam quis tortor vulputate semper a id nunc. Morbi rhoncus ultricies ultricies. Praesent semper id massa sed euismod. Fusce sagittis felis nec libero malesuada, in luctus enim aliquam. Aliquam sagittis, orci eget blandit vestibulum, mi dui blandit mauris, et tincidunt tellus nisi sagittis lacus. Sed dignissim, sapien vitae cursus imperdiet, augue massa tempor ex, non finibus risus metus ac enim. Mauris blandit eros nisi.</p>
    <p>Sed bibendum ante ac metus hendrerit, nec commodo tortor venenatis. Pellentesque porta eros non eros cursus, vitae commodo sapien facilisis. Praesent sit amet volutpat lacus. Nullam sed quam ac dolor blandit lacinia. Ut euismod turpis sit amet libero pulvinar, non aliquet lacus bibendum. Nullam libero massa, facilisis sed neque id, porta fringilla eros. Curabitur vestibulum nisi nec tempor tempor. Sed fermentum mauris diam, eu volutpat magna tempus et. Ut semper dapibus purus eget ullamcorper. Aenean varius rutrum purus id congue. Mauris sit amet turpis ornare, pharetra ex et, porta lorem. In hac habitasse platea dictumst.</p>
    <p>Nulla sed pellentesque nibh, eu consectetur neque. Curabitur eu risus at felis sagittis blandit. Nunc non massa non massa mattis semper. Curabitur dapibus tortor velit, id tincidunt ligula rutrum sed. Quisque feugiat consequat molestie. Curabitur lobortis neque ac porta imperdiet. Sed malesuada nibh sit amet magna commodo, sed bibendum turpis vestibulum. Suspendisse vel rutrum dolor, sed bibendum turpis. Morbi condimentum fermentum urna id venenatis.</p>
  </div>
</div>

\$\endgroup\$
  • \$\begingroup\$ Perhaps using WebGL could be a good idea. The learning curve is steep, but since it takes advantage of the user's graphic card, there's a lot of room for growth. \$\endgroup\$ – Joshua Dawson Dec 20 '16 at 6:21
1
\$\begingroup\$

It's already very good and unfortunately this cannot be optimized any further. The only gains would be to ditch the jquery dependency and directly do the manipulations in pure javascript. BUt this will probably not gain you anything noticable.

Parallax scrolling is very demanding. The only viable alternative approach is to go without javascript and create a 3d-scene, that natively produces the parallax effect, like this: http://keithclark.co.uk/articles/pure-css-parallax-websites/

\$\endgroup\$
  • \$\begingroup\$ thx for the review. I'm still hesitating with the CSS only approach. I had made a pen some time ago but I don't find it very easy to use and browser support is lower. \$\endgroup\$ – web-tiki Dec 19 '16 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.