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/06/9

Web制作者が捗る！知識が増える2014年トレンドまとめ

トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえ

2014/10/14

今風になった！Web制作で使える最近のjQueryプラグインまとめ

比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものま

2014/04/7

知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ

あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業

2016/07/19

JavaScript無し！CSSで簡単に動きを実装するテクニックまとめ

JavaScript無しで実装するCSS小技まとめです。細部にちょっとした動きを取り入れたいときなど、知っておくと便利なエフェクトをまとめました。 メタ言語でなく、C