背景イメージ

Shoppingショッピング

画像サイズは自由ですが必ず「正方形」で用意して下さい。1pxでもずれると段落ちする可能性があります。
※リンクが設定されている場合のみ、マウスオンで画像が鮮明になります。

transformなしの場合(アニメーション効果なし)

商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル

transform1サンプル

商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル

transform2サンプル

商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル

upサンプル

商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル

leftサンプル

商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル

rightサンプル

商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル
商品タイトル

オリジナルのアニメーションを作りたい場合は

cssフォルダのinview.cssに、cssで動くアニメーションタグを追加します。
css冒頭の「共通設定」の2箇所にも追加するのを忘れないようご注意下さい。

スタイルを追加したら、jsフォルダのjquery.invie_set.jsにタグを追加して下さい。
既存のタグをコピペして、スタイル名を2箇所入れ替えればOKです。

transformのアニメーションが動作しない場合

htmlの下部に、
<!--パララックス用ファイル読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="js/jquery.inview_set.js"></script>

のタグがあるか確認して下さい。

httpsから始まるurlは将来リンク切れを起こす可能性もあります。その際は改めて「jQuery CDN」などでネット検索し、新しいurlに置き換えて下さい。

SAMPLE SHOP

SAMPLE SHOP