HOME > ライブラリ > Letter Effects

Letter Effects

17種類のテキストエフェクトが簡単に利用できるライブラリ。

使い方

anime.jsとcharming.jsに依存。charming.jsは選択した要素のテキストを1文字ごとにspanで囲んでclassをつけてくれるライブラリ。

HTML

<script type="text/javascript" src="anime.min.js"></script>
<script type="text/javascript" src="charming.min.js"></script>
<script type="text/javascript" src="textfx.js"></script>
<link rel="stylesheet" href="lettereffect.css" type="text/css">

サンプル

実行結果

Letter Effects

fx1 fx2 fx3 fx4 fx5 fx6 fx7 fx8 fx9 fx10 fx11 fx12 fx13 fx14 fx15 fx16 fx17 fx18

Javascript

window.addEventListener('DOMContentLoaded', (e) => {
const txt = new TextFx(document.getElementById('letter-effect'));
document.querySelectorAll('.run-letter-effect').forEach((el) => {
el.addEventListener('click', (e) => {
txt.hide(e.target.dataset.fx, () => {
txt.show(e.target.dataset.fx);
});
});
});
});

HTML

<div class="letter-effect-bg">
<h1 id="letter-effect">Letter Effects</h1>
</div>
<div class="run-buttons">
<span class="cq-btn m-primary run-letter-effect" data-fx="fx1">fx1</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx2">fx2</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx3">fx3</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx4">fx4</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx5">fx5</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx6">fx6</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx7">fx7</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx8">fx8</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx9">fx9</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx10">fx10</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx11">fx11</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx12">fx12</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx13">fx13</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx14">fx14</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx15">fx15</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx16">fx16</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx17">fx17</span>
<span class="cq-btn m-primary run-letter-effect" data-fx="fx18">fx18</span>
</div>

CSS

.letter-effect {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#letter-effect {
color: white;
font-weight: 800;
font-size: 8rem;
}
.letter-effect-bg {
background: #d33682;
padding: 8rem 2rem;
}
.run-buttons span {
margin: 8px;
}

参照サイト