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

パララックス効果を使う(inview.js)

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

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

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

<link rel="stylesheet" href="css/inview.css">

場所がわからない場合は、
<link rel="stylesheet" href="css/style.css">
の下の行あたりでOKです。

テンプレートをプレビュー確認しましょう。

デモサイトと同じようにアニメーションが動作すれば成功です。

アニメーション効果が反映されない場合
デモサイトでアニメーションが動作しているページ(html)に対してこの編集をしてみて下さい。反映されたら、その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に追加して下さい。

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

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

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

うまくできない場合は

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