ボックスがふわっと浮き上がったりクルっと回転して出現するようなアニメーションを組み込む。（2021/11/12）
tp_cafe16など、テンプレートに組み込まれているアニメーション効果を、その他のテンプレートに組み込む方法のご紹介です。
準備
- 「inview.css」と「jquery.inview_set.js」をダウンロードし、それぞれお手元の「cssフォルダ」と「jsフォルダ」に移動して下さい。
inview.cssとjquery.inview_set.jsのダウンロード - アニメーション効果を適用したいhtmlを開き、上でダウンロードしたcssをhead内に読み込みます。
<link rel="stylesheet" href="css/inview.css">
head内に、<link rel="stylesheet" href="css/style.css">という行があるはずなので、その下に入れて下さい。 - 続いて、htmlの下の方（</body>の上あたり）に、以下を追加します。
<!--パララックス用ファイル読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="js/jquery.inview_set.js"></script> - これで準備完了です。
後は実際にアニメーション設定したいhtmlにclassを追加するだけです。
アニメーション用のclassを指定しましょう
- アニメーション効果を適用したいhtmlが開いた状態だと思いますので、続けて作業しましょう。
- アニメーションさせたいタグにclassを追加します。
ダウンロードファイルに準備されているclassは以下の５タイプになります。
transform1
transform2
up
left
right
例えばこの中のtransform1を<div>タグに指定するなら、<div class="transform1">になります。
すでにclass指定がある場合は半角スペースをあけて続けて記載します。<div class="list transform1">
以下はimgタグに直接クラス指定をしたサンプルです。
↓ 「up」スタイルの適用例
↓ 「left」スタイルの適用例
↓ 「right」スタイルの適用例
↓ 「transform1」スタイルの適用例
↓ 「transform2」スタイルの適用例
オリジナルのアニメーションを作りたい場合は
inview.cssに、cssで動くアニメーションスタイルを追加します。
css冒頭の「共通設定」の２箇所にも追加するのを忘れないようご注意下さい。
スタイルを追加したら、jquery.invie_set.jsにタグを追加して下さい。 既存のタグをコピペして、スタイル名を２箇所入れ替えればOKです。
注意事項
上の「準備」で記載されている「https」から始まるurlは、将来リンク切れを起こす可能性があります。
その際は改めて「jQuery CDN」などでネット検索し、新しいurlに置き換えて下さい。