Moving Letters ou l'animation des titres

Anime.js est une bibliothèque d'animation JavaScript légère avec une API simple mais puissante facilement utilisable avec Oxygen.
Il fonctionne avec les propriétés CSS, SVG, les attributs DOM et les objets JavaScript.

Il suffira pour ces exemples de rajouter un bloc de code dans votre page Oxygen avec par exemple (exemple 7 du dernier lien an-dessous) :

<h1 class="ml7">
  <span class="text-wrapper">
    <span class="letters">Reality is broken</span>
  </span>
</h1>

Dans le css

.ml7 {
  position: relative;
  font-weight: 900;
  font-size: 3.7em;
}
.ml7 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}
.ml7 .letter {
  transform-origin: 0 100%;
  display: inline-block;
  line-height: 1em;
}

Et dans le javascript :

// Wrap every letter in a span
var textWrapper = document.querySelector('.ml7 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml7 .letter',
    translateY: ["1.1em", 0],
    translateX: ["0.55em", 0],
    translateZ: 0,
    rotateZ: [180, 0],
    duration: 750,
    easing: "easeOutExpo",
    delay: (el, i) => 50 * i
  }).add({
    targets: '.ml7',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

Démos sur ce site : https://oxygen.bulgaweb.com/moving-letters/

Lien du Javascript : https://animejs.com/

Lien des tutoriels "Moving Letters" : https://tobiasahlin.com/moving-letters/

Vous pouvez également utiliser mon plugin Oxychild qui inclut le javascript (à activer) DOWNLOAD