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

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

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

エンジニア速報は Twitter の@commteで配信しています。

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

ストライプなど繰り返しの要素を作る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)