中央にタイトルのあるシンプルなインタラクティブバナー
タイトルバーの中央にタイトルを配置したり、ホバー効果をカスタマイズしたりできます。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
下からのアニメーション
上からのアニメーション
ズームインアニメーション
ズームアウトアニメーション
アイコン画像の背景とホバー時の説明
アイコン画像を使用して、ホバーにテキストを表示することで、アイコンの説明を補足する事例です。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
笑顔のアイコン
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ショッピングのアイコン
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
アンロックのアイコン
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
傘のアイコン
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトルにアイコンを追加
タイトルセクションにアイコンを配置できます。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
カメラのアイコン付き
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ライトのアイコン付き
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
いいねのアイコン付き
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
レインドロップのアイコン付き
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ホバーのアイコン
オンホバーの説明でアイコンを使用することもできます。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
マイクのホバーアイコン
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
笑顔のホバーアイコン
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
カスタムのホバーアイコン
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
色付きのタイトルバー
タイトルバーの色は、Webサイトの全体的な外観に応じて変更できます。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
カラータイトル１
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
カラータイトル２
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
カラータイトル３
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
カラータイトル４
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ホバーアニメーションの一覧
以下にホバー時のアニメーションを一覧表示します。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
下から表示・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
上から表示・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
左から表示・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
右から表示・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ズームイン・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ズームアウト・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ズームイン-アウト・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
左からジャンプイン・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
右からジャンプイン・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
下からプルイン・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
上からプルイン・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
左からプルイン・アニメーション
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
高さをカスタマイズする
簡単な設定でバナーのサイズを制御します。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
PCはマウスオーバーで、スマートフォン・タブレット等ではタッチでアニメーションします。
高さのカスタマイズ例１
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
高さのカスタマイズ例２
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
高さのカスタマイズ例３
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
高さのカスタマイズ例４
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。