revolution.extension.parallax.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  1. /********************************************
  2. * REVOLUTION 5.4.5 EXTENSION - PARALLAX
  3. * @version: 2.2.3 (17.05.2017)
  4. * @requires jquery.themepunch.revolution.js
  5. * @author ThemePunch
  6. *********************************************/
  7. (function($) {
  8. "use strict";
  9. var _R = jQuery.fn.revolution,
  10. _ISM = _R.is_mobile(),
  11. extension = { alias:"Parallax Min JS",
  12. name:"revolution.extensions.parallax.min.js",
  13. min_core: "5.4.5",
  14. version:"2.2.3"
  15. };
  16. jQuery.extend(true,_R, {
  17. checkForParallax : function(container,opt) {
  18. if (_R.compare_version(extension).check==="stop") return false;
  19. var _ = opt.parallax;
  20. if (_.done) return;
  21. _.done = true;
  22. if (_ISM && _.disable_onmobile=="on") return false;
  23. if (_.type=="3D" || _.type=="3d") {
  24. punchgs.TweenLite.set(opt.c,{overflow:_.ddd_overflow});
  25. punchgs.TweenLite.set(opt.ul,{overflow:_.ddd_overflow});
  26. if (opt.sliderType!="carousel" && _.ddd_shadow=="on") {
  27. opt.c.prepend('<div class="dddwrappershadow"></div>')
  28. punchgs.TweenLite.set(opt.c.find('.dddwrappershadow'),{force3D:"auto",transformPerspective:1600,transformOrigin:"50% 50%", width:"100%",height:"100%",position:"absolute",top:0,left:0,zIndex:0});
  29. }
  30. }
  31. function setDDDInContainer(li) {
  32. if (_.type=="3D" || _.type=="3d") {
  33. li.find('.slotholder').wrapAll('<div class="dddwrapper" style="width:100%;height:100%;position:absolute;top:0px;left:0px;overflow:hidden"></div>');
  34. li.find('.tp-parallax-wrap').wrapAll('<div class="dddwrapper-layer" style="width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:5;overflow:'+_.ddd_layer_overflow+';"></div>');
  35. // MOVE THE REMOVED 3D LAYERS OUT OF THE PARALLAX GROUP
  36. li.find('.rs-parallaxlevel-tobggroup').closest('.tp-parallax-wrap').wrapAll('<div class="dddwrapper-layertobggroup" style="position:absolute;top:0px;left:0px;z-index:50;width:100%;height:100%"></div>');
  37. var dddw = li.find('.dddwrapper'),
  38. dddwl = li.find('.dddwrapper-layer'),
  39. dddwlbg = li.find('.dddwrapper-layertobggroup');
  40. dddwlbg.appendTo(dddw);
  41. if (opt.sliderType=="carousel") {
  42. if (_.ddd_shadow=="on") dddw.addClass("dddwrappershadow");
  43. punchgs.TweenLite.set(dddw,{borderRadius:opt.carousel.border_radius});
  44. }
  45. punchgs.TweenLite.set(li,{overflow:"visible",transformStyle:"preserve-3d",perspective:1600});
  46. punchgs.TweenLite.set(dddw,{force3D:"auto",transformOrigin:"50% 50%"});
  47. punchgs.TweenLite.set(dddwl,{force3D:"auto",transformOrigin:"50% 50%",zIndex:5});
  48. punchgs.TweenLite.set(opt.ul,{transformStyle:"preserve-3d",transformPerspective:1600});
  49. }
  50. }
  51. opt.li.each(function() {
  52. setDDDInContainer(jQuery(this));
  53. });
  54. if ((_.type=="3D" || _.type=="3d") && opt.c.find('.tp-static-layers').length>0) {
  55. punchgs.TweenLite.set(opt.c.find('.tp-static-layers'),{top:0, left:0,width:"100%",height:"100%"});
  56. setDDDInContainer(opt.c.find('.tp-static-layers'));
  57. }
  58. _.pcontainers = new Array();
  59. _.pcontainer_depths = new Array();
  60. _.bgcontainers = new Array();
  61. _.bgcontainer_depths = new Array();
  62. opt.c.find('.tp-revslider-slidesli .slotholder, .tp-revslider-slidesli .rs-background-video-layer').each(function() {
  63. var t = jQuery(this),
  64. l = t.data('bgparallax') || opt.parallax.bgparallax;
  65. l = l == "on" ? 1 : l;
  66. if (l!==undefined && l!=="off") {
  67. _.bgcontainers.push(t);
  68. _.bgcontainer_depths.push(opt.parallax.levels[parseInt(l,0)-1]/100);
  69. }
  70. })
  71. for (var i = 1; i<=_.levels.length;i++)
  72. opt.c.find('.rs-parallaxlevel-'+i).each(function() {
  73. var pw = jQuery(this),
  74. tpw = pw.closest('.tp-parallax-wrap');
  75. tpw.data('parallaxlevel',_.levels[i-1])
  76. tpw.addClass("tp-parallax-container");
  77. _.pcontainers.push(tpw);
  78. _.pcontainer_depths.push(_.levels[i-1]);
  79. });
  80. if (_.type=="mouse" || _.type=="scroll+mouse" || _.type=="mouse+scroll" || _.type=="3D" || _.type=="3d") {
  81. container.mouseenter(function(event) {
  82. var currslide = container.find('.active-revslide'),
  83. t = container.offset().top,
  84. l = container.offset().left,
  85. ex = (event.pageX-l),
  86. ey = (event.pageY-t);
  87. currslide.data("enterx",ex);
  88. currslide.data("entery",ey);
  89. });
  90. container.on('mousemove.hoverdir, mouseleave.hoverdir, trigger3dpath',function(event,data) {
  91. var currslide = data && data.li ? data.li : container.find('.active-revslide');
  92. // CALCULATE DISTANCES
  93. if (_.origo=="enterpoint") {
  94. var t = container.offset().top,
  95. l = container.offset().left;
  96. if (currslide.data("enterx")==undefined) currslide.data("enterx",(event.pageX-l));
  97. if (currslide.data("entery")==undefined) currslide.data("entery",(event.pageY-t));
  98. var mh = currslide.data("enterx") || (event.pageX-l),
  99. mv = currslide.data("entery") || (event.pageY-t),
  100. diffh = (mh - (event.pageX - l)),
  101. diffv = (mv - (event.pageY - t)),
  102. s = _.speed/1000 || 0.4;
  103. } else {
  104. var t = container.offset().top,
  105. l = container.offset().left,
  106. diffh = (opt.conw/2 - (event.pageX-l)),
  107. diffv = (opt.conh/2 - (event.pageY-t)),
  108. s = _.speed/1000 || 3;
  109. }
  110. if (event.type=="mouseleave") {
  111. diffh = _.ddd_lasth || 0;
  112. diffv = _.ddd_lastv || 0;
  113. s = 1.5;
  114. }
  115. for (var i=0;i<_.pcontainers.length;i++) {
  116. var pc = _.pcontainers[i],
  117. bl = _.pcontainer_depths[i],
  118. pl = _.type=="3D" || _.type=="3d" ? bl/200 : bl/100,
  119. offsh = diffh * pl,
  120. offsv = diffv * pl;
  121. if (_.type=="scroll+mouse" || _.type=="mouse+scroll" )
  122. punchgs.TweenLite.to(pc,s,{force3D:"auto",x:offsh,ease:punchgs.Power3.easeOut,overwrite:"all"});
  123. else
  124. punchgs.TweenLite.to(pc,s,{force3D:"auto",x:offsh,y:offsv,ease:punchgs.Power3.easeOut,overwrite:"all"});
  125. };
  126. if (_.type=="3D" || _.type=="3d") {
  127. var sctor = '.tp-revslider-slidesli .dddwrapper, .dddwrappershadow, .tp-revslider-slidesli .dddwrapper-layer, .tp-static-layers .dddwrapper-layer';
  128. if (opt.sliderType==="carousel") sctor = ".tp-revslider-slidesli .dddwrapper, .tp-revslider-slidesli .dddwrapper-layer, .tp-static-layers .dddwrapper-layer";
  129. opt.c.find(sctor).each(function() {
  130. var t = jQuery(this),
  131. pl = _.levels[_.levels.length-1]/200,
  132. offsh = diffh * pl,
  133. offsv = diffv * pl,
  134. offrv = opt.conw == 0 ? 0 : Math.round((diffh / opt.conw * pl)*100) || 0,
  135. offrh = opt.conh == 0 ? 0 : Math.round((diffv / opt.conh * pl)*100) || 0,
  136. li = t.closest('li'),
  137. zz = 0,
  138. itslayer = false;
  139. if (t.hasClass("dddwrapper-layer")) {
  140. zz = _.ddd_z_correction || 65;
  141. itslayer = true;
  142. }
  143. if (t.hasClass("dddwrapper-layer")) {
  144. offsh=0;
  145. offsv=0;
  146. }
  147. if (li.hasClass("active-revslide") || opt.sliderType!="carousel")
  148. if (_.ddd_bgfreeze!="on" || (itslayer))
  149. punchgs.TweenLite.to(t,s,{rotationX:offrh, rotationY:-offrv, x:offsh, z:zz,y:offsv,ease:punchgs.Power3.easeOut,overwrite:"all"});
  150. else
  151. punchgs.TweenLite.to(t,0.5,{force3D:"auto",rotationY:0, rotationX:0, z:0,ease:punchgs.Power3.easeOut,overwrite:"all"});
  152. else
  153. punchgs.TweenLite.to(t,0.5,{force3D:"auto",rotationY:0,x:0,y:0, rotationX:0, z:0,ease:punchgs.Power3.easeOut,overwrite:"all"});
  154. if (event.type=="mouseleave")
  155. punchgs.TweenLite.to(jQuery(this),3.8,{z:0, ease:punchgs.Power3.easeOut});
  156. });
  157. }
  158. });
  159. if (_ISM)
  160. window.ondeviceorientation = function(event) {
  161. var y = Math.round(event.beta || 0)-70,
  162. x = Math.round(event.gamma || 0);
  163. var currslide = container.find('.active-revslide');
  164. if (jQuery(window).width() > jQuery(window).height()){
  165. var xx = x;
  166. x = y;
  167. y = xx;
  168. }
  169. var cw = container.width(),
  170. ch = container.height(),
  171. diffh = (360/cw * x),
  172. diffv = (180/ch * y),
  173. s = _.speed/1000 || 3,
  174. pcnts = [];
  175. currslide.find(".tp-parallax-container").each(function(i){
  176. pcnts.push(jQuery(this));
  177. });
  178. container.find('.tp-static-layers .tp-parallax-container').each(function(){
  179. pcnts.push(jQuery(this));
  180. });
  181. jQuery.each(pcnts, function() {
  182. var pc = jQuery(this),
  183. bl = parseInt(pc.data('parallaxlevel'),0),
  184. pl = bl/100,
  185. offsh = diffh * pl*2,
  186. offsv = diffv * pl*4;
  187. punchgs.TweenLite.to(pc,s,{force3D:"auto",x:offsh,y:offsv,ease:punchgs.Power3.easeOut,overwrite:"all"});
  188. });
  189. if (_.type=="3D" || _.type=="3d") {
  190. var sctor = '.tp-revslider-slidesli .dddwrapper, .dddwrappershadow, .tp-revslider-slidesli .dddwrapper-layer, .tp-static-layers .dddwrapper-layer';
  191. if (opt.sliderType==="carousel") sctor = ".tp-revslider-slidesli .dddwrapper, .tp-revslider-slidesli .dddwrapper-layer, .tp-static-layers .dddwrapper-layer";
  192. opt.c.find(sctor).each(function() {
  193. var t = jQuery(this),
  194. pl = _.levels[_.levels.length-1]/200,
  195. offsh = diffh * pl,
  196. offsv = diffv * pl*3,
  197. offrv = opt.conw == 0 ? 0 : Math.round((diffh / opt.conw * pl)*500) || 0,
  198. offrh = opt.conh == 0 ? 0 : Math.round((diffv / opt.conh * pl)*700) || 0,
  199. li = t.closest('li'),
  200. zz = 0,
  201. itslayer = false;
  202. if (t.hasClass("dddwrapper-layer")) {
  203. zz = _.ddd_z_correction || 65;
  204. itslayer = true;
  205. }
  206. if (t.hasClass("dddwrapper-layer")) {
  207. offsh=0;
  208. offsv=0;
  209. }
  210. if (li.hasClass("active-revslide") || opt.sliderType!="carousel")
  211. if (_.ddd_bgfreeze!="on" || (itslayer))
  212. punchgs.TweenLite.to(t,s,{rotationX:offrh, rotationY:-offrv, x:offsh, z:zz,y:offsv,ease:punchgs.Power3.easeOut,overwrite:"all"});
  213. else
  214. punchgs.TweenLite.to(t,0.5,{force3D:"auto",rotationY:0, rotationX:0, z:0,ease:punchgs.Power3.easeOut,overwrite:"all"});
  215. else
  216. punchgs.TweenLite.to(t,0.5,{force3D:"auto",rotationY:0,z:0,x:0,y:0, rotationX:0, ease:punchgs.Power3.easeOut,overwrite:"all"});
  217. if (event.type=="mouseleave")
  218. punchgs.TweenLite.to(jQuery(this),3.8,{z:0, ease:punchgs.Power3.easeOut});
  219. });
  220. }
  221. }
  222. }
  223. // COLLECT ALL ELEMENTS WHICH NEED FADE IN/OUT ON PARALLAX SCROLL
  224. var _s = opt.scrolleffect;
  225. _s.bgs = new Array();
  226. if (_s.on) {
  227. if (_s.on_slidebg==="on")
  228. for (var i=0;i<opt.allslotholder.length;i++) {
  229. _s.bgs.push(opt.allslotholder[i]);
  230. }
  231. _s.multiplicator_layers = parseFloat(_s.multiplicator_layers);
  232. _s.multiplicator = parseFloat(_s.multiplicator);
  233. }
  234. if (_s.layers!==undefined && _s.layers.length===0) _s.layers = false;
  235. if (_s.bgs!==undefined && _s.bgs.length===0) _s.bgs = false;
  236. _R.scrollTicker(opt,container);
  237. },
  238. scrollTicker : function(opt,container) {
  239. var faut;
  240. if (opt.scrollTicker!=true) {
  241. opt.scrollTicker = true;
  242. if (_ISM) {
  243. punchgs.TweenLite.ticker.fps(150);
  244. punchgs.TweenLite.ticker.addEventListener("tick",function() {_R.scrollHandling(opt);},container,false,1);
  245. } else {
  246. document.addEventListener('scroll',function(e) {
  247. _R.scrollHandling(opt,true);
  248. }, {passive:true});
  249. /*window.addEventListener('mousewheel',function(e) {
  250. _R.scrollHandling(opt,true);
  251. }, {passive:true});
  252. window.addEventListener('DOMMouseScroll',function() {_R.scrollHandling(opt,true);}, {passive:true});*/
  253. }
  254. }
  255. _R.scrollHandling(opt, true);
  256. },
  257. // - SET POST OF SCROLL PARALLAX -
  258. scrollHandling : function(opt,fromMouse,speedoverwrite) {
  259. opt.lastwindowheight = opt.lastwindowheight || window.innerHeight;
  260. opt.conh = opt.conh===0 || opt.conh===undefined ? opt.infullscreenmode ? opt.minHeight : opt.c.height() : opt.conh;
  261. if (opt.lastscrolltop==window.scrollY && !opt.duringslidechange && !fromMouse) return false;
  262. punchgs.TweenLite.delayedCall(0.2,saveLastScroll,[opt,window.scrollY]);
  263. var b = opt.c[0].getBoundingClientRect(),
  264. _v = opt.viewPort,
  265. _ = opt.parallax;
  266. var proc = b.top<0 || b.height>opt.lastwindowheight ? b.top / b.height : b.bottom>opt.lastwindowheight ? (b.bottom-opt.lastwindowheight) / b.height : 0;
  267. opt.scrollproc = proc;
  268. if (_R.callBackHandling)
  269. _R.callBackHandling(opt,"parallax","start");
  270. if (_v.enable) {
  271. var area = 1-Math.abs(proc);
  272. area = area<0 ? 0 : area;
  273. // To Make sure it is not any more in %
  274. if (!jQuery.isNumeric(_v.visible_area))
  275. if (_v.visible_area.indexOf('%')!==-1)
  276. _v.visible_area = parseInt(_v.visible_area)/100;
  277. if (1-_v.visible_area<=area) {
  278. if (!opt.inviewport) {
  279. opt.inviewport = true;
  280. _R.enterInViewPort(opt);
  281. }
  282. } else {
  283. if (opt.inviewport) {
  284. opt.inviewport = false;
  285. _R.leaveViewPort(opt);
  286. }
  287. }
  288. }
  289. // SCROLL BASED PARALLAX EFFECT
  290. if (_ISM && _.disable_onmobile=="on") return false;
  291. if (_.type!="3d" && _.type!="3D") {
  292. if (_.type=="scroll" || _.type=="scroll+mouse" || _.type=="mouse+scroll")
  293. if (_.pcontainers)
  294. for (var i=0;i<_.pcontainers.length;i++) {
  295. if (_.pcontainers[i].length>0) {
  296. var pc = _.pcontainers[i],
  297. pl = _.pcontainer_depths[i]/100,
  298. offsv = Math.round((proc * -(pl*opt.conh)*10))/10 || 0,
  299. s = speedoverwrite!==undefined ? speedoverwrite : _.speedls/1000 || 0;
  300. pc.data('parallaxoffset',offsv);
  301. punchgs.TweenLite.to(pc,s,{overwrite:"auto",force3D:"auto",y:offsv})
  302. }
  303. }
  304. if (_.bgcontainers)
  305. for (var i=0;i<_.bgcontainers.length;i++) {
  306. var t = _.bgcontainers[i],
  307. l = _.bgcontainer_depths[i],
  308. offsv = proc * -(l*opt.conh) || 0,
  309. s = speedoverwrite!==undefined ? speedoverwrite : _.speedbg/1000 || 0;
  310. punchgs.TweenLite.to(t,s,{position:"absolute",top:"0px",left:"0px",backfaceVisibility:"hidden",force3D:"true",y:offsv+"px"});
  311. }
  312. }
  313. // SCROLL BASED BLUR,FADE,GRAYSCALE EFFECT
  314. var _s = opt.scrolleffect;
  315. if (_s.on && (_s.disable_on_mobile!=="on" || !_ISM)) {
  316. var _fproc = Math.abs(proc)-(_s.tilt/100);
  317. _fproc = _fproc<0 ? 0 : _fproc;
  318. if (_s.layers!==false) {
  319. var fadelevel = 1 - (_fproc *_s.multiplicator_layers),
  320. seo = { backfaceVisibility:"hidden",force3D:"true",z:0.001,perspective:600};
  321. if (_s.direction=="top" && proc>=0) fadelevel=1;
  322. if (_s.direction=="bottom" && proc<=0) fadelevel=1;
  323. fadelevel = fadelevel>1 ? 1 : fadelevel < 0 ? 0 : fadelevel;
  324. if (_s.fade==="on")
  325. seo.opacity = fadelevel;
  326. if (_s.scale==="on") {
  327. var scalelevel = (fadelevel);
  328. seo.scale = 1+(1-scalelevel);
  329. }
  330. if (_s.blur==="on") {
  331. var blurlevel = (1-fadelevel) * _s.maxblur;
  332. seo['-webkit-filter'] = 'blur('+blurlevel+'px)';
  333. seo['filter'] = 'blur('+blurlevel+'px)';
  334. }
  335. if (_s.grayscale==="on") {
  336. var graylevel = (1-fadelevel) * 100,
  337. gf = 'grayscale('+graylevel+'%)';
  338. seo['-webkit-filter'] = seo['-webkit-filter']===undefined ? gf : seo['-webkit-filter']+' '+gf;
  339. seo['filter'] = seo['filter']===undefined ? gf: seo['filter']+' '+gf;
  340. }
  341. punchgs.TweenLite.set(_s.layers,seo);
  342. }
  343. if (_s.bgs!==false) {
  344. var fadelevel = 1 - (_fproc *_s.multiplicator),
  345. seo = { backfaceVisibility:"hidden",force3D:"true"};
  346. if (_s.direction=="top" && proc>=0) fadelevel=1;
  347. if (_s.direction=="bottom" && proc<=0) fadelevel=1;
  348. fadelevel = fadelevel>1 ? 1 : fadelevel < 0 ? 0 : fadelevel;
  349. if (_s.fade==="on")
  350. seo.opacity = fadelevel;
  351. if (_s.scale==="on") {
  352. var scalelevel = fadelevel;
  353. //seo.scale = scalelevel;
  354. punchgs.TweenLite.set(jQuery('.tp-kbimg-wrap'),{transformOrigin:"50% 50%",scale:scalelevel,force3D:true})
  355. }
  356. if (_s.blur==="on") {
  357. var blurlevel = (1-fadelevel) * _s.maxblur;
  358. seo['-webkit-filter'] = 'blur('+blurlevel+'px)';
  359. seo['filter'] = 'blur('+blurlevel+'px)';
  360. }
  361. if (_s.grayscale==="on") {
  362. var graylevel = (1-fadelevel) * 100,
  363. gf = 'grayscale('+graylevel+'%)';
  364. seo['-webkit-filter'] = seo['-webkit-filter']===undefined ? gf : seo['-webkit-filter']+' '+gf;
  365. seo['filter'] = seo['filter']===undefined ? gf: seo['filter']+' '+gf;
  366. }
  367. punchgs.TweenLite.set(_s.bgs,seo);
  368. }
  369. }
  370. if (_R.callBackHandling)
  371. _R.callBackHandling(opt,"parallax","end");
  372. }
  373. });
  374. function saveLastScroll(opt,st) { opt.lastscrolltop = st;}
  375. //// END OF PARALLAX EFFECT
  376. })(jQuery);