Blog

CSS3アニメーションがひと味違うサイト

border-radiusやbox-shadow、transitionなど、PCサイトでもCSS3を使うことは徐々に増えてきました。

今回は、そんなCSS3を使ってアニメーションをしているサイトで、

ちょっとひと味違う感じのサイトを集めてみました。

 

Georgina Bousia | Architect and Graphic Designer

Georgina Bousia

 

メインビジュアルに使われている、微かに白がかった菱形がゆっくり移動するアニメーションがcss3によって実装されています。
ナビゲーションにbefore疑似要素でつけられた伸び縮みするアンダーラインも面白いです。

 

Wellness|New Balance Japan

Wellness

 

メインビジュアルの動画もインパクトがありますが、コンテンツへのリンクをマウスでホバーしたときの画像の拡大と、変形が面白いです。

 

TRIP(トリップ):観光・体験商品の売買プラットフォーム

TRIP(トリップ)

メインビジュアルのテキスト部分がスライダーと連動してアニメーションしています。
この部分と下のコンテンツ画像はマウスでホバーすると拡大されます。

ホバーすると画像が拡大されるアニメーションの使われたサイトが増えてきている印象を感じました。

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ