Lunch Menuランチメニュー

transform指定なしの場合

メニュータイトル XXX円

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。

transform1

メニュータイトル XXX円

<div class="list transform1">
とするとこのボックスの動作になります。
右上の「おすすめ」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssのoption1〜option2で調整できます。

おすすめ

transform2

メニュータイトル XXX円

<div class="list transform2">
とするとこのボックスの動作になります。
右上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssのoption1〜option2で調整できます。

人気

up

メニュータイトル
2,000円→1,800円》

<div class="list up">
とするとこのボックスの動作になります。
左上の「10%OFF」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssのoption3で調整できます。

10%
OFF

left

メニュータイトル
2,000円→1,600円》

<div class="list left">
とするとこのボックスの動作になります。
左上の「20%OFF」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssのoption3で調整できます。

20%
OFF

right

メニュータイトル
2,000円→1,400円》

<div class="list right">
とするとこのボックスの動作になります。
左上の「30%OFF」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssのoption3で調整できます。

30%
OFF

listボックス内のタグにも指定できます

メニュータイトル XXX円

listブロック以外にもtransformスタイルは追加できます。これはfigureタグに追加したサンプルです。

おすすめ

メニュー(テキストタイプ)

メニュータイトルをここに入れます。
メニュー名をここに入れます。XXX円
メニュー名をここに入れます。XXX円
メニュー名をここに入れます。XXX円
メニュータイトルをここに入れます。
メニュー名をここに入れます。XXX円
メニュー名をここに入れます。XXX円
メニュー名をここに入れます。XXX円
メニュータイトルをここに入れます。
メニュー名。XXX円
メニュー名。XXX円
メニュータイトルをここに入れます。
メニュー名。XXX円
メニュー名。XXX円

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

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に置き換えて下さい。