https://drx.com.tw/assets/vendor/revolution-slider/revolution-addons/slicey/js/revolution.addon.slicey.min.js

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

130			if (prog==="update" && _.slicedanimation!==undefined) prog = _.slicedanimation.progress();
131			_.slicedanimation = new punchgs.TimelineLite();				
132			_.scalestart = _.global_scalestart * _.slicey_offset_start;
133			_.scaleend = _.global_scaleend * _.slicey_offset_end;
134			
135			/*_.x = {
136					start: ((ls.eow / (ls.eow * _.scalestart)) * ls.origin_offset.x) - ls.origin_offset.x ,  //(ls.origin_offset.x - (ls.origin_offset.x*_.scalestart))/2 ,
137					end: ((ls.eow / (ls.eow * _.scaleend)) * ls.origin_offset.x) - ls.origin_offset.x  //(ls.origin_offset.x - (ls.origin_offset.x*_.scaleend))/2
138			};
139
140			_.y = {
141					start: ((ls.eoh / (ls.eoh * _.scalestart)) * ls.origin_offset.y) - ls.origin_offset.y ,  //(ls.origin_offset.y - (ls.origin_offset.y*_.scalestart))/2 ,
142					end: ((ls.eoh / (ls.eoh * _.scaleend)) * ls.origin_offset.y) - ls.origin_offset.y  //(ls.origin_offset.y - (ls.origin_offset.y*_.scaleend))/2
143			};
144
145
146					
147			_.slicedanimation.add(punchgs.TweenLite.fromTo(ls.slicedbox_wrapper,_.global_duration,
148											{	z:0,
149												x:_.x.start,
150												y:_.y.start,
151												transformOrigin:"50% 50%"
152											},
153											{	force3D:"auto",
154												x:_.x.end,
155												y:_.y.end,
156												z:(_.scaleend)*100,
157												ease:_.global_ease
158											}),0);
159			*/
160			_.slicedanimation.add(punchgs.TweenLite.fromTo(ls.slicedbox_wrapper,_.global_duration,
161												{transformOrigin:(ls.origin_offset.sx+"px "+ls.origin_offset.sy+"px"),scale:(_.global_scalestart*_.slicey_offset_start)},
162												{force3D:"auto", scale:(_.global_scaleend*_.slicey_offset_end),ease:_.global_ease}),0);
163
164			
165			// ADD BLUR EFFECT ON THE ELEMENTS
166			if (_.slicey_blurstart!==undefined && _.slicey_blurend!==undefined &&  (_.slicey_blurstart!==0 || _.slicey_blurend!==0)) {
167				_.blurElement = {a:_.slicey_blurstart};
168				_.blurElementEnd = {a:_.slicey_blurend, ease:_.global_ease};
169				_.blurAnimation = new punchgs.TweenLite(_.blurElement, _.global_duration, _.blurElementEnd);
170
171
172				_.blurAnimation.eventCallback("onUpdate", function(_,ls) {									
173					punchgs.TweenLite.set(ls.slicedbox_wrapper,{position:"absolute",msFilter:'blur('+_.blurElement.a+'px)',filter:'blur('+_.blurElement.a+'px)',webkitFilter:'blur('+_.blurElement.a+'px)'});
174				},[_,ls]);
175				_.slicedanimation.add(_.blurAnimation,0);			
176			}
177
178			_.slicedanimation.progress(prog)
179			_.slicedanimation.play()
180		}
181	}
182
183
184})(jQuery);