Animations and Parallax

Plugin: Blocks Animation – CSS Animations for Gutenberg Blocks

Rellax.js

Here you can download Rellax.js:

Rellax need this script at the end of your page or post:

<!-- initiate Rellax Js -->
<script>
  // Place this script at the end of the page.
  // Start Rellax
  var rellax = new Rellax('.rellax');
  // Destroy and create again parallax with previous settings
  // rellax.refresh();
</script>

How can I give a <div> or similar container elements full width?

Here you have to have a closer look at the WP code. In your browser try to inspect a div, and note it’s width. If you do this you can see, that the div has a class named alignfull. Add this class to the WP markup:

<!-- Put the cover inside a div element -->
<div class="rellax alignfull" data-rellax-speed="3" style="width:100vw;">

Don’t tell it.

Show it!

Bam !!

Custom Code: CSS, HTML and JavaScript

And yes – in this particular order:

1. Add a custom HTML block.
2. Copy the CSS and place it in a <style> element.
3. Next insert the HTML
4. After the HTML-element(s) add theJavaScript.

In the Custom HTML block the code above could look like this:

<style>
#square {
  background-color: yellow;
  width: 125px;
  height: 125px;
  border: 3px solid black;
}
@keyframes example {
  from {left: 0px;}
  to {left: 200px}
}
.animate {
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}
</style>
<!-- Her følger HTML -->
<div id="square"></div>
<h3>Click the yellow square</h3>
<script>
let runAnimation = function(){
  square.classList.add("animate");
  setTimeout(clearClass, 4000);
}
// element.addEventListener("click", myAddClassFunction);
square.addEventListener("click", runAnimation);
//
let clearClass = function(){
  square.classList.remove("animate");
}
</script>

Click the yellow square!