【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, charac...

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>