この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。
スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。
これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。
ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。
コンテンツ目次
- 1. イメージスライダー系
- 2. テキストエフェクト系
- 3. テキストエフェクト系スニペット
- 4. ページレイアウト系
- 5. ナビゲーションメニュー系
- 6. ローディングアニメーション系
- 7. SVGアニメーション系
- 8. 便利、面白系スニペット
- 9. 未来SF系
- 10. ゲーム系
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。
Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめ
イメージスライダー系スニペット
See the Pen
Showtime Parallax Effect by Ali Klein (@AliKlein)
on CodePen.
スライドに合わせてフォントの太さが変化する、Variableフォントを実際に活用したサンプル例として。
See the Pen
Variable Fonts Experiment by Supremo (@SupremoHQ)
on CodePen.
スタジオジブリの海外公開作品をスライド形式でまとめており、画像のトランジションにはあのキャラクターも登場です。
See the Pen
Ghibli Slider by Adam Kuhn (@cobra_winfrey)
on CodePen.
下部に配置してあるボタンをクリックすることで、写真立てがインタラクティブに切り替わるスライダーエフェクト。
See the Pen
Animated Portrait w/ GSAP 2.0 by Darin (@dsenneff)
on CodePen.
React.JSに対応した3Dホバーエフェクト付きのイメージスライダー。
See the Pen
React Slider w/ Hover Effect by Ryan Mulligan (@hexagoncircle)
on CodePen.
テキストエフェクト系スニペット
Airbnbから登場したiOS、 Android、React Native対応のアニメーションライブラリ「Lottie」をつかったサンプル例で、最近のアップデートによりAfter Effectsプラグインも公開されました。
See the Pen
Movin bodymovin by kittons (@airnan)
on CodePen.
See the Pen
Splitting: Laser Write by Martin Pitt (@nexii)
on CodePen.
タイミングに合わせてVariableフォントの太さを変更することで、まるで呼吸をしているようなアニメーションが完成です。
See the Pen
Variable font animation by Michelle Barker (@michellebarker)
on CodePen.
Variableフォントを利用することで、まるで文字テキストが生きているようなアニメーションが魅力的。
See the Pen
Animated Verbs II by Ryan Mulligan (@hexagoncircle)
on CodePen.
上記スニペットに続き、文字テキストがジャンプしている様子をCSSで表現しています。
See the Pen
Animated Verbs by Ryan Mulligan (@hexagoncircle)
on CodePen.
Procedurally Generated CSS Numbers
お好みの数字を入力しボタンをクリックすると、カラフルでユニークなタイルでその数字を表現します。
See the Pen
Procedurally Generated CSS Numbers by Adam Kuhn (@cobra_winfrey)
on CodePen.
CSSのみを利用してネオンライトのような光を表現できるスニペット。
See the Pen
CSS Neon Sign by Ananya Neogi (@ananyaneogi)
on CodePen.
筆記体を手書きしたような表現豊かなアニメーションで再現したテキストエフェクト用スニペット。
See the Pen
Cassie! by Cassie Evans (@cassie-codes)
on CodePen.
Matrix digital rain (animated version)
CSSアニメーションを利用して、文字テキストがずらずらと表示される某映画のようなエフェクトを実現しています。
See the Pen
Matrix digital rain (animated version) by yuanchuan (@yuanchuan)
on CodePen.
文字テキストにマウスカーソルを合わせることで、フォントの太さを瞬時に変更でき、Variableフォントの可能性を感じるスニペット。
See the Pen
Variable Fonts | Compressa by Juan Fuentes (@JuanFuentes)
on CodePen.
ボタンエフェクト系スニペット
ボタンをクリックすると、トラックが荷物を受け取り、商品の配達に向かうアニメーションが素敵です。
See the Pen
Order confirm animation by Aaron Iker (@aaroniker)
on CodePen.
ボタンをクリックしようとすると、後ろから落書きのようなキャラクターが登場するアニメーション付き。
See the Pen
Call to Action Hype Man by Mariusz Dabrowski (@MarioD)
on CodePen.
https://codepen.io/aaroniker/pen/KjJQER
ボタンをクリックするとダウンロードが開始され、進捗状況をアニメーション付きプログレスバーで確認できるエフェクト。
See the Pen
Download button animation by Aaron Iker (@aaroniker)
on CodePen.
ボタンをクリックしようとマウスを周辺に移動させると、ポインターカーソルがボタンの方向を指差します。
See the Pen
Mouse cursor pointing to cta by Aaron Iker (@aaroniker)
on CodePen.
マウスクリックしたポジションに応じて、インクが垂れたようなドリップを表示するホバーエフェクト。
See the Pen
Paint Drop Hover by Mariusz Dabrowski (@MarioD)
on CodePen.
ページレイアウト系スニペット
CSS Gridレイアウトを活用することで、まるで雑誌のようなレイアウトを自由自在に作り上げます。フルスクリーンでの表示推奨です。
See the Pen
CSS Grid: Magazine Layouts by Olivia Ng (@oliviale)
on CodePen.
まるで地元スーパーのチラシのようなレイアウトをCSS Gridで実現したレイアウト例。
See the Pen
CSS Grid: Coupons! by Olivia Ng (@oliviale)
on CodePen.
Color this sofa! – SVG + Blend Mode trick
ソファの色と背景色をSVGとCSSブレンドモードを使って、リアルタイムにプレビューできる機能。Generate Randomでランダムで色が決まります。
See the Pen
Color this sofa! – SVG + Blend Mode trick by Kyle Wetton (@kylewetton)
on CodePen.
アニメーションにおけるイージングを分かりやすくまとめ、視覚化したAnime．js用ライブラリ。
See the Pen
Anime.js Ease Visualizer by Julian Garnier (@juliangarnier)
on CodePen.
これまでの制作実績をまとめたポートフォリオ用レイアウトで、マウススクロールとクリックのみで進めることができるコンテンツ遷移にも注目です。
See the Pen
Agency website POC by Jamie Coulter (@jcoulterdesign)
on CodePen.
Twotwentytwo.se – smooth scroll with skew effect
マウスをスクロールさせると画像や文字テキストが歪みながらスムーズに表示される仕掛け。
See the Pen
Twotwentytwo.se – smooth scroll with skew effect by jesper landberg (@ReGGae)
on CodePen.
How to Build a Filterable Thumbnail Layout with CSS Grid, Flexbox and JavaScript
サムネイル画像で振り分けソートできる機能のついた、CSS GridとFlexboxを組み合わせたレイアウトサンプル例。
See the Pen
How to Build a Filterable Thumbnail Layout with CSS Grid, Flexbox and JavaScript by Envato Tuts+ (@tutsplus)
on CodePen.
残っているタスクをクリックすると、チェックマークがアニメーション付きで点灯するToDoリスト用レイアウト。
See the Pen
To-do list by Sabine Robart (@_Sabine)
on CodePen.
リスト表示の番号を美しいグラデーションを使って、少しずつ色を変化させるCSS小技テクニック。
See the Pen
CSS Gradient Counter List by Mattia Astorino (@equinusocio)
on CodePen.
Assorted cards & images (CSS Grid + BEM)
CSS Gridを利用することで、これまでは難しかったレイアウトをより手軽に、そして自由に作成できるようになりました。
See the Pen
Assorted cards & images (CSS Grid + BEM) by Stephen Lee (@abcretrograde)
on CodePen.
トグルをクリックすると、泡がぱちんと弾けながら切り替わります。
See the Pen
Bubble Toggle by Chris Gannon (@chrisgannon)
on CodePen.
Pro Illustration (click the toggle!)
トグルを使うことでブラインドの開閉を行うことができるアニメーションイラストレーション。
See the Pen
Pro Illustration (click the toggle!) by Klare (@klare)
on CodePen.
CSSのみでスタイリングした淡い光が印象的だったトグルスイッチ。
See the Pen
Pure CSS Bulb Switch by Grzegorz Witczak (@Wujek_Greg)
on CodePen.
背景にぼかしガラスを重ねたようなエフェクトをCSSのみで実現したテクニック。
See the Pen
CSS – Frosted Glass by Kyle Wetton (@kylewetton)
on CodePen.
画面全体を縦横無尽に飛び回るカラフルなシェイプをCSSアニメーションで描いたデモサンプル。
See the Pen
CSS Particles by rx0079 (@re0079)
on CodePen.
Clip Clop Clippity Clop [CSS Only]
走る馬をクリックすると、どのようにCSSでスタイリングしたのかスローモーションで確認できます。
See the Pen
Clip Clop Clippity Clop [CSS Only] by Steve Gardner (@ste-vg)
on CodePen.
Dither / Dissolve CSS Gradients
さまざまなシェイプをCSSスタイリングで描き、そこにザラザラとしたグランジ感も一緒に追加していきます。
See the Pen
Dither / Dissolve CSS Gradients by David J. Aldred (@DavidJAldred)
on CodePen.
レインボーカラーのサークル円が立体的に回転しながら、形を変化させていくユニークなスニペット。
See the Pen
Zdog and Goo by Chris Gannon (@chrisgannon)
on CodePen.
CSSのみでスタイリングされたとは思えないほどリアルな少女の表情を描いたポートレイトイラスト。
See the Pen
Pure CSS Only Portrait – Isla by Ben Evans (@ivorjetski)
on CodePen.
CSSのみでデザインされたストップウォッチで、再生と停止ボタンを見事に稼働するテクニック。
See the Pen
CSS-only chronometer by Tamer Aydn (@tameraydin)
on CodePen.
マウスをドラッグしたところから、ぷくぷくと泡が飛び出てくるエフェクト。
See the Pen
Pixi Sprite Bubbles by Juan Fuentes (@JuanFuentes)
on CodePen.
Simple CSS Waves | Mobile & Full width
ゆらゆらと波のように揺れながら変化する様子をCSSで表現したテクニックで、モバイル端末でもうまく表示することができます。
See the Pen
Simple CSS Waves | Mobile & Full width by kachibito (@kachibito)
on CodePen.
Back to top with progress indicator
コンテンツがどれくらい残っているのか確認できる、トップへ戻るボタンのつくり方。
See the Pen
Back to top with progress indicator by Ivan Grozdic (@ig_design)
on CodePen.
Cursor with progress indicator
上記サンプル同様に、コンテンツがどのくらい残っているかを確認できますが、こちらではマウスカーソル自体を使っています。
See the Pen
Cursor with progress indicator by Ivan Grozdic (@ig_design)
on CodePen.
Google-like Thanos disintegration
表示されているカード型コンテンツをクリックすると、灰のようになって散るアニメーション。
See the Pen
Google-like Thanos disintegration by Johan Fagerbeg (@birjolaxew)
on CodePen.
ナビゲーションメニュー系スニペット
表示されたアイコンをクリックすると、詳細が文字テキスト付きで表示されるナビゲーションメニューで、モバイルアプリなどで便利な使い方かもしれません。
See the Pen
jONPjoV by Steve Gardner (@ste-vg)
on CodePen.
Bootstrapフレームワークでナビメニューとヒーローイメージを重ねた透明なデザインが特長で、レスポンシブにも対応しています。
See the Pen
Transparent Navbar & Hero by Allen Pavic (@alvic)
on CodePen.
Responsive Bootstrap mega menu
こちらもBootstrapフレームワークのナビメニューを拡張し、メガメニューでさまざまなコンテンツをまとめて表示できるスニペット。
See the Pen
Responsive Bootstrap mega menu by Martin Stanek (@skywalkapps)
on CodePen.
各アイコンをクリックすると、下線ラインがグラグラしながらアニメーション変化するシンプルなナビメニュー。
See the Pen
Wobbly underline by Mikael Ainalem (@ainalem)
on CodePen.
シンプルで明快なナビメニューにCSSスタイリングを加えることで、ユニークなアニメーションが印象的なハンバーガーメニューの展開を表現しています。
See the Pen
Fork This Nav by Ryan Mulligan (@hexagoncircle)
on CodePen.
ローディングアニメーション系スニペット
フォントの間を飛び回る点が見ていて飽きないローディング画面。
See the Pen
Loading by Katherine Kato (@kathykato)
on CodePen.
カセットテープがくるくると回転するオールドスクールなローディングアニメーション。
See the Pen
Cassette Tape Loader by Chris Gannon (@chrisgannon)
on CodePen.
ゆらゆらと揺れながら文字テキストが表示されるなどタービュランス、乱気流を表現しています。
See the Pen
Loader turbulence by Damien Montastier (@damienmontastier)
on CodePen.
赤と青それぞれの半円がコロコロ転がることで、サークル円を作り出すローディングアニメーション。
See the Pen
CurveBall by Chris Gannon (@chrisgannon)
on CodePen.
Rotating Rounded Triangles Animation (SCSS)
丸みのある三角形が規則的に動くことで、目の錯覚を利用して立体的に見えるローディング画面。
See the Pen
Rotating Rounded Triangles Animation (SCSS) by Mark Miscavage (@markmiscavage)
on CodePen.
シンプルな図形を組み合わせて完成したローディングアニメーション6種類をまとめたライブラリ。
See the Pen
CSS Loading Animations by Alex (@AlexWarnes)
on CodePen.
CSSをつかって水面の波紋を表現したローディングアニメーション。
See the Pen
custom css wave loader by CSS Points (@csspoints)
on CodePen.
SVGアニメーション系スニペット
3つのSVGレイヤーを重ねることで、立体的でよりリアルな雲模様を表現できるCSSスタイリング。
See the Pen
3-Layer Cloud Composite by BEAU.HAUS (@beauhaus)
on CodePen.
便利、面白系スニペット系スニペット
背景の画像に合わせて、光が差し込む様子をアニメーション付きで表現しています。
See the Pen
Sunbeams by Ko.Yelie (@ko-yelie)
on CodePen.
カンバス上を鉛筆をつかって自由にお絵かきできるスケッチパッドで、鉛筆の色を変更したり、描いたスケッチをPNGで保存することもできます。
See the Pen
Sketchpad by Brad Arnett (@bradarnett)
on CodePen.
Neon Clock (Using React Hooks)
現在時刻をネオンサインで表示しながら、正確な時間を文字テキストでも伝えます。
See the Pen
Neon Clock (Using React Hooks) by Ganesh Prasad (@gnsp)
on CodePen.
CSSのみを利用することで、画面全体にグリッチエフェクトを再現できるテクニック。
See the Pen
Image glitch effect by Alain (@AlainBarrios)
on CodePen.
マウスカーソルに合わせて動くコミカルなDisneyの某キャラクターを再現したスニペット。クリックすると音が出る仕掛けも。
See the Pen
Vue-controlled Wall-E by Sarah Drasner (@sdras)
on CodePen.
マウスの動きに合わせて進行方向や速度が変化していきます。
See the Pen
Strandbeest walk by Nick Watton (@2Mogs)
on CodePen.
大都市の街並みをCSSのみでスタイリング、デザインしたユニークな作品。ポップアップで飛び出るエフェクトにも注目です。
See the Pen
CSSCities by Adam Kuhn (@cobra_winfrey)
on CodePen.
ドイツのバウハウス誕生100周年を祝うCSSデザイン。
See the Pen
100 years of Bauhaus by Juan Ignacio (@juanignaciorios)
on CodePen.
未来SF系スニペット
まるでアーケードゲームの世界をそのまま表現したような、鮮やかな80年代ネオンエフェクトを実現しています。
See the Pen
[wip] motion blur transition by Robin Delaporte (@robin-dela)
on CodePen.
VR体験ができるスニペットで、クリックでジャンプするなど本格的なつくり。
See the Pen
Three.js Mobile VR Sonic by Baron (@b29)
on CodePen.
光沢感のあるチューブが七色に色を変化させながら、グニャグニャと形を変えるユニークなThreeJSコレクション。
See the Pen
Strange Tubes #2 by Kevin Levron (@soju22)
on CodePen.
人工知能を活用することで、立体的でもこもことしたシェイプをデザインできます。
See the Pen
AI Assistant Blob by Aaron Iker (@aaroniker)
on CodePen.
きらびやかに無数の桜の花びらが舞う様子を描いた高画質なアニメーション。
See the Pen
tqdmv by Anand Davaasuren (@at80)
on CodePen.
WebGLアニメーション技術を使うことで、驚くほど立体的なアニメーションを表現できます。
See the Pen
WebGL Wonderland #7 by Colin van Eenige (@cvaneenige)
on CodePen.
プラスチックが漂う海の中を泳ぐクラゲのような生き物を、マウスカーソルで操作できます。
See the Pen
The Plastic Ocean by Onload (@onload)
on CodePen.
超高速で光り輝く粒子の間を通り抜ける、疾走感のたまらないアニメーションが魅力です。
See the Pen
3D Software Vertex Ocean by Radik (@H2xDev)
on CodePen.
ゴッホの名作を立体的な粒子状に表現した作品で、WebGL技術を用いることで圧倒的なグラフィックを描きます。
See the Pen
The Starry Night by Darryl Huffman (@darrylhuffman)
on CodePen.
ビリビリと飛び回るエネルギーがマウスカーソルに合わせて動き出します。
See the Pen
Energy by Thibaud Goiffon (@Gthibaud)
on CodePen.
点と点で結ばれた線が、七色の美しい色合いに染まりながら広がっていくアニメーションで、数値も自由に調整できます。
See the Pen
Exploding Points by Devamardeep Hayatpur (@devamar)
on CodePen.
ゲーム系スニペット
ランダムなルービックキューブを色ごとにきちんと揃えていきましょう。ダブルクリックでゲーム開始です。
See the Pen
The Cube by Boris Šehovac (@bsehovac)
on CodePen.
歩行者に注意しながら、突進してくる豚のみを撃ち抜くシューティングゲーム。最後のオチも素敵。
See the Pen
30 – 50 hogs by Cassie Evans (@cassie-codes)
on CodePen.
矢印キーで左右に移動しながら、Spaceバーで弾を打つシューティングゲーム。
See the Pen
Space Shooter game by Andrew Rubin (@andyranged)
on CodePen.
表示されているブロックとぴったり重なるようにし、ブロックをどれだけ積み上げることができるかを競います。
See the Pen
Tower Blocks by Steve Gardner (@ste-vg)
on CodePen.
上下から迫ってくる赤と青のボールの色に合わせて、中心にある玉の色をクリックでマッチさせる、シンプルだけど中毒性のあるゲーム。
See the Pen
Color Collision by Dev Loop (@dev_loop)
on CodePen.
表示されている点を順番通りに線で結び、浮かび上がってくるものを当てるゲーム。
See the Pen
Connecting dots by Meiko Hori (@meiq)
on CodePen.
CSSのみでデザイン、作成された神経衰弱ゲーム。
See the Pen
Pure CSS Concentration game by Kevin Newcombe (@kevinnewcombe)
on CodePen.
