Sample Club

Tel:03-0000-0000OPEN 00:00~CLOSE 00:00

アニメーション(transform)の使い方

当ページの写真が動くアニメーション効果は「jquery.inview.js」を使っています。※IE10以上で動作します。
IE9以下だと挙動がおかしくなる(微妙に動いたり見えなかったりする)ので、一通りリセット(固定表示)しています。リセットスタイルは各ページのheadタグ内に入っています。

アニメーションのスタイルは、cssフォルダのinview.cssで調整できます。
自作アニメーションを作って適用する場合、jquery.inview_set.jsへの追加も忘れず行って下さい。

※アニメーションを使う場合は、「jquery.inview.js」を入手して下さい。
テンプレートのダウンロード直後の状態ではアニメーションは動きません。必ずマニュアルをご覧頂き、ファイルを入手して下さい。ファイルは簡単に入手できます。

※アニメーションを使わず、通常の固定表示にする場合。
html下部にある、
<!--パララックス用ファイル読み込み-->
<script src="js/jquery.inview.js"></script>
<script src="js/jquery.inview_set.js"></script>

の3行を削除。
続いて、cssフォルダのstyle.css冒頭にある、
@import url(inview.css);
の1行を削除して下さい。

通常表示の例

<div class="list">のみ指定した場合。

transform1スタイル

<div class="list transform1">と指定した場合。

transform2スタイル

<div class="list transform2">と指定した場合。

upスタイル

<div class="list up">と指定した場合。

leftスタイル

<div class="list left">と指定した場合。

rightスタイル

<div class="list right">と指定した場合。

画像など個別の要素に対しての直接指定も可

それぞれ、
<figure class="transform1">
<figure class="transform2">
<figure class="up">
<figure class="left">
と指定しています。

アクセス

東京都XX区XXXXビル3F
TEL:03-0000-0000
定休日:月曜日

採用情報 採用情報

上のバナー画像は、901px以上の端末と900px以下とで画像2種類が切り替わります。
詳しい説明はこちら。