QkAnim

はじめに

「QkAnim.js」は、クラス名を利用して簡単にアニメーションを追加するJavaScriptライブラリです。

使用方法

このライブラリを使用する方法については、以下の手順に従ってください。

  1. 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>
  1. HTML要素にアニメーション用のクラス名を設定します。例えば、画像を上からスライドインするアニメーションを設定する場合は、以下のようにqkクラスで画像要素を囲い、qk-slide-topクラスを追加します。

HTML

<div class="qk">
    <img src="image.png" class="qk-slide-top">
</div>
  1. ページを読み込むと、設定したアニメーションが実行されます。また、下記のように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まで。