https://www.toyota-lf.com/js/lib/jquery.flowVox.js

1/**
2 ***********************************************
3 * 
4 * ボックスのフローアニメーション
5 * 一度のみ実行するタイプ
6 * @category 	Application of AZLINK.
7 * @author 		Norio Murata <[email protected]>
8 * @copyright 	2010- AZLINK. <http://www.azlink.jp>
9 * @final 		2018.02.25
10 * 
11 ***********************************************
12 */
13(function($) {
14
15	var pluginName = 'flowVox';
16	var options;
17
18	var flowAnime = new Array,
19			isFlowDefault = false;
20
21	var methods = {
22		init: function(params) {
23			var per = $.params.wWidth > $.params.wHeight ? 0.8 : 0.95;
24
25			options = $.extend({
26				translate: 60,
27				duration: 600,
28				delay: 300,
29				easing: 'easeOutCubic',
30				autorun: true,
31				autodestroy: true
32			}, params);
33
34			this.each(function(i) {
35				$(this).children().each(function() {
36					$(this).wrapAll('<div class="animeObj" />');
37				});
38
39				var mode = $(this).data('flow') ? $(this).data('flow') : 'up';
40
41				switch (mode) {
42					case 'down':
43						$(this).find('.animeObj').css({
44							visibility: 'visible'
45						}).velocity({
46							translateY: -options.translate,
47							opacity: 0
48						}, 1);
49						break;
50					case 'left':
51						$(this).find('.animeObj').css({
52							visibility: 'visible'
53						}).velocity({
54							translateX: options.translate,
55							opacity: 0
56						}, 1);
57						break;
58					case 'right':
59						$(this).find('.animeObj').css({
60							visibility: 'visible'
61						}).velocity({
62							translateX: -options.translate,
63							opacity: 0
64						}, 1);
65						break;
66					case 'leftdown':
67						$(this).find('.animeObj').css({
68							visibility: 'visible'
69						}).velocity({
70							translateX: options.translate,
71							translateY: -options.translate,
72							opacity: 0
73						}, 1);
74						break;
75					case 'rightdown':
76						$(this).find('.animeObj').css({
77							visibility: 'visible'
78						}).velocity({
79							translateX: -options.translate,
80							translateY: -options.translate,
81							opacity: 0
82						}, 1);
83						break;
84					case 'leftup':
85						$(this).find('.animeObj').css({
86							visibility: 'visible'
87						}).velocity({
88							translateX: options.translate,
89							translateY: options.translate,
90							opacity: 0
91						}, 1);
92						break;
93					case 'rightup':
94						$(this).find('.animeObj').css({
95							visibility: 'visible'
96						}).velocity({
97							translateX: -options.translate,
98							translateY: options.translate,
99							opacity: 0
100						}, 1);
101						break;
102					case 'zoom':
103						$(this).find('.animeObj').css({
104							visibility: 'visible'
105						}).velocity({
106							scale: 0
107						}, 1);
108						break;
109					case 'away':
110						$(this).find('.animeObj').css({
111							visibility: 'visible'
112						}).velocity({
113							opacity: 0
114						}, 1);
115						break;
116					default:
117						$(this).find('.animeObj').css({
118							visibility: 'visible'
119						}).velocity({
120							translateY: options.translate,
121							opacity: 0
122						}, 1);
123				}
124				
125				var param = {
126					pos: $(this).find('.animeObj:eq(0)').offset().top,
127					isDone: false,
128					height: $(this).height(),
129					mode: mode
130				};
131				
132				flowAnime[i] = function() {
133					if ($.params.scrTop > param.pos - ($.params.wHeight * per)) {
134						if (param.isDone) return;
135						
136						$('.flowVox').eq(i).find('.animeObj').each(function(j) {
137							switch (param.mode) {
138								case 'zoom':
139									$(this).velocity('stop').velocity({
140										scale: 1.2
141									}, {
142										duration: 300,
143										delay: j * options.delay,
144										easing: 'easeInQuint',
145										complete: function() {
146											$(this).velocity({
147												scale: 1.0
148											}, {
149												duration: 150,
150												complete: function() {
151													if (options.autodestroy) $(this).children().unwrap();
152												}
153											});
154										}
155									});
156									break;
157								case 'away':
158									$(this).velocity('stop').velocity({
159										opacity: 1
160									}, {
161										duration: options.duration,
162										delay: j * options.delay,
163										easing: options.easing,
164										complete: function() {
165											if (options.autodestroy) $(this).children().unwrap();
166										}
167									});

168									break;
169								default:
170									$(this).velocity('stop').velocity({
171										translateX: 0,
172										translateY: 0,
173										opacity: 1
174									}, {
175										duration: options.duration,
176										delay: j * options.delay,
177										easing: options.easing,
178										complete: function() {
179											if (options.autodestroy) $(this).children().unwrap();
180										}
181									});
182							}
183						});
184						
185						param.isDone = true;
186					}
187				};
188				
189				if (options.autorun) methods.run(flowAnime[i]);
190			});
191
192			isFlowDefault = false;
193
194			return this;
195		},
196		run: function(fa) {
197			// 対象の指定がない場合、flowAnime(配列)に対して行う
198			if (fa) {
199				$(window).on({
200					'scroll.flowVox': fa
201				}).scroll();
202			} else {
203				$.each(flowAnime, function() {
204					$(window).on({
205						'scroll.flowVox': this
206					}).scroll();
207				});
208			}
209
210			return this;
211		},	
212		destroy: function() {
213			$(window).off('.flowVox');
214
215			return this.each(function(i) {
216				$(this).find('.animeObj').children().unwrap();
217			});
218		}
219	};
220	
221	$.fn[pluginName] = function(method) {
222		if ( methods[method] ) {
223			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
224		} else if (typeof method === 'object' || ! method) {
225			return methods.init.apply(this, arguments);
226		} else {
227			$.error('Method ' + method + ' does not exist on jQuery.' + pluginName);
228			return this;
229		}
230	};
231	
232}(jQuery));