こんにちは、ハル@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...
ダウンロードした「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>
コメント