revolution.extension.kenburn.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. /********************************************
  2. * REVOLUTION 5.4.2 EXTENSION - KEN BURN
  3. * @version: 1.3.1 (15.05.2017)
  4. * @requires jquery.themepunch.revolution.js
  5. * @author ThemePunch
  6. *********************************************/
  7. (function($) {
  8. "use strict";
  9. var _R = jQuery.fn.revolution,
  10. extension = { alias:"KenBurns Min JS",
  11. name:"revolution.extensions.kenburn.min.js",
  12. min_core: "5.4",
  13. version:"1.3.1"
  14. };
  15. ///////////////////////////////////////////
  16. // EXTENDED FUNCTIONS AVAILABLE GLOBAL //
  17. ///////////////////////////////////////////
  18. jQuery.extend(true,_R, {
  19. stopKenBurn : function(l) {
  20. if (_R.compare_version(extension).check==="stop") return false;
  21. if (l.data('kbtl')!=undefined)
  22. l.data('kbtl').pause();
  23. },
  24. startKenBurn : function(l,opt,prgs) {
  25. if (_R.compare_version(extension).check==="stop") return false;
  26. var d = l.data(),
  27. i = l.find('.defaultimg'),
  28. s = i.data('lazyload') || i.data('src'),
  29. i_a = d.owidth / d.oheight,
  30. cw = opt.sliderType==="carousel" ? opt.carousel.slide_width : opt.ul.width(),
  31. ch = opt.ul.height(),
  32. c_a = cw / ch;
  33. if (l.data('kbtl'))
  34. l.data('kbtl').kill();
  35. prgs = prgs || 0;
  36. // NO KEN BURN IMAGE EXIST YET
  37. if (l.find('.tp-kbimg').length==0) {
  38. var mediafilter = i.data('mediafilter');
  39. mediafilter = mediafilter === undefined ? "" : mediafilter;
  40. l.append('<div class="tp-kbimg-wrap '+mediafilter+'" style="z-index:2;width:100%;height:100%;top:0px;left:0px;position:absolute;"><img class="tp-kbimg" src="'+s+'" style="position:absolute;" width="'+d.owidth+'" height="'+d.oheight+'"></div>');
  41. l.data('kenburn',l.find('.tp-kbimg'));
  42. }
  43. var getKBSides = function(w,h,f,cw,ch,ho,vo) {
  44. var tw = w * f,
  45. th = h * f,
  46. hd = Math.abs(cw-tw),
  47. vd = Math.abs(ch-th),
  48. s = new Object();
  49. s.l = (0-ho)*hd;
  50. s.r = s.l + tw;
  51. s.t = (0-vo)*vd;
  52. s.b = s.t + th;
  53. s.h = ho;
  54. s.v = vo;
  55. return s;
  56. },
  57. getKBCorners = function(d,cw,ch,ofs,o) {
  58. var p = d.bgposition.split(" ") || "center center",
  59. ho = p[0] == "center" ? "50%" : p[0] == "left" || p [1] == "left" ? "0%" : p[0]=="right" || p[1] =="right" ? "100%" : p[0],
  60. vo = p[1] == "center" ? "50%" : p[0] == "top" || p [1] == "top" ? "0%" : p[0]=="bottom" || p[1] =="bottom" ? "100%" : p[1];
  61. ho = parseInt(ho,0)/100 || 0;
  62. vo = parseInt(vo,0)/100 || 0;
  63. var sides = new Object();
  64. sides.start = getKBSides(o.start.width,o.start.height,o.start.scale,cw,ch,ho,vo);
  65. sides.end = getKBSides(o.start.width,o.start.height,o.end.scale,cw,ch,ho,vo);
  66. return sides;
  67. },
  68. kcalcL = function(cw,ch,d) {
  69. var f=d.scalestart/100,
  70. fe=d.scaleend/100,
  71. ofs = d.offsetstart != undefined ? d.offsetstart.split(" ") || [0,0] : [0,0],
  72. ofe = d.offsetend != undefined ? d.offsetend.split(" ") || [0,0] : [0,0];
  73. d.bgposition = d.bgposition == "center center" ? "50% 50%" : d.bgposition;
  74. var o = new Object(),
  75. sw = cw*f,
  76. sh = sw/d.owidth * d.oheight,
  77. ew = cw*fe,
  78. eh = ew/d.owidth * d.oheight;
  79. o.start = new Object();
  80. o.starto = new Object();
  81. o.end = new Object();
  82. o.endo = new Object();
  83. o.start.width = cw;
  84. o.start.height = o.start.width / d.owidth * d.oheight;
  85. if (o.start.height<ch) {
  86. var newf = ch / o.start.height;
  87. o.start.height = ch;
  88. o.start.width = o.start.width*newf;
  89. }
  90. o.start.transformOrigin = d.bgposition;
  91. o.start.scale = f;
  92. o.end.scale = fe;
  93. d.rotatestart = d.rotatestart===0 ? 0.01 : d.rotatestart;
  94. o.start.rotation = d.rotatestart+"deg";
  95. o.end.rotation = d.rotateend+"deg";
  96. // MAKE SURE THAT OFFSETS ARE NOT TOO HIGH
  97. var c = getKBCorners(d,cw,ch,ofs,o);
  98. ofs[0] = parseFloat(ofs[0]) + c.start.l;
  99. ofe[0] = parseFloat(ofe[0]) + c.end.l;
  100. ofs[1] = parseFloat(ofs[1]) + c.start.t;
  101. ofe[1] = parseFloat(ofe[1]) + c.end.t;
  102. var iws = c.start.r - c.start.l,
  103. ihs = c.start.b - c.start.t,
  104. iwe = c.end.r - c.end.l,
  105. ihe = c.end.b - c.end.t;
  106. ofs[0] = ofs[0]>0 ? 0 : iws + ofs[0] < cw ? cw-iws : ofs[0];
  107. ofe[0] = ofe[0]>0 ? 0 : iwe + ofe[0] < cw ? cw-iwe : ofe[0];
  108. ofs[1] = ofs[1]>0 ? 0 : ihs + ofs[1] < ch ? ch-ihs : ofs[1];
  109. ofe[1] = ofe[1]>0 ? 0 : ihe + ofe[1] < ch ? ch-ihe : ofe[1];
  110. o.starto.x = ofs[0]+"px";
  111. o.starto.y = ofs[1]+"px";
  112. o.endo.x = ofe[0]+"px";
  113. o.endo.y = ofe[1]+"px";
  114. o.end.ease = o.endo.ease = d.ease;
  115. o.end.force3D = o.endo.force3D = true;
  116. return o;
  117. };
  118. if (l.data('kbtl')!=undefined) {
  119. l.data('kbtl').kill();
  120. l.removeData('kbtl');
  121. }
  122. var k = l.data('kenburn'),
  123. kw = k.parent(),
  124. anim = kcalcL(cw,ch,d),
  125. kbtl = new punchgs.TimelineLite();
  126. kbtl.pause();
  127. anim.start.transformOrigin = "0% 0%";
  128. anim.starto.transformOrigin = "0% 0%";
  129. kbtl.add(punchgs.TweenLite.fromTo(k,d.duration/1000,anim.start,anim.end),0);
  130. kbtl.add(punchgs.TweenLite.fromTo(kw,d.duration/1000,anim.starto,anim.endo),0);
  131. // ADD BLUR EFFECT ON THE ELEMENTS
  132. if (d.blurstart!==undefined && d.blurend!==undefined && (d.blurstart!==0 || d.blurend!==0)) {
  133. var blurElement = {a:d.blurstart},
  134. blurElementEnd = {a:d.blurend, ease:anim.endo.ease},
  135. blurAnimation = new punchgs.TweenLite(blurElement, d.duration/1000, blurElementEnd);
  136. blurAnimation.eventCallback("onUpdate", function(kw) {
  137. punchgs.TweenLite.set(kw,{filter:'blur('+blurElement.a+'px)',webkitFilter:'blur('+blurElement.a+'px)'});
  138. },[kw]);
  139. kbtl.add(blurAnimation,0);
  140. }
  141. kbtl.progress(prgs);
  142. kbtl.play();
  143. l.data('kbtl',kbtl);
  144. }
  145. });
  146. })(jQuery);