垂直視差効果を持つスライダ

Question

Flexsliderを使用してクライアントを更新できる簡単なスライダを作成しました。サイトの他の場所には垂直スクロールの視差効果があります。今、彼らは私が唯一の効果を持つように単一の画像を必要なときに偉大だった私はParallax.jsを使用し、私の視差効果のために垂直方向のスクロール視差効果を持つスライダー...

Here's an example of the desired effect

を、したいが、今はあまり使用スライダが必要です。

上記の例では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

1つの方法は、要素絶対を置くことです。視差効果が生じるべき有効距離は、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>