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)

2014/12/8

綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ

比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそう

2015/08/24

Web制作者は確実に学習しておきたい、日本語リファレンス一覧

フロントエンド開発規模が増大してカオスな状態みたいだし、何が流行っていて何を勉強すればよいのか分からない。今回は出来るだけ日本語対応してある、2015年も引き続きトレンドになる

2014/08/4

メモしておきたい！サイト制作時に知っておくと「意外」と役に立つこと

今回はサイト制作において毎回使うこと、意外と面倒で忘れがちなものをメモしておきます。事前に知っておくことで効率的にコーディング、納品できると思います。 もくじ ドメイン

2016/09/12

スクロールした時に面白いエフェクトを出すためのアイデアまとめ

スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。 製品やサービスを解説するようなハウツー