はじめに
「QkAnim.js」は、クラス名を利用して簡単にアニメーションを追加するJavaScriptライブラリです。
使用方法
このライブラリを使用する方法については、以下の手順に従ってください。
- qkanim.min.jsをHTMLファイルに読み込みます。
ダウンロード版を利用する場合
下記のボタンを押してダウンロードをしてください
ダウンロードボタン解凍後、distフォルダ内のqkanim.min.jsを読み込んでください。
HTML
<script src="dist/qkanim.min.js"></script>
CDN版を利用する場合
HTML
<script src="https://cdn.jsdelivr.net/npm/qkanim@1.2.1/dist/qkanim.min.js" integrity="sha512-CnOAHCEUPoBPTkpfzBuXKMtSao6qcraOfh3ieMwnOMRW59dC+4NF87vkQpEnE7+1gQoJTS+zVsUq45IeCVtUyQ==" crossorigin="anonymous"></script>
- HTML要素にアニメーション用のクラス名を設定します。例えば、画像を上からスライドインするアニメーションを設定する場合は、以下のように
qk
クラスで画像要素を囲い、qk-slide-top
クラスを追加します。
HTML
<div class="qk">
<img src="image.png" class="qk-slide-top">
</div>
- ページを読み込むと、設定したアニメーションが実行されます。また、下記のようにqkクラスの下に複数のqkアニメーションを入れることができます。
HTML
<div class="qk">
<img src="image.png" class="qk-slide-top">
<img src="image.png" class="qk-slide-top">
<img src="image.png" class="qk-slide-top">
</div>
Qkクラス一覧
「QkAnim.js」は、以下のアニメーションをサポートしています。
サポートアニメーション
「QkAnim.js」は、以下のアニメーションをサポートしています。
クラス名 | 操作するCSSプロパティ |
---|---|
qk-fade-*** | opacity |
qk-slide-*** | translate |
qk-mask-*** | clip-path |
qk-onceクラスについて
画面内に入ったら一回のみアニメーションを実行したい場合は、qk-once
クラスを使用してください。
例:画面内に入ったら一回のみ画像をフェードインさせたい場合
HTML
<div class="qk-once">
<img src="image1.jpeg" class="qk-fade-in">
</div>
Qkリストクラス一覧
「QkAnim.js」は、以下のリストアニメーションをサポートしています。
ul,olタグのクラスをご使用してください。
また、画面外では、処理の軽量化のためアニメーションを停止します。
例:画像をフェードで切り替えるリストアニメーション
HTML
<ul class="qk-list-fade">
<li><img src="image1"></li>
<li><img src="image2"></li>
<li><img src="image3"></li>
<li><img src="image4"></li>
</ul>
カスタマイズ
オプション名 | 説明 | デフォルト値 |
---|---|---|
--qk-fade-dur |
フェードアニメーション秒数 | 1s |
--qk-fade-opac |
フェードアニメーション後の透明度 | 1 |
--qk-slide-dur |
スライドアニメーション秒数 | 1s |
--qk-slide-x |
左右からスライドする量 | 30px |
--qk-slide-y |
上下からスライドする量 | 30px |
--qk-mask-dur |
マスクアニメーション秒数 | 1s |
--qk-list-dur |
リストアニメーション秒数 | 3s |
ライセンス
「QkAnim.js」は、MITライセンスの下で提供されています。
詳細については、LICENSEファイルを参照してください。
お問い合わせ先
何か問題がある場合や、機能のリクエストがある場合は、下記リポジトリのissuesまで。