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