0

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

  1. http://codepen.io/JTParrett/pen/BkDie - 不同的滚动速度
  2. 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" />

/* 注意 data-scroll-speed="7" - 这个 img 元素需要有不同的滚动速度 */

任何帮助，将不胜感激。

谢谢！

4

0 回答 0