CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
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.
ミスト
CSSアニメーションを使いグラデーションを動かし、背景に霧がかかったようなエフェクトをかけています。あまり見かけない効果です。
See the Pen Misty Background by Adrien Bachmann (@AdrienBachmann) on CodePen.
スノー
3枚の雪画像を使って、アニメーションで動かしています。
See the Pen CSS3 Snow Animation by Nicky Christensen (@NickyCDK) on CodePen.
パーティクル
粒子状の光源が中心に向かって消えるようなエフェクト。サービスページに使うとインパクトあり。
See the Pen CSS Particle Animation by Nate Wiley (@natewiley) on CodePen.
遠近感を出す
遠近感を指定する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.
ホバーで背景切り替え
マウスオーバーによって背景が切ります。背景を2枚用意しopacity
によって切替わるようにしてあります。
See the Pen Background change in pure CSS by Miro Karilahti (@miroot) on CodePen.
ホバーアコーディオン
マウスオーバーによって背景画像が伸縮、他は縮小するようになっています。
See the Pen Responsive Accordion (Background Images) by Michael Ferry (@ferry) on CodePen.
Responsive Accordion (Background Images)
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
- それとなく今風にできる、グローバルナビゲーションのコード集
Comments
-
-
すみません!中みたらなにも書いてありませんでした!笑笑
はじめまして。
とても参考になる記事でした、ありがとうございました!
ですがcssのみじゃできないのでは〜とも思いました