画面のスクロールに応じて、コンテンツがアニメーションする加工を取り入れる方法のご紹介です。
弊社テンプレートの検索ページで「動きのあるテンプレート」にチェックを入れて検索をかけると、こういったアニメーション効果が入ったテンプレートを検索できます。
今回は、居酒屋向けテンプレートtp_izakaya4を使ってみます。izakaya4には元々はアニメーション効果は一切入っていません。
このテンプレートの「メニュー」ページに、パララックス効果を取り入れてみましょう。
パララックス効果を出す為のjsファイルが必要です。
弊社マニュアルに沿って、jquery.inview.jsをダウンロードし、お手元のテンプレートのjsフォルダに移動します。
以下よりfiles.zipをダウンロードして下さい。
アニメーションのスクリプト(jquery.inview_set.js)と、CSSファイル(inview.css)が梱包されているので、jsファイルはお手元のテンプレートのjsフォルダに、cssファイルはお手元のcssフォルダに移動して下さい。
以下のタグをそれぞれコピペで使って下さい。
head内だとうまく動かなかったので、htmlの下に追加しています。
以下のタグをそれぞれコピペで使って下さい。1行目はコメント用タグなので、なくても問題はありません。
アクションを起こす為のcssタグをhtmlに追加していきましょう。
アクションを起こしたいブロックや画像に対して、class="transform1"を指定します。
例:<div class="transform1">
例:<img src="images/〜〜.jpg" alt="" class="transform1">
すでにclass指定がある場合は、半角スペースで区切って追加します。
例:<div class="list transform1">
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
アクションを起こしたいブロックや画像に対して、class="transform2"を指定します。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
アクションを起こしたいブロックや画像に対して、class="up"を指定します。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
アクションを起こしたいブロックや画像に対して、class="left"を指定します。
このスタイルを指定後にレイアウトがおかしくなった場合、cssフォルダのstyle.css(冒頭「/*全体の設定」にでも)に以下の1行を追加してみて下さい。
body,html {overflow-x: hidden;}
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
アクションを起こしたいブロックや画像に対して、class="right"を指定します。
このスタイルを指定後にレイアウトがおかしくなった場合、cssフォルダのstyle.css(冒頭「/*全体の設定」にでも)に以下の1行を追加してみて下さい。
body,html {overflow-x: hidden;}
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
inview.cssと、jquery.inview_set.jsに追加して下さい。
IE9以下では正常に動作しません。実機で確認はできていないのですが、デベロッパーツールで見た場合におかしな挙動をしたので、head内でリセットスタイルを追加してもいいと思います。
以下のタグをコピペして使って下さい。
サポート掲示板からご質問下さい。