https://lamyihua.github.io/assets/js/main.js

1/*
2	Massively by HTML5 UP
3	html5up.net | @ajlkn
4	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5*/
6
7(function($) {
8
9	skel.breakpoints({
10		xlarge:	'(max-width: 1680px)',
11		large:	'(max-width: 1280px)',
12		medium:	'(max-width: 980px)',
13		small:	'(max-width: 736px)',
14		xsmall:	'(max-width: 480px)',
15		xxsmall: '(max-width: 360px)'
16	});
17
18	/**
19	 * Applies parallax scrolling to an element's background image.
20	 * @return {jQuery} jQuery object.
21	 */
22	$.fn._parallax = function(intensity) {
23
24		var	$window = $(window),
25			$this = $(this);
26
27		if (this.length == 0 || intensity === 0)
28			return $this;
29
30		if (this.length > 1) {
31
32			for (var i=0; i < this.length; i++)
33				$(this[i])._parallax(intensity);
34
35			return $this;
36
37		}
38
39		if (!intensity)
40			intensity = 0.25;
41
42		$this.each(function() {
43
44			var $t = $(this),
45				$bg = $('<div class="bg"></div>').appendTo($t),
46				on, off;
47
48			on = function() {
49
50				$bg
51					.removeClass('fixed')
52					.css('transform', 'matrix(1,0,0,1,0,0)');
53
54				$window
55					.on('scroll._parallax', function() {
56
57						var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);
58
59						$bg.css('transform', 'matrix(1,0,0,1,0,' + (pos * intensity) + ')');
60
61					});
62
63			};
64
65			off = function() {
66
67				$bg
68					.addClass('fixed')
69					.css('transform', 'none');
70
71				$window
72					.off('scroll._parallax');
73
74			};
75
76			// Disable parallax on ..
77				if (skel.vars.browser == 'ie'		// IE
78				||	skel.vars.browser == 'edge'		// Edge
79				||	window.devicePixelRatio > 1		// Retina/HiDPI (= poor performance)
80				||	skel.vars.mobile)				// Mobile devices
81					off();
82
83			// Enable everywhere else.
84				else {
85
86					skel.on('!large -large', on);
87					skel.on('+large', off);
88
89				}
90
91		});
92
93		$window
94			.off('load._parallax resize._parallax')
95			.on('load._parallax resize._parallax', function() {
96				$window.trigger('scroll');
97			});
98
99		return $(this);
100
101	};
102
103	$(function() {
104
105		var	$window = $(window),
106			$body = $('body'),
107			$wrapper = $('#wrapper'),
108			$header = $('#header'),
109			$nav = $('#nav'),
110			$main = $('#main'),
111			$navPanelToggle, $navPanel, $navPanelInner;
112
113		// Disable animations/transitions until the page has loaded.
114			$window.on('load', function() {
115				window.setTimeout(function() {
116					$body.removeClass('is-loading');
117				}, 100);
118			});
119
120		// Prioritize "important" elements on medium.
121			skel.on('+medium -medium', function() {
122				$.prioritize(
123					'.important\\28 medium\\29',
124					skel.breakpoint('medium').active
125				);
126			});
127
128		// Scrolly.
129			$('.scrolly').scrolly();
130
131		// Background.
132			$wrapper._parallax(0.925);
133
134		// Nav Panel.
135
136			// Toggle.
137				$navPanelToggle = $(
138					'<a href="#navPanel" id="navPanelToggle">Menu</a>'
139				)
140					.appendTo($wrapper);
141
142				// Change toggle styling once we've scrolled past the header.
143					$header.scrollex({
144						bottom: '5vh',
145						enter: function() {
146							$navPanelToggle.removeClass('alt');
147						},
148						leave: function() {
149							$navPanelToggle.addClass('alt');
150						}
151					});
152
153			// Panel.
154				$navPanel = $(
155					'<div id="navPanel">' +
156						'<nav>' +
157						'</nav>' +
158						'<a href="#navPanel" class="close"></a>' +
159					'</div>'
160				)
161					.appendTo($body)
162					.panel({
163						delay: 500,
164						hideOnClick: true,
165						hideOnSwipe: true,
166						resetScroll: true,
167						resetForms: true,
168						side: 'right',
169						target: $body,
170						visibleClass: 'is-navPanel-visible'
171					});
172
173				// Get inner.
174					$navPanelInner = $navPanel.children('nav');
175
176				// Move nav content on breakpoint change.
177					var $navContent = $nav.children();
178
179					skel.on('!medium -medium', function() {
180
181						// NavPanel -> Nav.
182							$navContent.appendTo($nav);
183
184						// Flip icon classes.
185							$nav.find('.icons, .icon')
186								.removeClass('alt');
187
188					});
189
190					skel.on('+medium', function() {
191
192						// Nav -> NavPanel.
193						$navContent.appendTo($navPanelInner);
194
195						// Flip icon classes.
196							$navPanelInner.find('.icons, .icon')
197								.addClass('alt');
198
199					});
200
201				// Hack: Disable transitions on WP.
202					if (skel.vars.os == 'wp'
203					&&	skel.vars.osVersion < 10)
204						$navPanel
205							.css('transition', 'none');
206
207		// Intro.
208			var $intro = $('#intro');
209
210			if ($intro.length > 0) {
211
212				// Hack: Fix flex min-height on IE.
213					if (skel.vars.browser == 'ie') {
214						$window.on('resize.ie-intro-fix', function() {
215
216							var h = $intro.height();
217
218							if (h > $window.height())
219								$intro.css('height', 'auto');
220							else
221								$intro.css('height', h);
222
223						}).trigger('resize.ie-intro-fix');
224					}
225
226				// Hide intro on scroll (> small).
227					skel.on('!small -small', function() {
228
229						$main.unscrollex();
230
231						$main.scrollex({
232							mode: 'bottom',
233							top: '25vh',
234							bottom: '-50vh',
235							enter: function() {
236								$intro.addClass('hidden');
237							},
238							leave: function() {
239								$intro.removeClass('hidden');
240							}
241						});
242
243					});
244
245				// Hide intro on scroll (<= small).
246					skel.on('+small', function() {
247
248						$main.unscrollex();
249
250						$main.scrollex({
251							mode: 'middle',
252							top: '15vh',
253							bottom: '-15vh',
254							enter: function() {
255								$intro.addClass('hidden');
256							},
257							leave: function() {
258								$intro.removeClass('hidden');
259							}
260						});
261
262				});
263
264			}
265
266	});
267
268})(jQuery);