テンプレートにパララックス効果を取り入れる。その１：ブロックのフェードイン系 inview.js（2019/11/21）

画面のスクロールに応じて、コンテンツがアニメーションする加工を取り入れる方法のご紹介です。
弊社テンプレートの検索ページで「動きのあるテンプレート」にチェックを入れて検索をかけると、こういったアニメーション効果が入ったテンプレートを検索できます。

パララックス効果を取り入れたいテンプレートを用意します

今回は、居酒屋向けテンプレートtp_izakaya4を使ってみます。izakaya4には元々はアニメーション効果は一切入っていません。
このテンプレートの「メニュー」ページに、パララックス効果を取り入れてみましょう。

jquery.inview.jsを海外の配布サイトよりダウンロードしてきて下さい

パララックス効果を出す為のjsファイルが必要です。
弊社マニュアルに沿って、jquery.inview.jsをダウンロードし、お手元のテンプレートのjsフォルダに移動します。

他に必要なファイルをダウンロードします

以下よりfiles.zipをダウンロードして下さい。
アニメーションのスクリプト（jquery.inview_set.js）と、CSSファイル（inview.css）が梱包されているので、jsファイルはお手元のテンプレートのjsフォルダに、cssファイルはお手元のcssフォルダに移動して下さい。

files.zipのダウンロード

htmlのhead内に以下のタグを追加します

以下のタグをそれぞれコピペで使って下さい。
<link rel="stylesheet" href="css/inview.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

htmlの下の方に以下のタグを追加します

head内だとうまく動かなかったので、htmlの下に追加しています。

以下のタグをそれぞれコピペで使って下さい。１行目はコメント用タグなので、なくても問題はありません。
<br> <script src="js/jquery.inview.js"></script><br> <script src="js/jquery.inview_set.js"></script>

パララックス用のスタイルを追加します

アクションを起こす為のcssタグをhtmlに追加していきましょう。

transform1

アクションを起こしたいブロックや画像に対して、class="transform1"を指定します。
例：<div class="transform1">
例：<img src="images/〜〜.jpg" alt="" class="transform1">

すでにclass指定がある場合は、半角スペースで区切って追加します。
例：<div class="list transform1">

transform1

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

transform1

transform2

アクションを起こしたいブロックや画像に対して、class="transform2"を指定します。

transform2

up

アクションを起こしたいブロックや画像に対して、class="up"を指定します。

up

left

アクションを起こしたいブロックや画像に対して、class="left"を指定します。

このスタイルを指定後にレイアウトがおかしくなった場合、cssフォルダのstyle.css（冒頭「/*全体の設定」にでも）に以下の１行を追加してみて下さい。
body,html {overflow-x: hidden;}

left

right

アクションを起こしたいブロックや画像に対して、class="right"を指定します。

right

新しいアニメーションを追加したい場合は

inview.cssと、jquery.inview_set.jsに追加して下さい。

古いブラウザでの動作について

IE9以下では正常に動作しません。実機で確認はできていないのですが、デベロッパーツールで見た場合におかしな挙動をしたので、head内でリセットスタイルを追加してもいいと思います。

以下のタグをコピペして使って下さい。

うまくできない場合は

サポート掲示板からご質問下さい。