ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる 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ページ目に続きます。
14. Full CSS Map Creator
CSS のみで作成できる地図作成キットで、クリックすることで土地の種類を選択できます。
See the Pen Full CSS Map creator by Vincent Durand (@onediv) on CodePen.
15. Payment UX
SVG と CSS でスタイリングされた、ショッピングの決済用UXデザインのコンセプト。
See the Pen Payment UX by Jon Kantner (@jkantner) on CodePen.
16. Credit Card Checkout
サングラスを掛けたキャラクターが、購入ボタンのクリックを促すCSSエフェクト。
See the Pen DailyUI 002: Credit Card Checkout by Alex Zaworski (@alexzaworski) on CodePen.
17. Contact Me Animation Concept
紙飛行機が飛んでいくアニメーションエフェクトを実装した、お問い合わせ用CTAレイアウト。
See the Pen Contact Me Animation Concept by Nizar (@nizarmah) on CodePen.
18. Title Text Animation
見出しタイトルやロゴデザインなどにも活用したい、ふわりとフェードインで表示されるテキストエフェクト。
See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.
19. Interactive Map with jQuery
SVGでデザインされた立体的な地図をつかい、セクションごとに色分けしていきます。
See the Pen Interactive Map with Jquery by Sara B. (@sara_bianchi94) on CodePen.
20. Loader a Day17
CSSでスタリング、デザインされた読み込みローディング用アニメーション。
See the Pen Loader a Day (day 17) by Reinier Kaper (@TheDutchCoder) on CodePen.
21. Android Nouget Update Animation
こちらもCSSのみでスタイリングされた、円形サークルをレイヤー状に重ね、アニメーションを加えています。
See the Pen Android Nougat update animation by Stove (@stevn) on CodePen.
22. Mystery Meat Hamburger Menu
どこでも見かけるハンバーガーメニューですが、ボタンを押そうとするとなかなか押すことができません。
See the Pen Mystery Meat Hamburger Menu 🍔 by Tommy Hodgins (@tomhodgins) on CodePen.
23. They Call it Big-Mac
ハンバーガーメニューに文字テキストを加え、ユニークなアニメーションでより魅力的に。
See the Pen They call it le Big-Mac by Ruslan (@mrspok407) on CodePen.
24. Animation Dial Button
モバイル向けレイアウトなどにも活用できる、クリックで展開するサークル型ナビメニュー。
See the Pen Animated dial buttons by jh3y (@jh3y) on CodePen.
25. Three Simple CSS Button Hover Effects
半透明レイヤーを重ねた、CSSでスタイリングされたボタン・ホバーエフェクト。
See the Pen Three Simple CSS Button Hover Effects by Dronca Raul (@rauldronca) on CodePen.
26. Micro Interaction Button
ホバーによって矢印を移動させることで、より押したくなるボタンを演出します。
See the Pen Micro Interaction Button by Phil Hoyt (@philhoyt) on CodePen.
今後、特にデザインで重要になってくるアニメーションを加えた、ボタンエフェクトなどの3ページ目に続きます。
27. Cool Button Hover Effect
アウトラインにアニメーションを加えた、ボタンエフェクト用スタリング。
See the Pen Cool button hover effect by Elena Nazarova (@nazarelen) on CodePen.
28. Fireworks Button
ボタンをクリックすると、かわいい火花が飛び散ります。
See the Pen Fireworks Button 😀 by Alex Zaworski (@alexzaworski) on CodePen.
29. Anime.js Logo Animation
アニメーション用ライブラリ Anime.js のサンプル用ロゴエフェクト。
See the Pen anime.js logo animation by Julian Garnier (@juliangarnier) on CodePen.
30. Logo
気持ちの良いアニメーションをロゴに採用した素敵なスタイリング。
See the Pen Logo by Marco Barría (@fixcl) on CodePen.
31. Auto-mation Animation
カクカクとした面白い動きを、ロゴデザインに加えるスタイリング。
See the Pen Auto-mation animation by Greg Hovanesyan (@gregh) on CodePen.
32. Text Slice Animation & Mix Blend Mode Invert
見出しタイトルにアニメーションを加え、使用している画像はモノクロですが、CSS filter で階調の反転を適用しています。
See the Pen Text Slice Animation and Mix Blend Mode Invert by Stephen Scaff (@StephenScaff) on CodePen.
33. Packery Layout with 3D Blocks
立体的なレイアウトと動きを、CSSでスタイリングしています。
See the Pen Packery layout with 3D blocks by Bennett Feely (@bennettfeely) on CodePen.
34. Delivery Truck Animation
@keyframes を利用することで、CSSのみでスタイリングされたアニメーション。
See the Pen Delivery truck animation by Dau Jakas (@donnervetter) on CodePen.
35. Mastercard Logo
先日リデザインされたロゴをCSSアニメーションで表現します。
See the Pen mastercard animation by Maxime Bonhomme (@maximebonhomme) on CodePen.
36. Styling CSS Counter
擬似要素を利用することで、より柔軟性のあるリスト形式のスタイリングを実現できます。
See the Pen Styling CSS Counters by Envato Tuts+ (@tutsplus) on CodePen.
37. The Illusion of Life: SVG Animation Case Study
アニメーションライブラリを比較しながら、読み込み速度も考慮したSVGアニメーションの実装テクニック。
See the Pen The Illusion of Life: An SVG Animation Case Study by Michael Ngo (@hellomichael) on CodePen.
38. Road Block
See the Pen Road Block by Chris Gannon (@chrisgannon) on CodePen.
39. SVG Kiosk Icon Menu
各アイコンをクリックするたびに、背景カラーがヌルリと移動するアニメーション。
See the Pen SVG Kiosk Icon Menu by Chris Gannon (@chrisgannon) on CodePen.
40. Blobs
マウスカーソルに追従するカラフルなアニメーションで、滑らかな動きはcanvasならでは。
See the Pen blobs by Misaki Nakano (@mnmxmx) on CodePen.
41. Rainbow Rotaing Dots
カラーホイールをモチーフにした配色のドット柄が渦を巻く、ユニークなローディング用アニメーション。
See the Pen Rainbow Rotating Dots by Nick Sheffield (@nicksheffield) on CodePen.
