Question

我想为jQuery自定义滚动条插件（mCustomScrollbar）添加视差效果（不同的滚动速度）。我结合了两个代码示例：

http://codepen.io/JTParrett/pen/BkDie - 不同的滚动速度
manos.malihu.gr/tuts/custom-scrollbar-plugin/full_page_demo.html - 整页卷轴

另请参阅 - http://manos.malihu.gr/jquery-custom-content-scroller/（插件回调/函数）

我设法让两个例子分开工作，但不是在一起，我最终得到了这个：

j(window).load(function(){

j("body").mCustomScrollbar({
scrollButtons:{
enable:true
},

callbacks:{

onScrollStart:function(){ myCallback(this,"#onScrollStart") },

onScroll:function(){ 

  var boxes = j('[data-scroll-speed]'),
      jwindow = this.mcs.content;

  var scrollTop = this.mcs.top;

      boxes.each(function(){
      var jthis = j(this),
      scrollspeed = parseInt(jthis.data('scroll-speed')),
      val = - scrollTop / scrollspeed;
      jthis.css('transform', 'translateY(' + val + 'px)');
      });

                },

        whileScrolling:function(){

                    },
alwaysTriggerOffsets:false
 }

});

});

元素html是：

img src="http://www.somedomain.com.au/wp-content/uploads/2015/06/first-bg.png" alt="first-bg" width="800" height="582" class="aligncenter size-full wp-image-678 para" data-scroll-speed="7" />

/ *注意数据 - 滚动速度=＆＃34; 7＆＃34; - 这个img元素需要有不同的滚动速度* /

任何帮助都将不胜感激。

谢谢！

jQuery m自定义滚动条视差

0 个答案: