Un peu de mouvement sur le site. Animons le texte avec Javascript.
Salut les amis !
Le Html
<h1 class="anime">
<span class="text-wrapper">
<span class="letters">Salut les amis !</span>
</span>
</h1>
Le script
var textWrapper = document.querySelector('.anime .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.anime .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 50 * i
}).add({
targets: '.anime',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
Le Css
.anime {
position: relative;
font-weight: 900;
font-size: 3.3em;
}
.anime .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.2em;
padding-right: 0.05em;
padding-bottom: 0.1em;
overflow: hidden;
}
.anime .letter {
display: inline-block;
line-height: 1em;
}