616 lines
17 KiB
JavaScript
Executable file
616 lines
17 KiB
JavaScript
Executable file
/*
|
|
Parallelism by HTML5 UP
|
|
html5up.net | @n33co
|
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
*/
|
|
|
|
var parallelism = (function($) { var _ = {
|
|
|
|
/******************************/
|
|
/* Properties */
|
|
/******************************/
|
|
|
|
// Settings
|
|
settings: {
|
|
|
|
// Popup overlay color.
|
|
popupOverlayColor: '#1a1f2c',
|
|
|
|
// Popup overlay opacity.
|
|
popupOverlayOpacity: 0.75,
|
|
|
|
// Mobile only.
|
|
|
|
// If true, mobile mode will get some automatic styling.
|
|
autoStyleMobile: true,
|
|
|
|
// Desktop only.
|
|
|
|
// If true, reel will be vertically centered.
|
|
centerVertically: true,
|
|
|
|
// Delay (in ms) before showing the reel.
|
|
introDelay: 600,
|
|
|
|
// Speed (in ms) at which to fade in reel.
|
|
introSpeed: 750,
|
|
|
|
// Height (in px) of items.
|
|
itemHeight: 240,
|
|
|
|
// Default width (in px) of width.
|
|
itemWidth: 300,
|
|
|
|
// Margin (in px) to preserve at the bottom of the viewport.
|
|
marginBottom: 0,
|
|
|
|
// Margin (in px) to preserve at the top of the viewport.
|
|
marginTop: 0,
|
|
|
|
// Nudge the reel by this value (in px) after it's been vertically centered.
|
|
verticalNudge: 0,
|
|
|
|
// Maximum number of rows.
|
|
maxRows: 5,
|
|
|
|
// Minimum number of rows.
|
|
minRows: 1,
|
|
|
|
// Padding (in px) between items (0 = no padding).
|
|
padding: 5,
|
|
|
|
// Padding color.
|
|
paddingColor: '#fff',
|
|
|
|
// If true, reel scroll will reset on page refresh.
|
|
resetScroll: true,
|
|
|
|
// Scales the scroll delta (1 = normal, 2 = double, 0.5 = half, etc.).
|
|
scrollFactor: 1,
|
|
|
|
// Scroll amount when using keys.
|
|
scrollKeyAmount: 50,
|
|
|
|
// Determines where scrollwheel events should be captured ('window' or 'reel').
|
|
scrollWheelTarget: 'reel',
|
|
|
|
// Scroll amount when using scroll zones.
|
|
scrollZoneAmount: 10,
|
|
|
|
// Time (in ms) to wait between scrolls when the cursor is in a scroll zone.
|
|
scrollZoneDelay: 20,
|
|
|
|
// Width of scroll zones.
|
|
scrollZoneWidth: 40,
|
|
|
|
// Delay (in ms) before showing thumbnails.
|
|
thumbDelay: 1200,
|
|
|
|
// Spread (in ms) to randomly stagger thumbnails (0 = don't stagger).
|
|
thumbDelaySpread: 1500,
|
|
|
|
// Speed (in ms) at which to fade in thumbnails.
|
|
thumbSpeed: 750,
|
|
|
|
// If true, page will blur slightly when the popup is displayed (webkit only).
|
|
useBlurFilter: false,
|
|
|
|
// If true, the left/right arrow keys will scroll the reel.
|
|
useScrollKeys: true,
|
|
|
|
// If true, moving the cursor to the leftmost/rightmost edges of the reel will scroll it.
|
|
useScrollZones: true
|
|
|
|
},
|
|
|
|
// Touch device?
|
|
isTouch: false,
|
|
|
|
// IE version.
|
|
IEVersion: 99,
|
|
|
|
// Object cache.
|
|
objects: {},
|
|
|
|
/******************************/
|
|
/* Methods */
|
|
/******************************/
|
|
|
|
// Initializes desktop mode.
|
|
initDesktop: function() {
|
|
|
|
var $SZ = $(''), $SZLeft, $SZRight;
|
|
|
|
var windowHeight = _.objects.window.height() - _.settings.marginTop - _.settings.marginBottom,
|
|
windowWidth = _.objects.window.width(),
|
|
itemHeight = _.settings.itemHeight,
|
|
itemCount = _.objects.items.length,
|
|
itemsWidth = 0,
|
|
rows = 0,
|
|
rowWidth,
|
|
SZIntervalId;
|
|
|
|
// Window.
|
|
_.objects.window._parallelism_update = function() {
|
|
var i, j, x, y, t;
|
|
console.log(itemsWidth,itemHeight)
|
|
|
|
// Calculate number of rows we can fit on the screen.
|
|
rows = Math.min(Math.max(Math.floor(windowHeight / itemHeight) - 1, 1), _.settings.maxRows);
|
|
|
|
// Reduce row count if we have more than we need.
|
|
while ( rows > _.settings.minRows && (itemsWidth / rows) < windowWidth )
|
|
rows--;
|
|
|
|
// Get average row width.
|
|
rowWidth = Math.ceil( (itemsWidth / rows) * 1.1 );
|
|
|
|
// Resize items.
|
|
var w = 0, iw;
|
|
var rowStart = 0, rowPos = 0, rowEnded = false;
|
|
|
|
_.objects.items.each(function(i) {
|
|
var $item = $(this);
|
|
|
|
iw = $item.data('width');
|
|
|
|
// Determine end row conditions.
|
|
|
|
// Current item would push us past the row width.
|
|
if (w + iw >= rowWidth) {
|
|
|
|
rowEnded = true;
|
|
rowEnd = i - 1;
|
|
|
|
}
|
|
|
|
// Current item is the last item.
|
|
else if (i + 1 >= itemCount) {
|
|
|
|
w += iw;
|
|
rowEnded = true;
|
|
rowEnd = i;
|
|
|
|
}
|
|
|
|
// Did the row end?
|
|
if (rowEnded) {
|
|
|
|
var pt = 0;
|
|
|
|
// Rescale the row's items.
|
|
_.objects.items.slice(rowStart, rowEnd + 1).each(function(j) {
|
|
var $item = $(this);
|
|
var p = (($item.data('width') / w) * 100.00);
|
|
|
|
if (pt + p > 100.00
|
|
|| ( (rowStart + j) == rowEnd && pt + p < 100.00))
|
|
p = 100.00 - pt;
|
|
|
|
$item.css('width', p + '%');
|
|
pt += p;
|
|
|
|
});
|
|
|
|
w = 0;
|
|
rowStart = i;
|
|
rowPos++;
|
|
rowEnded = false;
|
|
|
|
}
|
|
|
|
w += iw;
|
|
|
|
});
|
|
|
|
// Resize reel.
|
|
_.objects.reel
|
|
.css('height', (itemHeight * rows) + (_.settings.padding * 2))
|
|
.css('width', rowWidth);
|
|
|
|
// Reposition main (if applicable).
|
|
_.objects.main
|
|
.css('height', (itemHeight * rows) + (_.settings.padding * 2));
|
|
|
|
if (_.settings.centerVertically)
|
|
_.objects.main
|
|
.css('top', '50%')
|
|
.css('margin-top', (-1 * (_.objects.main.outerHeight() / 2)) + _.settings.verticalNudge);
|
|
|
|
// Resize/reposition SZs.
|
|
window.setTimeout(function() {
|
|
|
|
$SZ
|
|
.css('height', _.objects.main.outerHeight())
|
|
.css('top', _.objects.main.offset().top);
|
|
|
|
}, _.settings.introDelay);
|
|
|
|
};
|
|
|
|
_.objects.window.resize(function() {
|
|
|
|
// Update window dimensions.
|
|
windowWidth = _.objects.window.width();
|
|
windowHeight = _.objects.window.height() - _.settings.marginTop - _.settings.marginBottom;
|
|
|
|
// Row count changed? Re-update.
|
|
if (Math.max(Math.floor(windowHeight / itemHeight) - 1, 1) != rows)
|
|
_.objects.window._parallelism_update();
|
|
|
|
// Update scroll zones.
|
|
$SZ._parallelism_update();
|
|
|
|
});
|
|
|
|
// Reel.
|
|
_.objects.reel
|
|
.css('overflow-y', 'hidden')
|
|
.css('margin', '0 auto')
|
|
.css('border', 'solid ' + _.settings.padding + 'px ' + _.settings.paddingColor)
|
|
.css('box-shadow', '0 0 0 ' + _.settings.padding + 'px ' + _.settings.paddingColor);
|
|
|
|
if (_.IEVersion < 9)
|
|
_.objects.reel.show();
|
|
else if (_.IEVersion < 10) {
|
|
|
|
_.objects.reel.fadeTo(0,0.0001);
|
|
|
|
window.setTimeout(function() {
|
|
_.objects.reel.fadeTo(_.settings.introSpeed, 1);
|
|
}, _.settings.introDelay);
|
|
|
|
}
|
|
else {
|
|
|
|
_.objects.reel.css('opacity', 0);
|
|
|
|
window.setTimeout(function() {
|
|
_.objects.reel
|
|
.h5u_xcss('transition', 'opacity ' + (_.settings.introSpeed / 1000.00) + 's ease-in-out')
|
|
.css('opacity', 1);
|
|
}, _.settings.introDelay);
|
|
|
|
}
|
|
|
|
// Items.
|
|
_.objects.items
|
|
.css('box-shadow', '0px 0px 0px ' + _.settings.padding + 'px ' + _.settings.paddingColor)
|
|
.css('border', 'solid ' + _.settings.padding + 'px ' + _.settings.paddingColor);
|
|
|
|
_.objects.items.each(function(i) {
|
|
|
|
var $item = $(this), $img = $item.find('img');
|
|
var w, h;
|
|
|
|
w = parseInt($item.data('width'));
|
|
|
|
if (!w)
|
|
w = _.settings.itemWidth;
|
|
|
|
h = parseInt($item.data('height'));
|
|
|
|
if (!h)
|
|
h = _.settings.itemHeight;
|
|
|
|
// Add to total width.
|
|
itemsWidth += w;
|
|
|
|
// Item.
|
|
$item
|
|
.css('position', 'relative')
|
|
.css('width', w)
|
|
.css('height', h);
|
|
|
|
// Image?
|
|
if ($img.length > 0) {
|
|
|
|
var $itemInner, $h2;
|
|
|
|
// img.
|
|
$img
|
|
.css('position', 'absolute')
|
|
.css('width', '100%')
|
|
.css('height', 'auto')
|
|
.css('min-height', '100%')
|
|
.css('top', 0)
|
|
.css('left', 0)
|
|
//.attr('title', $item.text());
|
|
|
|
// inner (for fade effect).
|
|
$item.wrapInner('<div class="inner" />');
|
|
$itemInner = $item.children('.inner');
|
|
$itemInner
|
|
.css('position', 'relative')
|
|
.css('display', 'block')
|
|
.css('-webkit-backface-visibility', 'hidden')
|
|
.css('width', '100%')
|
|
.css('height', '100%');
|
|
|
|
if (_.IEVersion < 9)
|
|
$itemInner.show();
|
|
else if (_.IEVersion < 10) {
|
|
|
|
$itemInner.hide();
|
|
|
|
$img
|
|
.load(function() {
|
|
window.setTimeout(function() {
|
|
$itemInner.fadeIn(_.settings.thumbSpeed);
|
|
}, _.settings.thumbDelay + Math.floor(Math.random() * _.settings.thumbDelaySpread));
|
|
});
|
|
|
|
}
|
|
else {
|
|
|
|
$itemInner.css('opacity', 0);
|
|
|
|
$img
|
|
.load(function() {
|
|
$itemInner.h5u_xcss('transition', 'opacity ' + (_.settings.thumbSpeed / 1000.00) + 's ease-in-out');
|
|
|
|
window.setTimeout(function() {
|
|
$itemInner.css('opacity', 1);
|
|
}, _.settings.thumbDelay + Math.floor(Math.random() * _.settings.thumbDelaySpread));
|
|
});
|
|
|
|
}
|
|
|
|
$img.attr('src', $img.attr('src'));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// Main.
|
|
if (_.isTouch)
|
|
_.objects.main
|
|
.css('overflow-x', 'auto')
|
|
.css('overflow-y', 'hidden')
|
|
.h5u_xcss('overflow-scrolling', 'touch');
|
|
else
|
|
_.objects.main.css('overflow', 'hidden');
|
|
|
|
// Scrolling.
|
|
|
|
// Scroll Wheel.
|
|
|
|
if (_.IEVersion < 9)
|
|
_.objects.main.css('overflow-x', 'scroll');
|
|
else {
|
|
|
|
var scrollHandler = function(e) {
|
|
var delta = (e.detail ? e.detail * -10 : e.wheelDelta) * _.settings.scrollFactor;
|
|
_.objects.main.scrollLeft( _.objects.main.scrollLeft() - delta );
|
|
$SZ._parallelism_update();
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
};
|
|
|
|
var st;
|
|
|
|
if (_.settings.scrollWheelTarget == 'reel')
|
|
st = _.objects.main[0];
|
|
else
|
|
st = _.objects.window[0];
|
|
|
|
st.addEventListener('DOMMouseScroll', scrollHandler, false);
|
|
st.addEventListener('mousewheel', scrollHandler, false);
|
|
|
|
}
|
|
|
|
if (_.settings.resetScroll)
|
|
window.setTimeout(function() {
|
|
_.objects.main.scrollLeft(0);
|
|
}, 0);
|
|
|
|
// Scroll Zones.
|
|
if (!_.isTouch && _.settings.useScrollZones) {
|
|
|
|
_.objects.body.append('<div class="SZRight" style="right: 0;" />');
|
|
_.objects.body.append('<div class="SZLeft" style="left: 0;" />');
|
|
|
|
$SZLeft = _.objects.body.children('.SZLeft');
|
|
$SZRight = _.objects.body.children('.SZRight');
|
|
$SZ = $SZLeft.add($SZRight);
|
|
|
|
$SZ
|
|
.css('position', 'fixed')
|
|
.css('width', _.settings.scrollZoneWidth)
|
|
.css('height', 100)
|
|
.css('z-index', 100)
|
|
.css('background', 'rgba(255,255,255,0)') // Required due to a weird IE bug (affects <=10)
|
|
.css('top', 0);
|
|
|
|
$SZ._parallelism_update = function() {
|
|
|
|
if (_.objects.main.scrollLeft() == 0)
|
|
$SZLeft.hide();
|
|
else
|
|
$SZLeft.show();
|
|
|
|
if (_.objects.main.scrollLeft() + $(window).width() >= _.objects.reel.outerWidth())
|
|
$SZRight.hide();
|
|
else
|
|
$SZRight.show();
|
|
|
|
};
|
|
|
|
$SZRight.bind('mouseenter', function(e) {
|
|
|
|
SZIntervalId = window.setInterval(function() {
|
|
_.objects.main.scrollLeft( _.objects.main.scrollLeft() + (_.settings.scrollZoneAmount * _.settings.scrollFactor) );
|
|
$SZ._parallelism_update();
|
|
}, _.settings.scrollZoneDelay);
|
|
return false;
|
|
|
|
});
|
|
|
|
$SZLeft.bind('mouseenter', function(e) {
|
|
|
|
SZIntervalId = window.setInterval(function() {
|
|
_.objects.main.scrollLeft( _.objects.main.scrollLeft() - (_.settings.scrollZoneAmount * _.settings.scrollFactor) );
|
|
$SZ._parallelism_update();
|
|
}, _.settings.scrollZoneDelay);
|
|
return false;
|
|
|
|
});
|
|
|
|
$SZ.bind('mouseleave', function(e) {
|
|
window.clearInterval(SZIntervalId);
|
|
});
|
|
|
|
}
|
|
else
|
|
$SZ._parallelism_update = function() {};
|
|
|
|
// Scroll Keys.
|
|
if (_.settings.useScrollKeys) {
|
|
|
|
_.objects.window.keydown(function(e) {
|
|
if ($('.poptrox-popup').is(':visible'))
|
|
return;
|
|
|
|
switch (e.keyCode)
|
|
{
|
|
case 39:
|
|
window.clearInterval(SZIntervalId);
|
|
_.objects.main.scrollLeft( _.objects.main.scrollLeft() + (_.settings.scrollKeyAmount * _.settings.scrollFactor) );
|
|
$SZ._parallelism_update();
|
|
return false;
|
|
|
|
case 37:
|
|
window.clearInterval(SZIntervalId);
|
|
_.objects.main.scrollLeft( _.objects.main.scrollLeft() - (_.settings.scrollKeyAmount * _.settings.scrollFactor) );
|
|
$SZ._parallelism_update();
|
|
return false;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
// Poptrox.
|
|
_.objects.reel.poptrox({
|
|
onPopupClose: (_.settings.useBlurFilter ? (function() { _.objects.wrapper.removeClass('overlayed'); }) : null),
|
|
onPopupOpen: (_.settings.useBlurFilter ? (function() { _.objects.wrapper.addClass('overlayed'); }) : null),
|
|
overlayColor: _.settings.popupOverlayColor,
|
|
overlayOpacity: _.settings.popupOverlayOpacity,
|
|
popupCloserText: '',
|
|
popupLoaderText: 'loading',
|
|
selector: '.thumb a',
|
|
usePopupCaption: true,
|
|
usePopupCloser: false,
|
|
usePopupDefaultStyling: false,
|
|
usePopupNav: true
|
|
});
|
|
|
|
// Trigger resize event.
|
|
_.objects.window.trigger('resize');
|
|
|
|
},
|
|
|
|
// Initializes mobile mode.
|
|
initMobile: function() {
|
|
|
|
// Auto styling?
|
|
if (_.settings.autoStyleMobile) {
|
|
|
|
// Items.
|
|
_.objects.items
|
|
.css('border', 'solid ' + Math.ceil(_.settings.padding / 2) + 'px ' + _.settings.paddingColor);
|
|
|
|
_.objects.items.filter('.thumb')
|
|
.css('margin-top', (-1 * Math.ceil(_.settings.padding / 2)) + 'px')
|
|
.filter(':nth-child(2n)')
|
|
.css('border-right', 0);
|
|
|
|
}
|
|
|
|
// Items.
|
|
_.objects.items.each(function() {
|
|
|
|
var $item = $(this), $img = $item.find('img');
|
|
|
|
$img
|
|
.css('opacity', 0);
|
|
|
|
$item
|
|
.css('background-image', 'url("' + $img.attr('src') + '")')
|
|
.css('background-position', 'center center')
|
|
.css('background-size', 'cover');
|
|
|
|
|
|
});
|
|
|
|
// Poptrox.
|
|
_.objects.reel.poptrox({
|
|
onPopupClose: (_.settings.useBlurFilter ? (function() { _.objects.wrapper.removeClass('overlayed'); }) : null),
|
|
onPopupOpen: (_.settings.useBlurFilter ? (function() { _.objects.wrapper.addClass('overlayed'); }) : null),
|
|
overlayColor: _.settings.popupOverlayColor,
|
|
overlayOpacity: _.settings.popupOverlayOpacity,
|
|
popupSpeed: 0,
|
|
selector: '.thumb a',
|
|
useBodyOverflow: false,
|
|
usePopupCaption: false,
|
|
usePopupCloser: false,
|
|
usePopupDefaultStyling: false,
|
|
usePopupLoader: false,
|
|
usePopupNav: false,
|
|
windowMargin: 0
|
|
});
|
|
|
|
},
|
|
|
|
// Main init method
|
|
init: function() {
|
|
|
|
// Skel.
|
|
skel.init({
|
|
reset: 'full',
|
|
prefix: '/static/css/style',
|
|
breakpoints: {
|
|
global: { range: '*', containers: 1200, grid: {gutters: 5} },
|
|
desktop: { range: '641-', containers: 600, grid: {gutters: 5}, viewport: { width: 1280, scalable: false } },
|
|
mobile: { range: '-640', containers: '100%', grid: {gutters: 5}, viewport: { scalable: false } }
|
|
}
|
|
});
|
|
|
|
_.isTouch = skel.vars.isTouch;
|
|
_.IEVersion = skel.vars.IEVersion;
|
|
|
|
// jQuery.
|
|
$.fn.h5u_xcss = function(k, v) {
|
|
return $(this)
|
|
.css('-webkit-' + k, v)
|
|
.css('-moz-' + k, v)
|
|
.css('-o-' + k, v)
|
|
.css('-ms-' + k, v)
|
|
.css(k, v);
|
|
};
|
|
|
|
$(function() {
|
|
|
|
// Objects.
|
|
_.objects.window = $(window),
|
|
_.objects.wrapper = $('#wrapper'),
|
|
_.objects.body = $('body'),
|
|
_.objects.main = $('#main'),
|
|
_.objects.reel = $('#reel'),
|
|
_.objects.items = _.objects.main.find('.item');
|
|
|
|
// Mode.
|
|
if (skel.isActive('mobile'))
|
|
_.initMobile();
|
|
else
|
|
_.initDesktop();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}; return _; })(jQuery);
|
|
|
|
parallelism.init();
|