4 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
9 var $window
= $(window
),
11 $wrapper
= $('#wrapper'),
12 $header
= $('#header'),
15 $navPanelToggle
, $navPanel
, $navPanelInner
;
19 default: ['1681px', null ],
20 xlarge
: ['1281px', '1680px' ],
21 large
: ['981px', '1280px' ],
22 medium
: ['737px', '980px' ],
23 small
: ['481px', '736px' ],
24 xsmall
: ['361px', '480px' ],
25 xxsmall
: [null, '360px' ]
29 * Applies parallax scrolling to an element's background image.
30 * @return {jQuery} jQuery object.
32 $.fn
._parallax = function(intensity
) {
34 var $window
= $(window
),
37 if (this.length
== 0 || intensity
=== 0)
40 if (this.length
> 1) {
42 for (var i
=0; i
< this.length
; i
++)
43 $(this[i
])._parallax(intensity
);
52 $this.each(function() {
55 $bg
= $('<div class="bg"></div>').appendTo($t
),
62 .css('transform', 'matrix(1,0,0,1,0,0)');
65 .on('scroll._parallax', function() {
67 var pos
= parseInt($window
.scrollTop()) - parseInt($t
.position().top
);
69 $bg
.css('transform', 'matrix(1,0,0,1,0,' + (pos
* intensity
) + ')');
79 .css('transform', 'none');
82 .off('scroll._parallax');
86 // Disable parallax on ..
87 if (browser
.name
== 'ie' // IE
88 || browser
.name
== 'edge' // Edge
89 || window
.devicePixelRatio
> 1 // Retina/HiDPI (= poor performance)
90 || browser
.mobile
) // Mobile devices
93 // Enable everywhere else.
96 breakpoints
.on('>large', on
);
97 breakpoints
.on('<=large', off
);
104 .off('load._parallax resize._parallax')
105 .on('load._parallax resize._parallax', function() {
106 $window
.trigger('scroll');
113 // Play initial animations on page load.
114 $window
.on('load', function() {
115 window
.setTimeout(function() {
116 $body
.removeClass('is-preload');
121 $('.scrolly').scrolly();
124 $wrapper
._parallax(0.925);
130 '<a href="#navPanel" id="navPanelToggle">Menu</a>'
134 // Change toggle styling once we've scrolled past the header.
138 $navPanelToggle
.removeClass('alt');
141 $navPanelToggle
.addClass('alt');
147 '<div id="navPanel">' +
150 '<a href="#navPanel" class="close"></a>' +
162 visibleClass
: 'is-navPanel-visible'
166 $navPanelInner
= $navPanel
.children('nav');
168 // Move nav content on breakpoint change.
169 var $navContent
= $nav
.children();
171 breakpoints
.on('>medium', function() {
174 $navContent
.appendTo($nav
);
176 // Flip icon classes.
177 $nav
.find('.icons, .icon')
182 breakpoints
.on('<=medium', function() {
185 $navContent
.appendTo($navPanelInner
);
187 // Flip icon classes.
188 $navPanelInner
.find('.icons, .icon')
193 // Hack: Disable transitions on WP.
194 if (browser
.os
== 'wp'
195 && browser
.osVersion
< 10)
197 .css('transition', 'none');
200 var $intro
= $('#intro');
202 if ($intro
.length
> 0) {
204 // Hack: Fix flex min-height on IE.
205 if (browser
.name
== 'ie') {
206 $window
.on('resize.ie-intro-fix', function() {
208 var h
= $intro
.height();
210 if (h
> $window
.height())
211 $intro
.css('height', 'auto');
213 $intro
.css('height', h
);
215 }).trigger('resize.ie-intro-fix');
218 // Hide intro on scroll (> small).
219 breakpoints
.on('>small', function() {
228 $intro
.addClass('hidden');
231 $intro
.removeClass('hidden');
237 // Hide intro on scroll (<= small).
238 breakpoints
.on('<=small', function() {
247 $intro
.addClass('hidden');
250 $intro
.removeClass('hidden');