webseite/assets/js/main.js

214 lines
4.1 KiB
JavaScript
Raw Normal View History

/*
2019-02-12 17:45:44 +01:00
Landed by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
(function($) {
skel.breakpoints({
2019-02-12 17:45:44 +01:00
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 980px)',
small: '(max-width: 736px)',
xsmall: '(max-width: 480px)'
});
$(function() {
var $window = $(window),
2019-02-12 17:45:44 +01:00
$body = $('body');
// Disable animations/transitions until the page has loaded.
$body.addClass('is-loading');
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-loading');
2019-02-12 17:45:44 +01:00
}, 0);
});
2019-02-12 17:45:44 +01:00
// Touch mode.
if (skel.vars.mobile)
$body.addClass('is-touch');
// Fix: Placeholder polyfill.
$('form').placeholder();
// Prioritize "important" elements on medium.
skel.on('+medium -medium', function() {
$.prioritize(
'.important\\28 medium\\29',
skel.breakpoint('medium').active
);
});
2019-02-12 17:45:44 +01:00
// Scrolly links.
$('.scrolly').scrolly({
speed: 2000
});
// Off-Canvas Navigation.
// Title Bar.
$(
'<div id="titleBar">' +
'<a href="#navPanel" class="fas fa-bars toggle"></a>' +
'<span class="title">' + $('#logo').html() + '</span>' +
'</div>'
)
.appendTo($body);
// Navigation Panel.
$(
'<div id="navPanel">' +
'<nav>' +
$('#nav').navList() +
'</nav>' +
'</div>'
)
.appendTo($body)
.panel({
delay: 500,
hideOnClick: true,
hideOnSwipe: true,
resetScroll: true,
resetForms: true,
side: 'left',
target: $body,
visibleClass: 'navPanel-visible'
});
2019-02-12 17:45:44 +01:00
// Fix: Remove navPanel transitions on WP<10 (poor/buggy performance).
if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
$('#titleBar, #navPanel, #page-wrapper')
.css('transition', 'none');
2019-02-12 17:45:44 +01:00
// Parallax.
// Disabled on IE (choppy scrolling) and mobile platforms (poor performance).
if (skel.vars.browser == 'ie'
|| skel.vars.mobile) {
2019-02-12 17:45:44 +01:00
$.fn._parallax = function() {
return $(this);
};
}
2019-02-12 17:45:44 +01:00
else {
2019-02-12 17:45:44 +01:00
$.fn._parallax = function() {
2019-02-12 17:45:44 +01:00
$(this).each(function() {
2019-02-12 17:45:44 +01:00
var $this = $(this),
on, off;
2019-02-12 17:45:44 +01:00
on = function() {
2019-02-12 17:45:44 +01:00
$this
.css('background-position', 'center 0px');
2019-02-12 17:45:44 +01:00
$window
.on('scroll._parallax', function() {
2019-02-12 17:45:44 +01:00
var pos = parseInt($window.scrollTop()) - parseInt($this.position().top);
2019-02-12 17:45:44 +01:00
$this.css('background-position', 'center ' + (pos * -0.15) + 'px');
2019-02-12 17:45:44 +01:00
});
2019-02-12 17:45:44 +01:00
};
2019-02-12 17:45:44 +01:00
off = function() {
2019-02-12 17:45:44 +01:00
$this
.css('background-position', '');
2019-02-12 17:45:44 +01:00
$window
.off('scroll._parallax');
2019-02-12 17:45:44 +01:00
};
2019-02-12 17:45:44 +01:00
skel.on('change', function() {
2019-02-12 17:45:44 +01:00
if (skel.breakpoint('medium').active)
(off)();
else
(on)();
2019-02-12 17:45:44 +01:00
});
2019-02-12 17:45:44 +01:00
});
2019-02-12 17:45:44 +01:00
return $(this);
2019-02-12 17:45:44 +01:00
};
2019-02-12 17:45:44 +01:00
$window
.on('load resize', function() {
$window.trigger('scroll');
});
2019-02-12 17:45:44 +01:00
}
2019-02-12 17:45:44 +01:00
// Wrappers.
var $wrappers = $('.wrapper');
2019-02-12 17:45:44 +01:00
$wrappers
.each(function() {
2019-02-12 17:45:44 +01:00
var $this = $(this),
on, off;
2019-02-12 17:45:44 +01:00
on = function() {
2019-02-12 17:45:44 +01:00
if (skel.canUse('transition')) {
2019-02-12 17:45:44 +01:00
$this.scrollex({
2019-03-07 23:00:36 +01:00
top: 120,
2019-02-12 17:45:44 +01:00
bottom: 0,
initialize: function(t) { $this.addClass('inactive'); },
terminate: function(t) { $this.removeClass('inactive'); },
enter: function(t) { $this.removeClass('inactive'); },
2019-02-12 17:45:44 +01:00
// Uncomment the line below to "rewind" when this wrapper scrolls out of view.
//leave: function(t) { $this.addClass('inactive'); },
});
}
2019-02-12 17:45:44 +01:00
};
2019-02-12 17:45:44 +01:00
off = function() {
2019-02-12 17:45:44 +01:00
if (skel.canUse('transition'))
$this.unscrollex();
2019-02-12 17:45:44 +01:00
};
2019-02-12 17:45:44 +01:00
skel.on('change', function() {
if (skel.breakpoint('medium').active)
(off)();
else
(on)();
});
});
2019-02-12 17:45:44 +01:00
// Banner.
var $banner = $('#banner');
$banner
._parallax();
});
2019-02-12 17:45:44 +01:00
})(jQuery);