[chuck-le-butt]

I’ve created a simple slider for my client to be able to update using Flexslider, and elsewhere on their site they have a vertical scrolling parallax effect. Now they want a slider with vertical scrolling parallax effects…

Here’s an example of the desired effect

For my parallax effect I used Parallax.js, which was great when I only needed a single image to have the effect, but not much use now I need the slider to have it.

The above example uses Avia Slider, but the parallax effect appears to be done by something else (as Avia doesn’t have any such effect that I can see).

How can I create a simple parallax effect for my existing Flexslider slider (or any other slider)? It seems like it should be a simple effect that doesn’t necessarily need a jQuery plugin.

[oshell]

One way would be to just place the element absolute. The effective distance the parallax effect should take place has to be in the overflow: hidden area. Which means, if you want a completely fixed background the width of this picture has to be width: 100vw.

Then all you have to do is trigger a scroll event and transform your picture using translateX() or by changing the position of the background-image and multiply the value with the actual speed.
Since the scroll event triggers really often and the browser won’t rerender every time you could use requestAnimationFrame().

var translate = function() {
    $('#object').css('transform','translateX('+($(window).scrollTop()*.4)+'px)');
}

$(window).on('scroll', function() {
   window.requestAnimationFrame(translate);
});

Here a little prototype, so you have a better idea.

$(document).on('ready', function(){
  var $outerWrapper = $('#outerWrapper');
  var $innerWrapper = $('#innerWrapper');
  var $innerWrapperWidth = $innerWrapper.outerWidth();
  var $slides = $('.slide');
  var slideWidth = $slides.eq(0).outerWidth();
  var effective = slideWidth * 0.5;

  $outerWrapper.on('scroll', function(e){
    for (var i = 0; i < $slides.length; i++) {
      $element = $slides.eq(i);
      var s = $element.offset().left;
      if (s < slideWidth && s > 0) {
        var percent = s/slideWidth;
        var translate = effective * percent;
        if ($element.hasClass('parallax')){
          $element.css('background-position', '-' + translate +'px 0');
        }
      }
    }
   
  });
});

.slide{
  width: 298px;
  height: 148px;
  background-color: #dadada;
  border: 1px solid #ccc;
  float: left;
  background-image: url('http://www.technocrazed.com/wp-content/uploads/2015/12/Landscape-wallpaper-7.jpg');
  background-size: 100%;
}

.slide.parallax{
  background-size: 150%;
}

#innerWrapper{
  width: 1500px;
  height: 150px;
}

#outerWrapper{
  width: 300px;
  height: 150px;
  overflow-x: scroll;
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerWrapper">
  <div id="innerWrapper">
    <div class="slide"></div>
    <div class="slide parallax"></div>
    <div class="slide"></div>
    <div class="slide parallax"></div>
    <div class="slide"></div>
  </div>
</div>

[chuck-le-butt]

Here’s how I solved it:

I added transform: translate3d(0,0,0) to the slider element, and then modified it as the user scrolls down (eg. transform: translate3d(0,10px,0)). A simple, clean solution:

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {

        var parallaxDistance = ($(window).scrollTop()/2), 
            parallaxCSS = "translate3d(0, "+ parallaxDistance +"px , 0)";

        $('.slides').css('transform', parallaxCSS);

    } else {

        $('.slides').css('transform', 'translate3d(0, 0, 0)');
    }
});

[Author]

Posts