<script>
document.addEventListener( 'scroll', function( e ) {
const openedMenus = document.querySelector( '#mobile-header' );
const btn = openedMenus.querySelector( 'button.menu-toggle' );
if(openedMenus.classList.contains('toggled')){
btn.click();
}
} );
</script>
JavaScript
Height 100vh for iOS
CSS
.my-element {
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
}
JS
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
JS Eventlistener for rezising
// We listen to the resize event
window.addEventListener('resize', () => {
// We execute the same script as before
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
Start Animation in viewport
jQuery(document).ready(function( $ ){
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
}
/* Animation starts everytime you scroll into the view again
else {
$element.removeClass('in-view');
}*/
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
});
Lity Lightbox for WordPress
Copy the „Lity“ folder in plugin folder and the name folder „lity“.
Import stylesheet in header
<link href="/wp-content/plugins/lity/dist/lity.css" rel="stylesheet">
Import JS
<script src="/wp-content/plugins/lity/vendor/jquery.js"></script>
<script src="/wp-content/plugins/lity/dist/lity.js"></script>
Download Lity, extract and put it in the „Plugins“ folder
Close Lity Lightbox on browser back button
$(document).on('lity:open', function () {
if (location.hash === '#lity') {
return;
}
history.pushState({}, '', '#lity');
});
$(document).on('lity:close', function () {
if (lity.current()) {
return;
}
history.replaceState({}, '', location.href.split('#')[0]);
});
$(window).on('hashchange', function () {
if (!location.hash && lity.current()) {
lity.current().close();
}
});
Laxxx Parallax
<script src="/wp-content/plugins/laxxx-master/lib/lax.min.js" ></script>
<script>
window.onload = function() {
// init on window load
lax.setup()
// update every scroll
const updateLax = () => {
lax.update(window.scrollY)
window.requestAnimationFrame(updateLax)
}
window.requestAnimationFrame(updateLax)
}
lax.addPreset("myCoolPreset", function() {
return {
"data-lax-opacity": "(-vh*0.8) 40, (-vh*0.6) 0",
"data-lax-rotate": "(-vh*2) 1000, (-vh*0.5) 0"
}
})
</script>
Open all external Links in new tab JS
window.onload = function(){
var anchors = document.getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
if (anchors[i].hostname != window.location.hostname) {
anchors[i].setAttribute('target', '_blank');
}
}
}