Question

当用户使用光滑的旋转木马向左/向右滑动时，我尝试创建一个定制的视差。

虽然需要进一步增强它，以便看不见的图像重置。

$(this).find(".parallaxback img:visible").animate({
   left: increment+"=15"
}, 700, function() {
   // Animation complete.
});

尝试使用：visible选择器，但我觉得它没有效果。

你如何稳定这个旋转木马，使元素不浮动关闭。重置看不见的项目，以便他们能够保持正确的轨道？
此外 - 有没有办法在幻灯片中移动项目？

http://jsfiddle.net/ayve1nmf/25/

Answer 1

这是一个与运动相反的视差动画的例子。虽然我不确定如何在拖动/滑动过程中设置视差 - 而不是在完成滑动之后/之前设置视差。

http://jsfiddle.net/ayve1nmf/27/

var parallaxAnimate = function(el, currentSlide, nextSlide){
    console.log("parallax animate");

    var increment = "+";

     if (currentSlide > nextSlide) {
         increment = "-";
     }

     $(el).find(".parallaxback img:visible").animate({
         left: increment + "=15"
     }, 400, function () {
         // Animation complete.
     });       
};


 // On before slide change
 $('.data').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    console.log("beforeChange");
     //console.log(nextSlide);
     parallaxAnimate(this, currentSlide, nextSlide);
 });

带有视差元素的光滑轮播

1 个答案: