画像がシャッターのように表示されるアニメーション

画像はサイトの重要な訴求ポイントで、目にとめてほしい画像にはそれなりの演出が必要です。

今回は画像の表示に関するアニメーションで、シャッターのような動作で表示されるアニメーションの事例をご紹介します。

画面をスクロールするとシャッターのようなアニメーションを確認できます。
※再確認したい場合はページを再読み込みして下さい

まずは上から下に向けて画像が表示されるアニメーション事例です。

続いて左から右に向けて画像が表示されるアニメーション事例です。

こちらは二段階に分けて開くような演出としています。

応用することで全画面でシャッターが開くような演出も可能です。こちらのボタンをクリックすると動作を確認できます。

アニメーションを確認する

いかがでしたでしょうか。
ちょっとしたポイントの画像に使用したり、ファーストビューで全画面で使用したり、画像に対して使いやすいアニメーション演出かと思います。

このように画像がシャッターのように表示されるアニメーションをご要望でしたら、お気軽にお問い合わせ下さい。