static/js/main.js

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