HOME > >

Letter Effects

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

使い方

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

HTML

  1. <script type="text/javascript" src="anime.min.js"></script>
  2. <script type="text/javascript" src="charming.min.js"></script>
  3. <script type="text/javascript" src="textfx.js"></script>
  4.  
  5. <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

  1. window.addEventListener('DOMContentLoaded', (e) => {
  2.     const txt = new TextFx(document.getElementById('letter-effect'));
  3.  
  4.     document.querySelectorAll('.run-letter-effect').forEach((el) => {
  5.         el.addEventListener('click', (e) => {
  6.             txt.hide(e.target.dataset.fx, () => {
  7.                 txt.show(e.target.dataset.fx);
  8.             });
  9.         });
  10.     });
  11. });
  12.  

HTML

  1. <div class="letter-effect-bg">
  2.   <h1 id="letter-effect">Letter Effects</h1>
  3. </div>
  4.  
  5. <div class="run-buttons">
  6.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx1">fx1</span>
  7.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx2">fx2</span>
  8.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx3">fx3</span>
  9.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx4">fx4</span>
  10.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx5">fx5</span>
  11.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx6">fx6</span>
  12.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx7">fx7</span>
  13.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx8">fx8</span>
  14.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx9">fx9</span>
  15.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx10">fx10</span>
  16.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx11">fx11</span>
  17.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx12">fx12</span>
  18.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx13">fx13</span>
  19.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx14">fx14</span>
  20.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx15">fx15</span>
  21.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx16">fx16</span>
  22.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx17">fx17</span>
  23.   <span class="cq-btn m-primary run-letter-effect" data-fx="fx18">fx18</span>
  24. </div>

CSS

  1. .letter-effect {
  2.   display: -webkit-flex;
  3.   display: -ms-flexbox;
  4.   display: flex;
  5.   -webkit-flex-direction: row;
  6.   -ms-flex-direction: row;
  7.   flex-direction: row;
  8.   -webkit-align-items: center;
  9.   -ms-flex-align: center;
  10.   align-items: center;
  11.   -webkit-flex-wrap: wrap;
  12.   -ms-flex-wrap: wrap;
  13.   flex-wrap: wrap;
  14. }
  15.  
  16.  
  17.  
  18. #letter-effect {
  19.   color: white;
  20.   font-weight: 800;
  21.   font-size: 8rem;
  22. }
  23.  
  24. .letter-effect-bg {
  25.   background: #d33682;
  26.   padding: 8rem 2rem;
  27. }
  28.  
  29. .run-buttons span {
  30.   margin: 8px;
  31. }
  32.  
  33.  
  34.