revolution.extension.kenburn.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. /********************************************
  2. * REVOLUTION 5.0 EXTENSION - KEN BURN
  3. * @version: 1.0.0 (03.08.2015)
  4. * @requires jquery.themepunch.revolution.js
  5. * @author ThemePunch
  6. *********************************************/
  7. (function($) {
  8. var _R = jQuery.fn.revolution;
  9. ///////////////////////////////////////////
  10. // EXTENDED FUNCTIONS AVAILABLE GLOBAL //
  11. ///////////////////////////////////////////
  12. jQuery.extend(true,_R, {
  13. stopKenBurn : function(l) {
  14. if (l.data('kbtl')!=undefined)
  15. l.data('kbtl').pause();
  16. },
  17. startKenBurn : function(l,opt,prgs) {
  18. var d = l.data(),
  19. i = l.find('.defaultimg'),
  20. s = i.data('lazyload') || i.data('src'),
  21. i_a = d.owidth / d.oheight,
  22. cw = opt.sliderType==="carousel" ? opt.carousel.slide_width : opt.ul.width(),
  23. ch = opt.ul.height(),
  24. c_a = cw / ch;
  25. if (l.data('kbtl'))
  26. l.data('kbtl').kill();
  27. prgs = prgs || 0;
  28. // NO KEN BURN IMAGE EXIST YET
  29. if (l.find('.tp-kbimg').length==0) {
  30. l.append('<div class="tp-kbimg-wrap" 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>');
  31. l.data('kenburn',l.find('.tp-kbimg'));
  32. }
  33. var getKBSides = function(w,h,f,cw,ch,ho,vo) {
  34. var tw = w * f,
  35. th = h * f,
  36. hd = Math.abs(cw-tw),
  37. vd = Math.abs(ch-th),
  38. s = new Object();
  39. s.l = (0-ho)*hd;
  40. s.r = s.l + tw;
  41. s.t = (0-vo)*vd;
  42. s.b = s.t + th;
  43. s.h = ho;
  44. s.v = vo;
  45. return s;
  46. },
  47. getKBCorners = function(d,cw,ch,ofs,o) {
  48. var p = d.bgposition.split(" ") || "center center",
  49. ho = p[0] == "center" ? "50%" : p[0] == "left" || p [1] == "left" ? "0%" : p[0]=="right" || p[1] =="right" ? "100%" : p[0],
  50. vo = p[1] == "center" ? "50%" : p[0] == "top" || p [1] == "top" ? "0%" : p[0]=="bottom" || p[1] =="bottom" ? "100%" : p[1];
  51. ho = parseInt(ho,0)/100 || 0;
  52. vo = parseInt(vo,0)/100 || 0;
  53. var sides = new Object();
  54. sides.start = getKBSides(o.start.width,o.start.height,o.start.scale,cw,ch,ho,vo);
  55. sides.end = getKBSides(o.start.width,o.start.height,o.end.scale,cw,ch,ho,vo);
  56. return sides;
  57. },
  58. kcalcL = function(cw,ch,d) {
  59. var f=d.scalestart/100,
  60. fe=d.scaleend/100,
  61. ofs = d.oofsetstart != undefined ? d.offsetstart.split(" ") || [0,0] : [0,0],
  62. ofe = d.offsetend != undefined ? d.offsetend.split(" ") || [0,0] : [0,0];
  63. d.bgposition = d.bgposition == "center center" ? "50% 50%" : d.bgposition;
  64. var o = new Object(),
  65. sw = cw*f,
  66. sh = sw/d.owidth * d.oheight,
  67. ew = cw*fe,
  68. eh = ew/d.owidth * d.oheight;
  69. o.start = new Object();
  70. o.starto = new Object();
  71. o.end = new Object();
  72. o.endo = new Object();
  73. o.start.width = cw;
  74. o.start.height = o.start.width / d.owidth * d.oheight;
  75. if (o.start.height<ch) {
  76. var newf = ch / o.start.height;
  77. o.start.height = ch;
  78. o.start.width = o.start.width*newf;
  79. }
  80. o.start.transformOrigin = d.bgposition;
  81. o.start.scale = f;
  82. o.end.scale = fe;
  83. o.start.rotation = d.rotatestart+"deg";
  84. o.end.rotation = d.rotateend+"deg";
  85. // MAKE SURE THAT OFFSETS ARE NOT TOO HIGH
  86. var c = getKBCorners(d,cw,ch,ofs,o);
  87. ofs[0] = parseFloat(ofs[0]) + c.start.l;
  88. ofe[0] = parseFloat(ofe[0]) + c.end.l;
  89. ofs[1] = parseFloat(ofs[1]) + c.start.t;
  90. ofe[1] = parseFloat(ofe[1]) + c.end.t;
  91. var iws = c.start.r - c.start.l,
  92. ihs = c.start.b - c.start.t,
  93. iwe = c.end.r - c.end.l,
  94. ihe = c.end.b - c.end.t;
  95. ofs[0] = ofs[0]>0 ? 0 : iws + ofs[0] < cw ? cw-iws : ofs[0];
  96. ofe[0] = ofe[0]>0 ? 0 : iwe + ofe[0] < cw ? cw-iwe : ofe[0];
  97. ofs[1] = ofs[1]>0 ? 0 : ihs + ofs[1] < ch ? ch-ihs : ofs[1];
  98. ofe[1] = ofe[1]>0 ? 0 : ihe + ofe[1] < ch ? ch-ihe : ofe[1];
  99. o.starto.x = ofs[0]+"px";
  100. o.starto.y = ofs[1]+"px";
  101. o.endo.x = ofe[0]+"px";
  102. o.endo.y = ofe[1]+"px";
  103. o.end.ease = o.endo.ease = d.ease;
  104. o.end.force3D = o.endo.force3D = true;
  105. return o;
  106. };
  107. if (l.data('kbtl')!=undefined) {
  108. l.data('kbtl').kill();
  109. l.removeData('kbtl');
  110. }
  111. var k = l.data('kenburn'),
  112. kw = k.parent(),
  113. anim = kcalcL(cw,ch,d),
  114. kbtl = new punchgs.TimelineLite();
  115. kbtl.pause();
  116. anim.start.transformOrigin = "0% 0%";
  117. anim.starto.transformOrigin = "0% 0%";
  118. kbtl.add(punchgs.TweenLite.fromTo(k,d.duration/1000,anim.start,anim.end),0);
  119. kbtl.add(punchgs.TweenLite.fromTo(kw,d.duration/1000,anim.starto,anim.endo),0);
  120. kbtl.progress(prgs);
  121. kbtl.play();
  122. l.data('kbtl',kbtl);
  123. }
  124. });
  125. })(jQuery);