calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック

  • 作成：2014/06/2
  • 更新：2014/11/01
  • Web制作
CSS_Animation_tips

WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。

Sponsored Link

もくじ

マスク

フルスクリーン系

画像可変

図形

画像切り抜き

高解像度ディスプレイ対応

マスク

Transitionプロパティはループがなく、自然と最初の状態に戻るという特徴があります。マウスホバーなどのキッカケを与えて動かしたいときに使用します。

１．マスク・キャプション

mask-caption_CSS

マウスオーバー時に透過レイヤーさせ、文字を重ねて表示させる様々な方法をデモとコード付きで解説してあります。

transition-durationプロパティはどれくらいかけて変化させるか（実行時間）、transition-delayプロパティはいつ変化させるか（開始されるまでの時間）を意味します。transform:translate()は表示位置を移動、transform: scale();は拡大です。

２．円形キャプション

circular-caption_CSS

円形のホバーエフェクトアニメーション。transition: all 0.8s ease-in-out;のease~は、ease(ゆっくり) ease-in(ゆっくり→最高速) ease-out(最高速→ゆっくり) ease-in-out(ゆっくり→最高速→ゆっくり) linear(等速変化) 。

３．全画面+オーバーレイ

fullscreen-overlay_CSS

オーバーレイでメニューを出します。visibilityプロパティでボックスを消さず、表示・非表示を切り替えています。

visibility: visible;

４．ストライプの背景

background-stripes_CSS

repeating-linear-gradient()を使うと簡単にストライプができます。サンプルの45deg（45度）はストライプの角度(この場合、to right にすると縦縞)、色、始点、終点といった感じです。

例：background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );

IE9以下でグラデーションを使用したい場合は、filterを使います。

フルスクリーン系

５．スライド＋フルスクリーン

slide-fullscreen_CSS

フルスクリーン背景画像のスライドショーをCSSのみで表示。

６．全画面背景動画

animation_CSS

レスポンシブ対応でvideo要素に対応していないブラウザでは、代替の背景画像が表示されるとのこと。jQueryプラグインではtubularといったものもあります。

７．パララックス

parallax_CSS

CSSだけで作るパララックス。

８．フルスクリーンにフィット

fit-screen_CSS

background-size: cover;は縦横比を維持したまま、指定領域に画像が必ず表示されている状態にします。

９．背景画像をブラウザごとに最適化

optimized_CSS

background-size: contain;を使うと縦横比を維持したまま、指定領域に画像のすべてが表示されるようにします。

１０．メガメニュー

megamenu_CSS

メニューアイコンをクリックすると、横幅いっぱいに落ちてくるメガメニュー。フルスクリーン系のサイトによく合いそうです。

画像可変

１１．画像で枠線を表現する

represent_CSS

区切り線を入れると情報の区切りが明確になるので可読性が向上します。hrを使わずにborder-imageを使います。１枚の画像で上下左右の画像ボーダーを実現できます。

１２．半透明＋フィルタ

semi-transparent-filter_CSS

CSS3ではfilterプロパティでフィルタをかけることができます。ベンダープレフィックスと一緒に使用してください。例：ぼかす場合は-webkit-filter: blur(10px);、白黒にする場合は-webkit-filter: grayscale(1);など。

１３．文字以外を透明にしてレイヤーさせる

transparentnon-character_CSS

rgba()はcolor やbackground-color の値を透明度と同時に指定できます。例えばalpha の値 .3 は30%を表します。

セレクタ { color : rgba(赤, 緑, 青, アルファ); }

図形

１４．ループ＋ローディング

loop-loading_CSS

ループさせるような同じ動きを繰り返すアニメーションであれば、CSS Animations を使います。Animationsプロパティはウィンドウ読み込みと同時に動かせます。キーフレームの定義は、「@-webkit-keyframes」+「任意の名前」、始まりと終わりの状態は「%」を使います。

１５．3Dボックス

3d-box_CSS

最近WordPressテーマでよく見かけるようになってきた3Dのボタンやボックス。

１６．矢印ナビ

arrow-navigation_CSS

矢印をからめたナビゲーションスタイル一覧。マウスホバーで横幅を変え、コンテンツを表示したり様々なエフェクトを実現します。画像ギャラリーやスライドなどに。

画像切り抜き

１７．六角形

hexagon_CSS

linear-gradient()で角度を変更し、画像を六角形にくり抜く方法。プロフィール写真やアイコンなどを囲んだり、かわいい見せ方ができそうです。

１８．卵型＋星形

egg-star_CSS

こちらはradial-gradient()を使い卵型、linear-gradientで星形で画像をくり抜く方法。

高解像度ディスプレイ対応

１９．ピクセル比に応じて画像を指定

鮮明な写真を使うとき、ボケが目立たないように高解像度ディスプレイ用に画像を最適化したいところです。image-set関数を仕様するとデバイスピクセル比に応じて画像を指定することができます。現在ではChrome/safariなどで対応してます。

例：background:-webkit-image-set( url(1x.png) 1x, url(2x.png) 2x );

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL：西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。