jQuery m custom scrollbar parallax -
i wanted add parallax effect (different scroll speed) jquery custom scroll bar plugin (mcustomscrollbar). i'm combining 2 examples of code:
- http://codepen.io/jtparrett/pen/bkdie - different scrolling speeds
- manos.malihu.gr/tuts/custom-scrollbar-plugin/full_page_demo.html - full page scroller
see - http://manos.malihu.gr/jquery-custom-content-scroller/ (plugin callbacks / functions)
i have managed make both examples work separately, not together, have end this:
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 } }); });
elements html is:
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" />
/* note data-scroll-speed="7" - img element needs have different scroll speed */
any appreciated.
thank you!
Comments
Post a Comment