ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。
詳細は以下から。
コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
01. Fixed Images That Fades as You Scroll
画面を２分割し、スクロールに応じてイメージ画像を切り替えるエフェクト。流行しているウェブデザイントレンドのひとつ。
See the Pen fixed images that fade as your scroll by Dave Redfern (@daveredfern) on CodePen.
02. Double Exposure Carousel Slider
多重露光エフェクトをイメージスライダーに適用した、新しいアニメーションの実装方法。
See the Pen double exposure carousel slider by Misaki Nakano (@mnmxmx) on CodePen.
03. Cool Layout with Complex Changeable Animation
マウスホバーに合わせてアニメーション付きで展開するイメージスライダー。
See the Pen Cool Layout with Complex Chainable Animation by Nikolay Talanov (@suez) on CodePen.
04. Getting Clippy
スクロールに応じて、背景と文字テキストを切り替えるスライダーエフェクト。
See the Pen Gettin’ Clippy by Stephen Scaff (@StephenScaff) on CodePen.
05. SVG Slider
スライダーが切り替わるたびに、ポヨンとした動きを追加したイメージスライダー。
See the Pen JKkqRr by simon (@simonpatrat) on CodePen.
06. Flat Design Amusement Park SVG
SVG ファイルを使い、CSSのみでスタイリングされた、遊園地モチーフのアニメーション・エフェクト。
See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.
07. Link Hover Effect
シンプルで分かりやすいリンク用テキストエフェクトをセットにしています。
See the Pen kXjZqo by rtrsmarian (@rtrsmarian) on CodePen.
08. Flipper
マウスホバーに合わせて、パネルがパタパタと切り替わるようなテキストリンク用エフェクト。
See the Pen Flipper by Christian Petersen (@cbp) on CodePen.
09. Text Fading / Blurring Away
スクロールに応じて、文字テキストの開始と終了部分をフェードアウトで、ぼかすCSSスタイリング・テクニック。
See the Pen Text fading / blurring away by Erik Terwan (@terwanerik) on CodePen.
10. Image Hover 63 Effects
CSSのみでスタイリングされた、ホバーエフェクト63種類を揃えた、実用性の高いスニペットのひとつ。
See the Pen image hover 63 effects by Mahesh (@maheshambure21) on CodePen.
11. CSS Transform Examples
きちんと理解するまでスタリングがむずかしく感じることもある、css transform の違いをまとめたチート用サンプル。
See the Pen Css3 Transform by Vineeth.TR (@vineethtr) on CodePen.
12. Change Background Colors with Fade Animation As You Scroll
スクロールに応じて背景カラーを滑らかに変化させます。
See the Pen Change background colour with fade animation as you scroll by Dave Redfern (@daveredfern) on CodePen.
13. 404 Glitched Out
まるでパソコンが壊れてしまったような、グリッチエフェクトをCSSのみで再現しています。
See the Pen 404 – Glitched out by Jonathon Iles (@ZonFire99) on CodePen.
CSSを利用した、すこし前では考えられなかったテクニックが満載の2ページ目に続きます。
