You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

183 lines
6.9 KiB

2 years ago
  1. /********************************************
  2. * REVOLUTION 5.0+ EXTENSION - SLICED
  3. * @version: 1.0 (15.02.2017)
  4. * @requires jquery.themepunch.revolution.js
  5. * @author ThemePunch
  6. *********************************************/
  7. (function($) {
  8. var _R = jQuery.fn;
  9. ///////////////////////////////////////////
  10. // EXTENDED FUNCTIONS AVAILABLE GLOBAL //
  11. ///////////////////////////////////////////
  12. jQuery.extend(true,_R, {
  13. revSliderSlicey: function() {
  14. return this.each(function() {
  15. jQuery(this).on('revolution.slide.onloaded',function() {
  16. init(this.opt);
  17. });
  18. });
  19. }
  20. });
  21. //////////////////////////////////////////
  22. // - INITIALISATION OF WHITEBOARD - //
  23. //////////////////////////////////////////
  24. var init = function(opt) {
  25. opt.slidecobjects = new Array();
  26. // PREPARING THE LAYERS
  27. opt.c.find('.tp-slicey').each(function(){
  28. var sb = jQuery(this),
  29. li = sb.closest('.tp-revslider-slidesli'),
  30. di = li.find('.defaultimg').first().clone(),
  31. shd = li.find('.slotholder').data(),
  32. _ = sb.data();
  33. _.slicey_offset_start = 1;
  34. _.slicey_offset_end = _.slicey_offset===undefined ? 1 : 1 + parseInt(_.slicey_offset, 10) * 0.01;
  35. _.slicey_blurstart = _.slicey_blurstart===undefined || _.slicey_blurstart==="inherit" ? shd.blurstart : _.slicey_blurstart;
  36. _.slicey_blurend = _.slicey_blurend===undefined || _.slicey_blurend==="inherit" ? shd.blurend : _.slicey_blurend;
  37. di.removeClass("tp-bgimg").removeClass("defaultimg").addClass("slicedbox_defmig");
  38. var wp = jQuery('<div class="slicedbox_wrapper" data-slicey_offset_start="' +
  39. _.slicey_offset_start+'" data-slicey_offset_end="'+_.slicey_offset_end+'" data-global_duration="' +
  40. shd.duration/1000+'" data-global_ease="'+shd.ease+'" data-slicey_blurstart="'+_.slicey_blurstart+'" data-slicey_blurend="'+_.slicey_blurend+'" data-global_scalestart="' +
  41. (shd.scalestart/100)+'" data-global_scaleend="' +
  42. (shd.scaleend/100)+'" style="width:100%;height:100%;position:absolute;overflow:hidden;box-shadow:' +
  43. li.data('slicey_shadow')+'"></div>');
  44. wp.append(di);
  45. sb.append(wp);
  46. var tc = wp.closest('.tp-caption');
  47. punchgs.TweenLite.set(tc,{background:"transparent", transformStyle:"flat", perspective:"1000px", force3D:"true", transformOrigin:"50% 50%"});
  48. opt.slidecobjects.push({caption:tc,li_index:li.data('index')});
  49. punchgs.TweenLite.set(di,{opacity:1});
  50. });
  51. // UPDATE LAYER SIZES IF SLIDE CHANGE (NEED TO DO -> Only Layer Reset on Current Layers in Slide !!)
  52. opt.c.on('revolution.slide.onafterswap',function(event,obj) {
  53. var ind = obj.currentslide.data('index');
  54. for (var i in opt.slidecobjects) {
  55. var l = opt.slidecobjects[i].caption,
  56. ls = l.data();
  57. if (ind===opt.slidecobjects[i].li_index)
  58. updateSlicedBox(l,ls,opt);
  59. }
  60. });
  61. // ON LAYER ENTERSTAGE START ANIMATION ON LAYER
  62. opt.c.on('revolution.layeraction',function(event,obj) {
  63. if (obj.eventtype==="enterstage") {
  64. updateSlicedBox(obj.layer,obj.layersettings,opt);
  65. animateSlicedBox(obj.layer,obj.layersettings,0);
  66. }
  67. });
  68. // RECALCULATE SIZE OF ELEMENTS ON RESIZE
  69. jQuery(window).resize(function() {
  70. clearTimeout(opt.sliced_resize_timer);
  71. opt.sliced_resize_timer = setTimeout(function() {
  72. for (var i in opt.slidecobjects) {
  73. var l = opt.slidecobjects[i].caption,
  74. ls = opt.slidecobjects[i].caption.data(),
  75. ali = opt.c.find('.active-revslide');
  76. if (ali.length===0 || ali.data('index')===opt.slidecobjects[i].li_index) {
  77. updateSlicedBox(l,ls,opt);
  78. animateSlicedBox(l,ls,"update");
  79. }
  80. }
  81. },50)
  82. })
  83. };
  84. // UPDATE THE SLICEBOX SIZES AND CONTENT
  85. var updateSlicedBox = function(l,_,opt) {
  86. _.slicedbox_wrapper = _.slicedbox_wrapper == undefined ? l.find('.slicedbox_wrapper') : _.slicedbox_wrapper;
  87. if (_.slicedbox_wrapper.length>0) {
  88. _.slicedbox_defmig = _.slicedbox_defmig == undefined ? l.find('.slicedbox_defmig') : _.slicedbox_defmig;
  89. _.origin_offset = {
  90. sx : (opt.conw/2 - _.calcx),
  91. sy : (opt.conh/2 - _.calcy),
  92. x : (opt.conw/2 - (_.calcx+(_.eow/2))),
  93. y : (opt.conh/2 - (_.calcy+(_.eoh/2)))
  94. }
  95. punchgs.TweenLite.set(_.slicedbox_defmig,{opacity:1,left:(0-_.calcx)+"px" , top:(0-_.calcy)+"px", width:opt.conw, height:opt.conh, position:"absolute"});
  96. }
  97. }
  98. // ANIMATE, RESET PROGRESSED ANIMATION ON LAYER
  99. var animateSlicedBox = function(l,ls,prog) {
  100. if (ls.slicedbox_wrapper.length>0) {
  101. var _ = ls.slicedbox_wrapper.data();
  102. if (prog===undefined) prog=0;
  103. if (prog==="update" && _.slicedanimation!==undefined) prog = _.slicedanimation.progress();
  104. _.slicedanimation = new punchgs.TimelineLite();
  105. _.scalestart = _.global_scalestart * _.slicey_offset_start;
  106. _.scaleend = _.global_scaleend * _.slicey_offset_end;
  107. /*_.x = {
  108. start: ((ls.eow / (ls.eow * _.scalestart)) * ls.origin_offset.x) - ls.origin_offset.x , //(ls.origin_offset.x - (ls.origin_offset.x*_.scalestart))/2 ,
  109. end: ((ls.eow / (ls.eow * _.scaleend)) * ls.origin_offset.x) - ls.origin_offset.x //(ls.origin_offset.x - (ls.origin_offset.x*_.scaleend))/2
  110. };
  111. _.y = {
  112. start: ((ls.eoh / (ls.eoh * _.scalestart)) * ls.origin_offset.y) - ls.origin_offset.y , //(ls.origin_offset.y - (ls.origin_offset.y*_.scalestart))/2 ,
  113. end: ((ls.eoh / (ls.eoh * _.scaleend)) * ls.origin_offset.y) - ls.origin_offset.y //(ls.origin_offset.y - (ls.origin_offset.y*_.scaleend))/2
  114. };
  115. _.slicedanimation.add(punchgs.TweenLite.fromTo(ls.slicedbox_wrapper,_.global_duration,
  116. { z:0,
  117. x:_.x.start,
  118. y:_.y.start,
  119. transformOrigin:"50% 50%"
  120. },
  121. { force3D:"auto",
  122. x:_.x.end,
  123. y:_.y.end,
  124. z:(_.scaleend)*100,
  125. ease:_.global_ease
  126. }),0);
  127. */
  128. _.slicedanimation.add(punchgs.TweenLite.fromTo(ls.slicedbox_wrapper,_.global_duration,
  129. {transformOrigin:(ls.origin_offset.sx+"px "+ls.origin_offset.sy+"px"),scale:(_.global_scalestart*_.slicey_offset_start)},
  130. {force3D:"auto", scale:(_.global_scaleend*_.slicey_offset_end),ease:_.global_ease}),0);
  131. // ADD BLUR EFFECT ON THE ELEMENTS
  132. if (_.slicey_blurstart!==undefined && _.slicey_blurend!==undefined && (_.slicey_blurstart!==0 || _.slicey_blurend!==0)) {
  133. _.blurElement = {a:_.slicey_blurstart};
  134. _.blurElementEnd = {a:_.slicey_blurend, ease:_.global_ease};
  135. _.blurAnimation = new punchgs.TweenLite(_.blurElement, _.global_duration, _.blurElementEnd);
  136. _.blurAnimation.eventCallback("onUpdate", function(_,ls) {
  137. punchgs.TweenLite.set(ls.slicedbox_wrapper,{position:"absolute",msFilter:'blur('+_.blurElement.a+'px)',filter:'blur('+_.blurElement.a+'px)',webkitFilter:'blur('+_.blurElement.a+'px)'});
  138. },[_,ls]);
  139. _.slicedanimation.add(_.blurAnimation,0);
  140. }
  141. _.slicedanimation.progress(prog)
  142. _.slicedanimation.play()
  143. }
  144. }
  145. })(jQuery);