diff options
Diffstat (limited to 'assets/js/main.js')
| -rw-r--r-- | assets/js/main.js | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..49f44aa --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,219 @@ +/* + Big Picture by Pixelarity + pixelarity.com | hello@pixelarity.com + License: pixelarity.com/license +*/ + +(function($) { + + var $window = $(window), + $body = $('body'), + $header = $('#header'), + $all = $body.add($header); + + // Breakpoints. + breakpoints({ + xxlarge: [ '1681px', '1920px' ], + xlarge: [ '1281px', '1680px' ], + large: [ '1001px', '1280px' ], + medium: [ '737px', '1000px' ], + small: [ '481px', '736px' ], + xsmall: [ null, '480px' ] + }); + + // Play initial animations on page load. + $window.on('load', function() { + setTimeout(function() { + $body.removeClass('is-preload'); + }, 100); + }); + + // Touch mode. + if (browser.mobile) + $body.addClass('is-touch'); + else { + + breakpoints.on('<=small', function() { + $body.addClass('is-touch'); + }); + + breakpoints.on('>small', function() { + $body.removeClass('is-touch'); + }); + + } + + // Fix: IE flexbox fix. + if (browser.name == 'ie') { + + var $main = $('.main.fullscreen'), + IEResizeTimeout; + + $window + .on('resize.ie-flexbox-fix', function() { + + clearTimeout(IEResizeTimeout); + + IEResizeTimeout = setTimeout(function() { + + var wh = $window.height(); + + $main.each(function() { + + var $this = $(this); + + $this.css('height', ''); + + if ($this.height() <= wh) + $this.css('height', (wh - 50) + 'px'); + + }); + + }); + + }) + .triggerHandler('resize.ie-flexbox-fix'); + + } + + // Gallery. + $window.on('load', function() { + + var $gallery = $('.gallery'); + + $gallery.poptrox({ + baseZIndex: 10001, + useBodyOverflow: false, + usePopupEasyClose: false, + overlayColor: '#1f2328', + overlayOpacity: 0.65, + usePopupDefaultStyling: false, + usePopupCaption: true, + popupLoaderText: '', + windowMargin: 50, + usePopupNav: true + }); + + // Hack: Adjust margins when 'small' activates. + breakpoints.on('>small', function() { + $gallery.each(function() { + $(this)[0]._poptrox.windowMargin = 50; + }); + }); + + breakpoints.on('<=small', function() { + $gallery.each(function() { + $(this)[0]._poptrox.windowMargin = 5; + }); + }); + + }); + + // Section transitions. + if (browser.canUse('transition')) { + + var on = function() { + + // Galleries. + $('.gallery') + .scrollex({ + top: '30vh', + bottom: '30vh', + delay: 50, + initialize: function() { $(this).addClass('inactive'); }, + terminate: function() { $(this).removeClass('inactive'); }, + enter: function() { $(this).removeClass('inactive'); }, + leave: function() { $(this).addClass('inactive'); } + }); + + // Generic sections. + $('.main.style1') + .scrollex({ + mode: 'middle', + delay: 100, + initialize: function() { $(this).addClass('inactive'); }, + terminate: function() { $(this).removeClass('inactive'); }, + enter: function() { $(this).removeClass('inactive'); }, + leave: function() { $(this).addClass('inactive'); } + }); + + $('.main.style2') + .scrollex({ + mode: 'middle', + delay: 100, + initialize: function() { $(this).addClass('inactive'); }, + terminate: function() { $(this).removeClass('inactive'); }, + enter: function() { $(this).removeClass('inactive'); }, + leave: function() { $(this).addClass('inactive'); } + }); + + // Contact. + $('#contact') + .scrollex({ + top: '50%', + delay: 50, + initialize: function() { $(this).addClass('inactive'); }, + terminate: function() { $(this).removeClass('inactive'); }, + enter: function() { $(this).removeClass('inactive'); }, + leave: function() { $(this).addClass('inactive'); } + }); + + }; + + var off = function() { + + // Galleries. + $('.gallery') + .unscrollex(); + + // Generic sections. + $('.main.style1') + .unscrollex(); + + $('.main.style2') + .unscrollex(); + + // Contact. + $('#contact') + .unscrollex(); + + }; + + breakpoints.on('<=small', off); + breakpoints.on('>small', on); + + } + + // Events. + var resizeTimeout, resizeScrollTimeout; + + $window + .on('resize', function() { + + // Disable animations/transitions. + $body.addClass('is-resizing'); + + clearTimeout(resizeTimeout); + + resizeTimeout = setTimeout(function() { + + // Update scrolly links. + $('a[href^="#"]').scrolly({ + speed: 1500, + offset: $header.outerHeight() - 1 + }); + + // Re-enable animations/transitions. + setTimeout(function() { + $body.removeClass('is-resizing'); + $window.trigger('scroll'); + }, 0); + + }, 100); + + }) + .on('load', function() { + $window.trigger('resize'); + }); + +})(jQuery);
\ No newline at end of file |