assets/js/main.js

0001 /*

0002         Hielo by TEMPLATED

0003         templated.co @templatedco

0004         Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)

0005 */
0006
0007 var settings = {
0008
0009         banner: {
0010
0011                 // Indicators (= the clickable dots at the bottom).

0012                         indicators: true,
0013
0014                 // Transition speed (in ms)

0015                 // For timing purposes only. It *must* match the transition speed of "#banner > article".

0016                         speed: 1500,
0017
0018                 // Transition delay (in ms)

0019                         delay: 5000,
0020
0021                 // Parallax intensity (between 0 and 1; higher = more intense, lower = less intense; 0 = off)

0022                         parallax: 0.25
0023
0024         }
0025
0026 };
0027
0028 (function($) {
0029
0030         skel.breakpoints({
0031                 xlarge: '(max-width: 1680px)',
0032                 large:  '(max-width: 1280px)',
0033                 medium: '(max-width: 980px)',
0034                 small:  '(max-width: 736px)',
0035                 xsmall: '(max-width: 480px)'
0036         });
0037
0038         /**

0039          * Applies parallax scrolling to an element's background image.

0040          * @return {jQuery} jQuery object.

0041          */
0042         $.fn._parallax = (skel.vars.browser == 'ie' || skel.vars.mobile) ? function() { return $(this) } : function(intensity) {
0043
0044                 var     $window = $(window),
0045                         $this = $(this);
0046
0047                 if (this.length == 0 || intensity === 0)
0048                         return $this;
0049
0050                 if (this.length > 1) {
0051
0052                         for (var i=0; i < this.length; i++)
0053                                 $(this[i])._parallax(intensity);
0054
0055                         return $this;
0056
0057                 }
0058
0059                 if (!intensity)
0060                         intensity = 0.25;
0061
0062                 $this.each(function() {
0063
0064                         var $t = $(this),
0065                                 on, off;
0066
0067                         on = function() {
0068
0069                                 $t.css('background-position', 'center 100%, center 100%, center 0px');
0070
0071                                 $window
0072                                         .on('scroll._parallax', function() {
0073
0074                                                 var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);
0075
0076                                                 $t.css('background-position', 'center ' + (pos * (-1 * intensity)) + 'px');
0077
0078                                         });
0079
0080                         };
0081
0082                         off = function() {
0083
0084                                 $t
0085                                         .css('background-position', '');
0086
0087                                 $window
0088                                         .off('scroll._parallax');
0089
0090                         };
0091
0092                         skel.on('change', function() {
0093
0094                                 if (skel.breakpoint('medium').active)
0095                                         (off)();
0096                                 else
0097                                         (on)();
0098
0099                         });
0100
0101                 });
0102
0103                 $window
0104                         .off('load._parallax resize._parallax')
0105                         .on('load._parallax resize._parallax', function() {
0106                                 $window.trigger('scroll');
0107                         });
0108
0109                 return $(this);
0110
0111         };
0112
0113         /**

0114          * Custom banner slider for Slate.

0115          * @return {jQuery} jQuery object.

0116          */
0117         $.fn._slider = function(options) {
0118
0119                 var     $window = $(window),
0120                         $this = $(this);
0121
0122                 if (this.length == 0)
0123                         return $this;
0124
0125                 if (this.length > 1) {
0126
0127                         for (var i=0; i < this.length; i++)
0128                                 $(this[i])._slider(options);
0129
0130                         return $this;
0131
0132                 }
0133
0134                 // Vars.

0135                         var     current = 0, pos = 0, lastPos = 0,
0136                                 slides = [], indicators = [],
0137                                 $indicators,
0138                                 $slides = $this.children('article'),
0139                                 intervalId,
0140                                 isLocked = false,
0141                                 i = 0;
0142
0143                 // Turn off indicators if we only have one slide.

0144                         if ($slides.length == 1)
0145                                 options.indicators = false;
0146
0147                 // Functions.

0148                         $this._switchTo = function(x, stop) {
0149
0150                                 if (isLocked || pos == x)
0151                                         return;
0152
0153                                 isLocked = true;
0154
0155                                 if (stop)
0156                                         window.clearInterval(intervalId);
0157
0158                                 // Update positions.

0159                                         lastPos = pos;
0160                                         pos = x;
0161
0162                                 // Hide last slide.

0163                                         slides[lastPos].removeClass('top');
0164
0165                                         if (options.indicators)
0166                                                 indicators[lastPos].removeClass('visible');
0167
0168                                 // Show new slide.

0169                                         slides[pos].addClass('visible').addClass('top');
0170
0171                                         if (options.indicators)
0172                                                 indicators[pos].addClass('visible');
0173
0174                                 // Finish hiding last slide after a short delay.

0175                                         window.setTimeout(function() {
0176
0177                                                 slides[lastPos].addClass('instant').removeClass('visible');
0178
0179                                                 window.setTimeout(function() {
0180
0181                                                         slides[lastPos].removeClass('instant');
0182                                                         isLocked = false;
0183
0184                                                 }, 100);
0185
0186                                         }, options.speed);
0187
0188                         };
0189
0190                 // Indicators.

0191                         if (options.indicators)
0192                                 $indicators = $('<ul class="indicators"></ul>').appendTo($this);
0193
0194                 // Slides.

0195                         $slides
0196                                 .each(function() {
0197
0198                                         var $slide = $(this),
0199                                                 $img = $slide.find('img');
0200
0201                                         // Slide.

0202                                                 $slide
0203                                                         .css('background-image', 'url("' + $img.attr('src') + '")')
0204                                                         .css('background-position', ($slide.data('position') ? $slide.data('position') : 'center'));
0205
0206                                         // Add to slides.

0207                                                 slides.push($slide);
0208
0209                                         // Indicators.

0210                                                 if (options.indicators) {
0211
0212                                                         var $indicator_li = $('<li>' + i + '</li>').appendTo($indicators);
0213
0214                                                         // Indicator.

0215                                                                 $indicator_li
0216                                                                         .data('index', i)
0217                                                                         .on('click', function() {
0218                                                                                 $this._switchTo($(this).data('index'), true);
0219                                                                         });
0220
0221                                                         // Add to indicators.

0222                                                                 indicators.push($indicator_li);
0223
0224                                                 }
0225
0226                                         i++;
0227
0228                                 })
0229                                 ._parallax(options.parallax);
0230
0231                 // Initial slide.

0232                         slides[pos].addClass('visible').addClass('top');
0233
0234                         if (options.indicators)
0235                                 indicators[pos].addClass('visible');
0236
0237                 // Bail if we only have a single slide.

0238                         if (slides.length == 1)
0239                                 return;
0240
0241                 // Main loop.

0242                         intervalId = window.setInterval(function() {
0243
0244                                 current++;
0245
0246                                 if (current >= slides.length)
0247                                         current = 0;
0248
0249                                 $this._switchTo(current);
0250
0251                         }, options.delay);
0252
0253         };
0254
0255         $(function() {
0256
0257                 var     $window         = $(window),
0258                         $body           = $('body'),
0259                         $header         = $('#header'),
0260                         $banner         = $('.banner');
0261
0262                 // Disable animations/transitions until the page has loaded.

0263                         $body.addClass('is-loading');
0264
0265                         $window.on('load', function() {
0266                                 window.setTimeout(function() {
0267                                         $body.removeClass('is-loading');
0268                                 }, 100);
0269                         });
0270
0271                 // Prioritize "important" elements on medium.

0272                         skel.on('+medium -medium', function() {
0273                                 $.prioritize(
0274                                         '.important\\28 medium\\29',
0275                                         skel.breakpoint('medium').active
0276                                 );
0277                         });
0278
0279                 // Banner.

0280                         $banner._slider(settings.banner);
0281
0282                 // Menu.

0283                         $('#menu')
0284                                 .append('<a href="#menu" class="close"></a>')
0285                                 .appendTo($body)
0286                                 .panel({
0287                                         delay: 500,
0288                                         hideOnClick: true,
0289                                         hideOnSwipe: true,
0290                                         resetScroll: true,
0291                                         resetForms: true,
0292                                         side: 'right'
0293                                 });
0294
0295                 // Header.

0296                         if (skel.vars.IEVersion < 9)
0297                                 $header.removeClass('alt');
0298
0299                         if ($banner.length > 0
0300                         &&      $header.hasClass('alt')) {
0301
0302                                 $window.on('resize', function() { $window.trigger('scroll'); });
0303
0304                                 $banner.scrollex({
0305                                         bottom:         $header.outerHeight(),
0306                                         terminate:      function() { $header.removeClass('alt'); },
0307                                         enter:          function() { $header.addClass('alt'); },
0308                                         leave:          function() { $header.removeClass('alt'); $header.addClass('reveal'); }
0309                                 });
0310
0311                         }
0312
0313         });
0314
0315 })(jQuery);