居酒屋

メニュー(横長box1タイプ)

transformの指定なし

メニュー名

メニュー名 XXX円

<div class="box1">
とするとこのボックス(アニメーションなし)になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1">
とするとこのボックス(アニメーションなし)になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1">
とするとこのボックス(アニメーションなし)になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気

transform1サンプル

メニュー名

メニュー名 XXX円

<div class="box1 transform1">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1 transform1">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1 transform1">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気

transform2サンプル

メニュー名

メニュー名 XXX円

<div class="box1 transform2">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1 transform2">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1 transform2">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気

upサンプル

メニュー名

メニュー名 XXX円

<div class="box1 up">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1 up">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1 up">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気

leftサンプル

メニュー名

メニュー名 XXX円

<div class="box1 left">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1 left">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1 left">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気

rightサンプル

メニュー名

メニュー名 XXX円

<div class="box1 right">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1 right">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気
メニュー名

メニュー名 XXX円

<div class="box1 right">
とするとこのボックスの動作になります。
左上の「人気」のテキストは直接html側で変更できます。色や配置などはcssフォルダのstyle.cssの「.mark」で調整できます。900px以下の設定もあるので注意して下さい。

人気

メニュー(コンパクトbox2タイプ)

transform1サンプル

メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

人気
メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

おすすめ
メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

transform2サンプル

メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

人気
メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

おすすめ
メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

upサンプル

メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

人気
メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

おすすめ
メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

leftサンプル

メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

人気
メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

おすすめ
メニュー名

メニュー名 XXX円

タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。タイトルも説明文も短めにして下さい。長いと途中で切れます。

rightサンプル

メニュー名

メニュー名 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に置き換えて下さい。