0

jQuery カスタム スクロール バー プラグイン (mCustomScrollbar) に視差効果 (異なるスクロール速度) を追加したいと考えました。コードの 2 つの例を組み合わせています。

  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