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)

• 5
• 5

2015/02/9

何を使えばよいか分かった！コーポレートサイトの各ページを制作する前にみておきたいこと

企業サイトはサービスや商品の他、ビジョンやIR情報などで構成されています。今回はWordPressで構築した固定ページを見やすくするために、どういったjQuery・WPプラグイ

2016/02/8

意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ

CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。

2013/07/22

ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７

先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、

2015/06/8

これからGit を始めてみようという人のための使い方と入門フロー

Git（ギット） でどういったことができるか、メリットなどは結構知っている人が多いと思うので、ここでは「コマンドやGUIなどの初歩的な部分だけを１日で使える」ようになるためのフ