無料ホームページテンプレート Template Party

テンプレートにパララックス効果を取り入れる。その1:ブロックのフェードイン系 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内に以下のタグを追加します

以下のタグをそれぞれコピペで使って下さい。

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

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

以下のタグをそれぞれコピペで使って下さい。1行目はコメント用タグなので、なくても問題はありません。

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

アクションを起こす為の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

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

メニュー名

transform2

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

up

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

メニュー名

up

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

メニュー名

up

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

left

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

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

メニュー名

left

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

メニュー名

left

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

right

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

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

メニュー名

right

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

メニュー名

right

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

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

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

うまくできない場合は

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