スプリットスクリーン・レイアウト、ふんだんな余白、明瞭なタイポグラフィ、微かなエフェクト……
いずれも遊び心あふれるデザイン・トレンドです。
本記事では、これらのトレンディなデザインスタイルを念頭におきながら、フレックスボックス、3D変換、Animate.cssを使って作成したチュートリアルをご紹介します。
主題は、架空のファッションブランドのランディングページです。
パート1ではCSSフレックスボックスとビューポート・ユニットを使ったスプリット・スクリーンのWebサイト・レイアウトの作り方をデモンストレートしました。
パート2の本記事では、同様のテクニックを使ってコンテンツやボタンにアニメーションを付加する方法をご紹介します。
ストラクチャ
パート1ではオーバーレイとコンテンツのラッパー、Animate.cssクラスを使ったアニメーション用のjQueryスニペットまで終わりました。ちょっと復習してみると、
$(“#west .content”).click( function() {
$(“#west-overlay”).addClass(“animated fadeInLeft open”).one(‘webkitAnimationEnd mozAni
スポンサーリンク
【チュートリアル】CSS3アニメーションとトランジションでつくるデュオレイアウト【パート2】
マーケティング最新
コメント