/*
Parallelism by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
(function($) {
var $window = $(window), $body = $('body'), $wrapper = $('#wrapper'), $main = $('#main'), settings = { // Keyboard shortcuts. keyboardShortcuts: { // If true, enables scrolling via keyboard shortcuts. enabled: true, // Sets the distance to scroll when using the left/right arrow keys. distance: 50 }, // Scroll wheel. scrollWheel: { // If true, enables scrolling via the scroll wheel. enabled: true, // Sets the scroll wheel factor. (Ideally) a value between 0 and 1 (lower = slower scroll, higher = faster scroll). factor: 1 }, // Scroll zones. scrollZones: { // If true, enables scrolling via scroll zones on the left/right edges of the scren. enabled: true, // Sets the speed at which the page scrolls when a scroll zone is active (higher = faster scroll, lower = slower scroll). speed: 15 } }; // Breakpoints. breakpoints({ xlarge: [ '1281px', '1680px' ], large: [ '981px', '1280px' ], medium: [ '737px', '980px' ], small: [ '481px', '736px' ], xsmall: [ null, '480px' ], }); // Tweaks/fixes. // Mobile: Revert to native scrolling. if (browser.mobile) { // Disable all scroll-assist features. settings.keyboardShortcuts.enabled = false; settings.scrollWheel.enabled = false; settings.scrollZones.enabled = false; // Re-enable overflow on main. $main.css('overflow-x', 'auto'); } // IE: Fix min-height/flexbox. if (browser.name == 'ie') $wrapper.css('height', '100vh'); // iOS: Compensate for address bar. if (browser.os == 'ios') $wrapper.css('min-height', 'calc(100vh - 30px)'); // Play initial animations on page load. $window.on('load', function() { window.setTimeout(function() { $body.removeClass('is-preload'); }, 100); }); // Items. // Assign a random "delay" class to each thumbnail item. $('.item.thumb').each(function() { $(this).addClass('delay-' + Math.floor((Math.random() * 6) + 1)); }); // IE: Fix thumbnail images. if (browser.name == 'ie') $('.item.thumb').each(function() { var $this = $(this), $img = $this.find('img'); $this .css('background-image', 'url(' + $img.attr('src') + ')') .css('background-size', 'cover') .css('background-position', 'center'); $img .css('opacity', '0'); }); // Poptrox. $main.poptrox({ onPopupOpen: function() { $body.addClass('is-poptrox-visible'); }, onPopupClose: function() { $body.removeClass('is-poptrox-visible'); }, overlayColor: '#1a1f2c', overlayOpacity: 0.75, popupCloserText: '', popupLoaderText: '', selector: '.item.thumb a.image', caption: function($a) { return $a.prev('h2').html(); }, usePopupDefaultStyling: false, usePopupCloser: false, usePopupCaption: true, usePopupNav: true, windowMargin: 50 }); breakpoints.on('>small', function() { $main[0]._poptrox.windowMargin = 50; }); breakpoints.on('<=small', function() { $main[0]._poptrox.windowMargin = 0; }); // Keyboard shortcuts. if (settings.keyboardShortcuts.enabled) (function() { $window // Keypress event. .on('keydown', function(event) { var scrolled = false; if ($body.hasClass('is-poptrox-visible')) return; switch (event.keyCode) { // Left arrow. case 37: $main.scrollLeft($main.scrollLeft() - settings.keyboardShortcuts.distance); scrolled = true; break; // Right arrow. case 39: $main.scrollLeft($main.scrollLeft() + settings.keyboardShortcuts.distance); scrolled = true; break; // Page Up. case 33: $main.scrollLeft($main.scrollLeft() - $window.width() + 100); scrolled = true; break; // Page Down, Space. case 34: case 32: $main.scrollLeft($main.scrollLeft() + $window.width() - 100); scrolled = true; break; // Home. case 36: $main.scrollLeft(0); scrolled = true; break; // End. case 35: $main.scrollLeft($main.width()); scrolled = true; break; } // Scrolled? if (scrolled) { // Prevent default. event.preventDefault(); event.stopPropagation(); // Stop link scroll. $main.stop(); } }); })(); // Scroll wheel. if (settings.scrollWheel.enabled) (function() { // Based on code by @miorel + @pieterv of Facebook (thanks guys :) // github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js var normalizeWheel = function(event) { var pixelStep = 10, lineHeight = 40, pageHeight = 800, sX = 0, sY = 0, pX = 0, pY = 0; // Legacy. if ('detail' in event) sY = event.detail; else if ('wheelDelta' in event) sY = event.wheelDelta / -120; else if ('wheelDeltaY' in event) sY = event.wheelDeltaY / -120; if ('wheelDeltaX' in event) sX = event.wheelDeltaX / -120; // Side scrolling on FF with DOMMouseScroll. if ('axis' in event && event.axis === event.HORIZONTAL_AXIS) { sX = sY; sY = 0; } // Calculate. pX = sX * pixelStep; pY = sY * pixelStep; if ('deltaY' in event) pY = event.deltaY; if ('deltaX' in event) pX = event.deltaX; if ((pX || pY) && event.deltaMode) { if (event.deltaMode == 1) { pX *= lineHeight; pY *= lineHeight; } else { pX *= pageHeight; pY *= pageHeight; } } // Fallback if spin cannot be determined. if (pX && !sX) sX = (pX < 1) ? -1 : 1; if (pY && !sY) sY = (pY < 1) ? -1 : 1; // Return. return { spinX: sX, spinY: sY, pixelX: pX, pixelY: pY }; }; // Wheel event. $body.on('wheel', function(event) { // Disable on <=small. if (breakpoints.active('<=small')) return; // Prevent default. event.preventDefault(); event.stopPropagation(); // Stop link scroll. $main.stop(); // Calculate delta, direction. var n = normalizeWheel(event.originalEvent), x = (n.pixelX != 0 ? n.pixelX : n.pixelY), delta = Math.min(Math.abs(x), 150) * settings.scrollWheel.factor, direction = x > 0 ? 1 : -1; // Scroll page. $main.scrollLeft($main.scrollLeft() + (delta * direction)); }); })(); // Scroll zones. if (settings.scrollZones.enabled) (function() { var $left = $('<div class="scrollZone left"></div>'), $right = $('<div class="scrollZone right"></div>'), $zones = $left.add($right), paused = false, intervalId = null, direction, activate = function(d) { // Disable on <=small. if (breakpoints.active('<=small')) return; // Paused? Bail. if (paused) return; // Stop link scroll. $main.stop(); // Set direction. direction = d; // Initialize interval. clearInterval(intervalId); intervalId = setInterval(function() { $main.scrollLeft($main.scrollLeft() + (settings.scrollZones.speed * direction)); }, 25); }, deactivate = function() { // Unpause. paused = false; // Clear interval. clearInterval(intervalId); }; $zones .appendTo($wrapper) .on('mouseleave mousedown', function(event) { deactivate(); }); $left .css('left', '0') .on('mouseenter', function(event) { activate(-1); }); $right .css('right', '0') .on('mouseenter', function(event) { activate(1); }); $body .on('---pauseScrollZone', function(event) { // Pause. paused = true; // Unpause after delay. setTimeout(function() { paused = false; }, 500); }); })();
})(jQuery);