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();
    }
});
Download
website

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>

https://github.com/alexfoxy/laxxx/blob/master/README.md

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');
    }
  }
}