見せたいものに注目させる多彩なアニメーション

アニメーションは、遊び心の演出や視線の誘導に効果的。

ページの離脱を防ぐには、遊び心のある演出で閲覧者を飽きさせない工夫が必要です。ページの切替やスクロール時にアニメーションを設定すれば、動きで視線を誘導して見せたいものに注目させることができます。

ページ遷移を後押しするページアニメーション

サイトの読込時や別ページへ遷移するときに加わるアニメーション効果「ページアニメーション」が新登場。シンプルな動きからダイナミックに切り替わるものまで9つのエフェクトを搭載しました。

フェード

フェードの動作サンプル
 

方向を決めれば、一度消えて、ゆっくりと現れるフェードの動きでページが切り替わります。

ズーム

ズームの動作サンプル
 

ページの一部分が拡大→縮小するズームの動きでページが切り替わります。

フリップ

フリップの動作サンプル
 

ページが水平や垂直に回転するフリップの動きでページが切り替わります。

ローテート

ローテートの動作サンプル
 

ページが回転しながら変わるローテートの動きでページが切り替わります。

次々とスクロールしたくなる、アニメーションブロック

スクロール時にヘッダーや写真などのコンテンツをブロック単位で動かせる演出が「アニメーションブロック」です。上下左右からのフェードイン、両サイドからのサイドイン、回転しながら表示されるローテートインなど全11種類の動きで、サイトを演出できます。

アニメーションブロックのイメージ

ブロックごとに違う動きを設定することも可能。写真に設定すればダイナミックな印象に、メニューに設定すればさりげない視線の誘導に使えます。
 

ゴーストヘッダー

ゴーストヘッダーのイメージ

 
TOP にはないヘッダーが、スクロールとともに現れる「ゴーストヘッダー」。TOP が動画などの場合、隠しておけるので便利です。
 

スティッキーブロック

スティッキーブロックのイメージ

 
特定のブロックがスクロール時に上部に吸着して固定される「スティッキーブロック」。好きな位置にメニューを配置して、印象付けられます。
 

BiNDupをはじめよう

サーバー込のサイト制作が 最大30日間無料!

半角英数字6~16文字。記号は _ - のみ

今すぐ、はじめる