added bg image to header. Fixed backtotop link and icons in home and footer.
[theme-danix.xyz.git] / static / js / main.js
CommitLineData
748286b5 1/*\r
2 Forty by HTML5 UP\r
3 html5up.net | @ajlkn\r
4 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
5*/\r
6\r
7(function($) {\r
8\r
9 var $window = $(window),\r
10 $body = $('body'),\r
11 $wrapper = $('#wrapper'),\r
12 $header = $('#header'),\r
b8ef5fe0 13 $btt = $('#backtotop'),\r
748286b5 14 $banner = $('#banner');\r
15\r
16 // Breakpoints.\r
17 breakpoints({\r
18 xlarge: ['1281px', '1680px' ],\r
19 large: ['981px', '1280px' ],\r
20 medium: ['737px', '980px' ],\r
21 small: ['481px', '736px' ],\r
22 xsmall: ['361px', '480px' ],\r
23 xxsmall: [null, '360px' ]\r
24 });\r
25\r
26 /**\r
27 * Applies parallax scrolling to an element's background image.\r
28 * @return {jQuery} jQuery object.\r
29 */\r
30 $.fn._parallax = (browser.name == 'ie' || browser.name == 'edge' || browser.mobile) ? function() { return $(this) } : function(intensity) {\r
31\r
32 var $window = $(window),\r
33 $this = $(this);\r
34\r
35 if (this.length == 0 || intensity === 0)\r
36 return $this;\r
37\r
38 if (this.length > 1) {\r
39\r
40 for (var i=0; i < this.length; i++)\r
41 $(this[i])._parallax(intensity);\r
42\r
43 return $this;\r
44\r
45 }\r
46\r
47 if (!intensity)\r
48 intensity = 0.25;\r
49\r
50 $this.each(function() {\r
51\r
52 var $t = $(this),\r
53 on, off;\r
54\r
55 on = function() {\r
56\r
57 $t.css('background-position', 'center 100%, center 100%, center 0px');\r
58\r
59 $window\r
60 .on('scroll._parallax', function() {\r
61\r
62 var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);\r
63\r
64 $t.css('background-position', 'center ' + (pos * (-1 * intensity)) + 'px');\r
65\r
66 });\r
67\r
68 };\r
69\r
70 off = function() {\r
71\r
72 $t\r
73 .css('background-position', '');\r
74\r
75 $window\r
76 .off('scroll._parallax');\r
77\r
78 };\r
79\r
80 breakpoints.on('<=medium', off);\r
81 breakpoints.on('>medium', on);\r
82\r
83 });\r
84\r
85 $window\r
86 .off('load._parallax resize._parallax')\r
87 .on('load._parallax resize._parallax', function() {\r
88 $window.trigger('scroll');\r
89 });\r
90\r
91 return $(this);\r
92\r
93 };\r
94\r
95 // Play initial animations on page load.\r
96 $window.on('load', function() {\r
97 window.setTimeout(function() {\r
98 $body.removeClass('is-preload');\r
99 }, 100);\r
100 });\r
101\r
102 // Clear transitioning state on unload/hide.\r
103 $window.on('unload pagehide', function() {\r
104 window.setTimeout(function() {\r
105 $('.is-transitioning').removeClass('is-transitioning');\r
106 }, 250);\r
107 });\r
108\r
109 // Fix: Enable IE-only tweaks.\r
110 if (browser.name == 'ie' || browser.name == 'edge')\r
111 $body.addClass('is-ie');\r
112\r
113 // Scrolly.\r
114 $('.scrolly').scrolly({\r
115 offset: function() {\r
116 return $header.height() - 2;\r
117 }\r
118 });\r
119\r
120 // Tiles.\r
121 var $tiles = $('.tiles > article');\r
122\r
123 $tiles.each(function() {\r
124\r
125 var $this = $(this),\r
126 $image = $this.find('.image'), $img = $image.find('img'),\r
127 $link = $this.find('.link'),\r
128 x;\r
129\r
130 // Image.\r
131\r
132 // Set image.\r
133 $this.css('background-image', 'url(' + $img.attr('src') + ')');\r
134\r
135 // Set position.\r
136 if (x = $img.data('position'))\r
137 $image.css('background-position', x);\r
138\r
139 // Hide original.\r
140 $image.hide();\r
141\r
142 // Link.\r
143 if ($link.length > 0) {\r
144\r
145 $x = $link.clone()\r
146 .text('')\r
147 .addClass('primary')\r
148 .appendTo($this);\r
149\r
150 $link = $link.add($x);\r
151\r
152 $link.on('click', function(event) {\r
153\r
154 var href = $link.attr('href');\r
155\r
156 // Prevent default.\r
157 event.stopPropagation();\r
158 event.preventDefault();\r
159\r
160 // Target blank?\r
161 if ($link.attr('target') == '_blank') {\r
162\r
163 // Open in new tab.\r
164 window.open(href);\r
165\r
166 }\r
167\r
168 // Otherwise ...\r
169 else {\r
170\r
171 // Start transitioning.\r
172 $this.addClass('is-transitioning');\r
173 $wrapper.addClass('is-transitioning');\r
174\r
175 // Redirect.\r
176 window.setTimeout(function() {\r
177 location.href = href;\r
178 }, 500);\r
179\r
180 }\r
181\r
182 });\r
183\r
184 }\r
185\r
186 });\r
187\r
188 // Header.\r
189 if ($banner.length > 0\r
190 && $header.hasClass('alt')) {\r
191\r
192 $window.on('resize', function() {\r
193 $window.trigger('scroll');\r
194 });\r
195\r
196 $window.on('load', function() {\r
197\r
198 $banner.scrollex({\r
199 bottom: $header.height() + 10,\r
200 terminate: function() { $header.removeClass('alt'); },\r
201 enter: function() { $header.addClass('alt'); },\r
202 leave: function() { $header.removeClass('alt'); $header.addClass('reveal'); }\r
203 });\r
204\r
205 window.setTimeout(function() {\r
206 $window.triggerHandler('scroll');\r
207 }, 100);\r
208\r
209 });\r
210\r
211 }\r
212\r
213 // Banner.\r
214 $banner.each(function() {\r
215\r
216 var $this = $(this),\r
217 $image = $this.find('.image'), $img = $image.find('img');\r
218\r
219 // Parallax.\r
220 $this._parallax(0.275);\r
221\r
222 // Image.\r
223 if ($image.length > 0) {\r
224\r
225 // Set image.\r
226 $this.css('background-image', 'url(' + $img.attr('src') + ')');\r
227\r
228 // Hide original.\r
229 $image.hide();\r
230\r
231 }\r
232\r
233 });\r
234\r
235 // Menu.\r
236 var $menu = $('#menu'),\r
237 $menuInner;\r
238\r
239 $menu.wrapInner('<div class="inner"></div>');\r
240 $menuInner = $menu.children('.inner');\r
241 $menu._locked = false;\r
242\r
243 $menu._lock = function() {\r
244\r
245 if ($menu._locked)\r
246 return false;\r
247\r
248 $menu._locked = true;\r
249\r
250 window.setTimeout(function() {\r
251 $menu._locked = false;\r
252 }, 350);\r
253\r
254 return true;\r
255\r
256 };\r
257\r
258 $menu._show = function() {\r
259\r
260 if ($menu._lock())\r
261 $body.addClass('is-menu-visible');\r
262\r
263 };\r
264\r
265 $menu._hide = function() {\r
266\r
267 if ($menu._lock())\r
268 $body.removeClass('is-menu-visible');\r
269\r
270 };\r
271\r
272 $menu._toggle = function() {\r
273\r
274 if ($menu._lock())\r
275 $body.toggleClass('is-menu-visible');\r
276\r
277 };\r
278\r
279 $menuInner\r
280 .on('click', function(event) {\r
281 event.stopPropagation();\r
282 })\r
283 .on('click', 'a', function(event) {\r
284\r
285 var href = $(this).attr('href');\r
286\r
287 event.preventDefault();\r
288 event.stopPropagation();\r
289\r
290 // Hide.\r
291 $menu._hide();\r
292\r
293 // Redirect.\r
294 window.setTimeout(function() {\r
295 window.location.href = href;\r
296 }, 250);\r
297\r
298 });\r
299\r
300 $menu\r
301 .appendTo($body)\r
302 .on('click', function(event) {\r
303\r
304 event.stopPropagation();\r
305 event.preventDefault();\r
306\r
307 $body.removeClass('is-menu-visible');\r
308\r
309 })\r
310 .append('<a class="close" href="#menu">Close</a>');\r
311\r
312 $body\r
313 .on('click', 'a[href="#menu"]', function(event) {\r
314\r
315 event.stopPropagation();\r
316 event.preventDefault();\r
317\r
318 // Toggle.\r
319 $menu._toggle();\r
320\r
321 })\r
322 .on('click', function(event) {\r
323\r
324 // Hide.\r
325 $menu._hide();\r
326\r
327 })\r
328 .on('keydown', function(event) {\r
329\r
330 // Hide on escape.\r
331 if (event.keyCode == 27)\r
332 $menu._hide();\r
333\r
334 });\r
335\r
b8ef5fe0 336 // backtotop\r
337 $(window).scroll( function(){\r
338 if( $(window).scrollTop() > 150 ){\r
339 $btt.removeClass("hidden");\r
340 } else {\r
341 $btt.addClass("hidden");\r
342 }\r
343 });\r
344\r
748286b5 345})(jQuery);