繊細で美しく、ダイナミックなアニメーションで画像を切り換えるスクリプトを使ったテクニックを紹介します。 2016年のインパクトのある成果物ベスト10には間違いなく入りますね。
イギリスのフリーランス、アートディレクター/デザイナーであるアンソニー・グッドウィン氏のポートフォリオサイト。※2014年5月にサイトリニューアルされたため、Internet Archiveを参照。 3Dの動きがおもしろいマウスオーバー 3Dパーツを多用し、ダイナミックにコンテンツを見せる「DESIGN EMBRANCED」。いろいろな場所をついついマウスオーバーしてみたくなるWebサイトだ。CSS Transitionsを採用することで、各パーツのアニメーションはとても滑らかに、ストレスなく動く。制作者の実装へのこだわりが見える。 3Dパーツは、マウスオーバーやページ遷移、ローディングアイコンに使われており、ユーザーに強いインパクトを与え、一貫した世界観を演出している。
デモのアニメーションGIF 実装 HTML デモページの中央のセクション(背景グリーンの箇所)のHTMLです。 <section class="cd-section"> <!-- テキスト --> <div class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <span class="cd-modal-bg"></span> </div> <div class="cd-modal"> <div class="cd-modal-content"> <!-- モーダルコンテンツ --> </div> </div> <a href="#0" class="cd-modal-close">Close</a> </section> ボタン、モーダルコンテンツ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く