テキストアニメーション(MOVING LETTERS)

参考サイト
実装例

参考サイト

Moving Letters

Text animated with JavaScript & anime.js

上記のサイトには、javaScriptを使った様々なテキストエフェクトを紹介してくれています。
好みのエフェクトを見つけたらコピペして使うだけで実装が出来てしまいます。

実装例

右のリード文のふわっと浮き出るテキストエフェクトを実装しました。奇数行と偶数行で出てくる位置を変えることで少し変わった表示の仕方を目指しました。

Moving Letters

Text animated with JavaScript & anime.js

参考にした基本コードはEffect12です。
そこから複数行にエフェクトを当てたかったので以下のように修正しました。

        <h1 class="mainVisual__title">
            <span class="ml12 ml12--underRight">純度の高い</span><br>
            <span class="ml12 ml12--upperRight">なめらかでしあわせ</span><br>
            <span class="ml12 ml12--underRight">親密な温度の</span><br>
            <span class="ml12 ml12--upperRight">バターサンド</span>
        </h1>

.mainVisual__title {
    writing-mode: vertical-rl;
    font-size: 1.6rem;
    line-height: 4.6rem;
    position: absolute;
    top: calc(100vw * (450/1920));
    right: calc(100vw * (344/1920));
}

.mainVisual__title span {
    display: inline-block;
}

var textWrappers = document.querySelectorAll('.ml12');
textWrappers.forEach(function (textWrapper) {
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
});
anime.timeline({ loop: false })
    .add({
        targets: '.ml12--underRight .letter',
        translateX: [40, 0],
        translateY: [40, 0],
        opacity: [0, 1],
        easing: "easeOutExpo",
        duration: 1800,
        delay: (el, i) => 500 + 30 * i
    });
anime.timeline({ loop: false })
    .add({
        targets: '.ml12--upperRight .letter',
        translateX: [40, 0],
        translateY: [-40, 0],
        opacity: [0, 1],
        easing: "easeOutExpo",
        duration: 1800,
        delay: (el, i) => 500 + 30 * i
    });