【Splitting.js】文字が浮き上がるようなアニメーションjQuery

こんにちは、ハル@haru_elpisです。

文字を浮き上がさせるようなアニメーションが表現できる「jQuery TextFX」の紹介です。

Splitting.jsの使い方

ダウンロード

GitHub - shshaw/Splitting: JavaScript microlibrary to split an element by words, characters, children and more, populated with CSS variables!

JavaScript microlibrary to split an element by words, characters, children and more, populated with CSS variables! - GitHub - shshaw/Splitting: JavaScript micro...

github.com

ダウンロードした「splitting.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

「splitting.js」ファイルは「dist」フォルダの中の「splitting.js」を使用します。

HTML head

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/splitting.js"></script>

HTML body

<style>
    
    @import url(https://fonts.googleapis.com/css?family=Kanit:600);

    html { height: 100%; display: flex; }
    body { margin: auto; }
    html, body {
        background: #00043C;
        color: #FFF;
        font: normal 600 10vw/1.5 Kanit, sans-serif;
    }

    .splitting .char {
        animation: slide-in 1s cubic-bezier(.5, 0, .5, 1) both;
        animation-delay: calc(60ms * var(--char-index));
    }

    @keyframes slide-in {
    from {
        transform: translateY(-1em) rotate(-.5turn) scale(0.5);
        opacity: 0;
    }
    }   
    
    
</style>


<div data-splitting>Hello World!</div>

JavaScript

<script>
      Splitting();
</script>