Ползунок с вертикальным эффектом параллакса

Question

Я создал простой слайдер для моего клиента, чтобы иметь возможность обновлять с помощью Flexslider, а в другом месте на их сайте у них есть эффект параллакса с вертикальной прокруткой. Теперь они хотят слайдер с вертикальной прокруткой эффекта параллакса ...

Here's an example of the desired effect

Для моего эффекта параллакса я использовал Parallax.js, который был большим, когда я нужен только одно изображение, чтобы иметь эффект, но не так много использования в настоящее время Мне нужен ползунок, чтобы он был.

В приведенном выше примере используется Avia Slider, но эффект параллакса, как представляется, выполняется чем-то другим (поскольку у Avia нет такого эффекта, который я вижу).

Как создать простой эффект параллакса для существующего слайдера Flexslider (или любого другого слайдера)? Похоже, что это должен быть простой эффект, который не обязательно должен иметь плагин jQuery.

Answer 1

Вот как я ее решил:

Я добавил transform: translate3d(0,0,0) к элементу слайдера, а затем модифицировать его как прокрутке вниз (например transform: translate3d(0,10px,0).). Простой, чистый раствор:

$(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)'); 
    } 
}); 

Answer 2

Один из способов - просто поместить элемент в абсолютный. Эффективное расстояние, которое должен иметь эффект параллакса, должно быть в области overflow: hidden. Это означает, что если вы хотите полностью фиксированный фон, ширина этого изображения должна быть width: 100vw.

Тогда все, что вам нужно сделать, это запустить событие прокрутки и преобразовать изображение с помощью translateX() или изменить положение background-image и умножить значение на фактическую скорость. Поскольку событие прокрутки запускается очень часто, и браузер не будет переигрывать каждый раз, когда вы можете использовать requestAnimationFrame().

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

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

Здесь немного прототипа, поэтому у вас есть идея.

$(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>