さんぷる道の駅

アニメーション(transform)

通常表示の例(アニメーションなし)

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

コーヒー豆

コーヒーの試飲

X月X日より取り扱い開始予定のコーヒー豆を使った試飲会を行います。みなさまぜひご参加下さい!

もっと見る

コーヒー豆

コーヒーの試飲

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

もっと見る

コーヒー豆

コーヒーの試飲

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

もっと見る

class="transform1"の例

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

コーヒー豆

コーヒーの試飲

X月X日より取り扱い開始予定のコーヒー豆を使った試飲会を行います。みなさまぜひご参加下さい!

もっと見る

コーヒー豆

コーヒーの試飲

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

もっと見る

コーヒー豆

コーヒーの試飲

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

もっと見る

class="transform2"の例

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

いちご

いちごの試食

X月X日より取り扱い開始予定のいちごの試食会を行います。みなさまぜひご参加下さい!

もっと見る

いちご

いちごの試食

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

もっと見る

いちご

いちごの試食

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

もっと見る

class="up"の例

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

いちご

いちごの試食

X月X日より取り扱い開始予定のいちごの試食会を行います。みなさまぜひご参加下さい!

もっと見る

いちご

いちごの試食

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

もっと見る

いちご

いちごの試食

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

もっと見る

class="left"の例

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

いちご

いちごの試食

X月X日より取り扱い開始予定のいちごの試食会を行います。みなさまぜひご参加下さい!

もっと見る

いちご

いちごの試食

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

もっと見る

いちご

いちごの試食

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

もっと見る

class="right"の例

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

いちご

いちごの試食

X月X日より取り扱い開始予定のいちごの試食会を行います。みなさまぜひご参加下さい!

もっと見る

いちご

いちごの試食

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

もっと見る

いちご

いちごの試食

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

もっと見る

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

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

コーヒー豆

コーヒーの試飲

X月X日より取り扱い開始予定のコーヒー豆を使った試飲会を行います。みなさまぜひご参加下さい!

もっと見る

コーヒー豆

コーヒーの試飲

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

もっと見る

コーヒー豆

コーヒーの試飲

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

もっと見る

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

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

アクセス


GoogleMapで地図を貼り付けたい人は解説がありますのでご覧下さい。
サンプル道の駅
所在地 〒000-0000
東京都XX区XXXXXX10-10-10
営業時間 AM9:00〜PM5:00
TEL 0120-0000-0000
アクセス方法
  • お車でお越しのお客様…ここに説明を入れます。サンプルテキスト。
  • バスでお越しのお客様…ここに説明を入れます。サンプルテキスト。
駐車場 XX台可
関連サイト
Facebook Instagram Twitter