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

1/*
2	Landed 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	var	$window = $(window),
10		$body = $('body');
11
12	// Breakpoints.
13		breakpoints({
14			xlarge:   [ '1281px',  '1680px' ],
15			large:    [ '981px',   '1280px' ],
16			medium:   [ '737px',   '980px'  ],
17			small:    [ '481px',   '736px'  ],
18			xsmall:   [ null,      '480px'  ]
19		});
20
21	// Play initial animations on page load.
22		$window.on('load', function() {
23			window.setTimeout(function() {
24				$body.removeClass('is-preload');
25			}, 100);
26		});
27
28	// Touch mode.
29		if (browser.mobile)
30			$body.addClass('is-touch');
31
32	// Scrolly links.
33		$('.scrolly').scrolly({
34			speed: 2000
35		});
36
37	// Dropdowns.
38		$('#nav > ul').dropotron({
39			alignment: 'right',
40			hideDelay: 350
41		});
42
43	// Nav.
44
45		// Title Bar.
46			$(
47				'<div id="titleBar">' +
48					'<a href="#navPanel" class="toggle"></a>' +
49					'<span class="title">' + $('#logo').html() + '</span>' +
50				'</div>'
51			)
52				.appendTo($body);
53
54		// Panel.
55			$(
56				'<div id="navPanel">' +
57					'<nav>' +
58						$('#nav').navList() +
59					'</nav>' +
60				'</div>'
61			)
62				.appendTo($body)
63				.panel({
64					delay: 500,
65					hideOnClick: true,
66					hideOnSwipe: true,
67					resetScroll: true,
68					resetForms: true,
69					side: 'left',
70					target: $body,
71					visibleClass: 'navPanel-visible'
72				});
73
74	// Parallax.
75	// Disabled on IE (choppy scrolling) and mobile platforms (poor performance).
76		if (browser.name == 'ie'
77		||	browser.mobile) {
78
79			$.fn._parallax = function() {
80
81				return $(this);
82
83			};
84
85		}
86		else {
87
88			$.fn._parallax = function() {
89
90				$(this).each(function() {
91
92					var $this = $(this),
93						on, off;
94
95					on = function() {
96
97						$this
98							.css('background-position', 'center 0px');
99
100						$window
101							.on('scroll._parallax', function() {
102
103								var pos = parseInt($window.scrollTop()) - parseInt($this.position().top);
104
105								$this.css('background-position', 'center ' + (pos * -0.15) + 'px');
106
107							});
108
109					};
110
111					off = function() {
112
113						$this
114							.css('background-position', '');
115
116						$window
117							.off('scroll._parallax');
118
119					};
120
121					breakpoints.on('<=medium', off);
122					breakpoints.on('>medium', on);
123
124				});
125
126				return $(this);
127
128			};
129
130			$window
131				.on('load resize', function() {
132					$window.trigger('scroll');
133				});
134
135		}
136
137	// Spotlights.
138		var $spotlights = $('.spotlight');
139
140		$spotlights
141			._parallax()
142			.each(function() {
143
144				var $this = $(this),
145					on, off;
146
147				on = function() {
148
149					var top, bottom, mode;
150
151					// Use main <img>'s src as this spotlight's background.
152						$this.css('background-image', 'url("' + $this.find('.image.main > img').attr('src') + '")');
153
154					// Side-specific scrollex tweaks.
155						if ($this.hasClass('top')) {
156
157							mode = 'top';
158							top = '-20%';
159							bottom = 0;
160
161						}
162						else if ($this.hasClass('bottom')) {
163
164							mode = 'bottom-only';
165							top = 0;
166							bottom = '20%';
167
168						}
169						else {
170
171							mode = 'middle';
172							top = 0;
173							bottom = 0;
174
175						}
176
177					// Add scrollex.
178						$this.scrollex({
179							mode:		mode,
180							top:		top,
181							bottom:		bottom,
182							initialize:	function(t) { $this.addClass('inactive'); },
183							terminate:	function(t) { $this.removeClass('inactive'); },
184							enter:		function(t) { $this.removeClass('inactive'); },
185
186							// Uncomment the line below to "rewind" when this spotlight scrolls out of view.
187
188							//leave:	function(t) { $this.addClass('inactive'); },
189
190						});
191
192				};
193
194				off = function() {
195
196					// Clear spotlight's background.
197						$this.css('background-image', '');
198
199					// Remove scrollex.
200						$this.unscrollex();
201
202				};
203
204				breakpoints.on('<=medium', off);
205				breakpoints.on('>medium', on);
206
207			});
208
209	// Wrappers.
210		var $wrappers = $('.wrapper');
211
212		$wrappers
213			.each(function() {
214
215				var $this = $(this),
216					on, off;
217
218				on = function() {
219
220					$this.scrollex({
221						top:		250,
222						bottom:		0,
223						initialize:	function(t) { $this.addClass('inactive'); },
224						terminate:	function(t) { $this.removeClass('inactive'); },
225						enter:		function(t) { $this.removeClass('inactive'); },
226
227						// Uncomment the line below to "rewind" when this wrapper scrolls out of view.
228
229						//leave:	function(t) { $this.addClass('inactive'); },
230
231					});

232
233				};
234
235				off = function() {
236					$this.unscrollex();
237				};
238
239				breakpoints.on('<=medium', off);
240				breakpoints.on('>medium', on);
241
242			});
243
244	// Banner.
245		var $banner = $('#banner');
246
247		$banner
248			._parallax();
249
250})(jQuery);