CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ

• 作成：2016/11/7
• 更新：2016/11/07
• Web制作

404ページやランディングページに今時のおしゃれなエフェクトを付与したい。今回はCSSのみで簡単に実装できる、背景を動かすエフェクトをまとめました。

テキスト部分だけの背景を動かす

ストライプなど繰り返しの要素を作るrepeating-linear-gradient関数（repeating-linear-gradient - CSS | MDN）を使い、グラデーションの繰り返しを作ります。さらにmix-blend-mode: screen;で、
要素を混合しています。

mix-blend-mode: screen;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #9E2053 1em, orange 50%), repeating-linear-gradient(45deg, #111626, #111626 1em, pink 1em, #571B3D 50%);

See the Pen Single element animation by Octavector (@Octavector) on CodePen.

マウスオーバーで自動スクロール

こちらは再掲載になりますが、マウスオーバーにて縦長の画像をスクロールさせるコードです。縦長ページを限られたスペースで見せたいときに使うとよいでしょう。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。

<div class="box-fixed">
  <div class="field-wrap">
  <div class="field-detail">
  <img src="img/long.png" >
  </div>
  </div>
</div>

.box-fixed {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.field-wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.field-detail {
  transition: all 1s;
}

.field-detail img {
  width: 100%;
}

.field-detail:hover {
  margin-top: -2000px;
  transition: all 15s;
  -webkit-transition: all 15s;
}

テキストにグラデーション

テキスト部分だけにグラデーションのエフェクトを付与しています。@keyframesを使いsvgを動かしています。

See the Pen Text Effect - Mystique by Chris Johnson (@jhnsnc) on CodePen.

Text Effect - Mystique

ミスト

CSSアニメーションを使いグラデーションを動かし、背景に霧がかかったようなエフェクトをかけています。あまり見かけない効果です。

See the Pen Misty Background by Adrien Bachmann (@AdrienBachmann) on CodePen.

Misty Background

スノー

3枚の雪画像を使って、アニメーションで動かしています。

See the Pen CSS3 Snow Animation by Nicky Christensen (@NickyCDK) on CodePen.

CSS3 Snow Animation

パーティクル

粒子状の光源が中心に向かって消えるようなエフェクト。サービスページに使うとインパクトあり。

See the Pen CSS Particle Animation by Nate Wiley (@natewiley) on CodePen.

Particle Animation

遠近感を出す

遠近感を指定するperspectiveを使い奥行きを出して背景を動かしてます。

See the Pen Perspective background from old Semantic UI site by Luciano Tonet (@tonetlds) on CodePen.

Perspective background from old Semantic UI site

ボーダーをバウンスさせる

CSSアニメーションによって、box-shadowの幅を変えているだけですが、ありそうでなかった動き。

See the Pen Bounce Effect by Simon Busborg (@simonbusborg) on CodePen.

Bounce Effect

ホバーで背景切り替え

マウスオーバーによって背景が切ります。背景を2枚用意しopacityによって切替わるようにしてあります。

See the Pen Background change in pure CSS by Miro Karilahti (@miroot) on CodePen.

Background change in pure CSS

ホバーアコーディオン

マウスオーバーによって背景画像が伸縮、他は縮小するようになっています。

See the Pen Responsive Accordion (Background Images) by Michael Ferry (@ferry) on CodePen.

Responsive Accordion (Background Images)

2013/08/5

ここまで出来る！覚えとくと便利な「プログラム」サンプルまとめ

食材を扱っているお客さんから、「ECサイト」を作ってくれと頼まれたので作成しました（事情により、CMSは使えず）。さらにメンテンスが楽になるように更新やSEOを自動化しました。

2013/01/21

無料すぎて助かった！WEB制作が「はかどる」素材まとめ

無料素材のブックマークが無限に増えてきた そうだ！整理しよう 今回は一つ一つ紹介せず、すでに「素敵にまとめてあるサイト」をまとめました。まとめ系４８サイトのまと

2017/08/28

CSSだけでOK！レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー

CSSだけで動く「ズームインとズームアウトをフェードしながら交互に繰り返すCSSスライダー」です。 作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示して

2015/05/25

Webデザイナーやフロントエンドが「独り立ち」できるビジネス向け技術書11選

今後のWeb制作では受託だけじゃなくて販売できるレベルの商品を作りたい。上から指示された分業だけでなく、一人でも一貫して制作できる技術を知っておきたい。 実際にどういった本が