1.2.3 • Published 1 year ago
qkanim v1.2.3
QkAnim
QkAnim.js
は、クラス名を利用して簡単にアニメーションを追加するJavaScriptライブラリです。
使用方法
QkAnim.js
をHTML
ファイルに読み込みます。
ダウンロード版を利用する場合
QkAnim公式サイトよりダウンロードしてください。
HTML
<script src="path/qkanim.min.js"></script>
CDN版を利用する場合
HTML
<script src="https://cdn.jsdelivr.net/npm/qkanim@1.2.1/dist/qkanim.min.js"></script>
HTML
要素にアニメーション用のクラス名を設定します。例えば、画像を上からスライドインするアニメーションを設定する場合は、以下のようにqk
クラスで画像要素を囲い、qk-slide-top
クラスを追加します。
HTML
<div class="qk">
<img src="image.png" class="qk-slide-top">
</div>
- ページを読み込むと、画面内に要素が入ると設定したアニメーションが実行されます。また、アニメーションの設定は
CSS
で行うため、簡単にカスタマイズすることができます。また、下記のように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
は、以下のクラス名をサポートしています。
qk
qk-once
qk-fade-in
qk-fade-out
qk-slide-top
qk-slide-bottom
qk-slide-left
qk-slide-right
qk-mask-top
qk-mask-bottom
qk-mask-left
qk-mask-right
サポートアニメーション
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
タグのクラスをご使用してください。
また、画面外では、処理の軽量化のためアニメーションを停止します。
qk-list
qk-list-fade
qk-list-slide
qk-list-slide-fade
qk-list-mask
qk-list-mask-fade
例:画像をフェードで切り替えるリストアニメーション
HTML
<ul class="qk-list-fade">
<li><img src="image1" alt=""></li>
<li><img src="image2" alt=""></li>
<li><img src="image3" alt=""></li>
<li><img src="image4" alt=""></li>
</ul>
カスタマイズ
アニメーションの動きやタイミングをカスタマイズする場合は、CSSで設定します。例えば、以下のように--qk-fade-dur
を変更することで、フェードアニメーションの時間を変更することができます。
CSS
.qk-fade-in {
--qk-fade-dur: 2s;
}
オプション
オプション名 | 説明 | デフォルト値 |
---|---|---|
--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まで。