思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。
新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。
コピペで実装できる、最新WebテクHTML/CSSコードスニペットまとめ
マウスの動きに合わせて、文字テキストがゆらゆらと揺れるアニメーションエフェクト。
See the Pen
Turbulence font – SVG by Damien Montastier (@damienmontastier)
on CodePen.
Volume Controlled Variable Fonts!!!!
内蔵マイクの音を拾い、音の強弱に合わせてアニメーション変化するテキストエフェクト。
See the Pen
Volume Controlled Variable Fonts!!!! by Peter Barr (@petebarr)
on CodePen.
ネオンサインのように光る文字テキストをSVGファイルで表現しています。
See the Pen
The Staak Shack – Color Pop by Staak (@Staak)
on CodePen.
軽快なアニメーション表示がポイントとなるエフェクトで、ロゴデザインなどに利用したいテクニック。
See the Pen
Animating SVG Text by Omar Elbaga (@omarel)
on CodePen.
映画のワンシーンなどで使われている、文字が画面外から飛び出すエフェクトをCSSのみで表現しています。
See the Pen
FlyIn Movie Title by Vuild (@vuild)
on CodePen.
マウスカーソルを動かすことで、自由に文字テキストの形を変化させることができるスニペット。
See the Pen
Repellers by Johan Karlsson (@DonKarlssonSan)
on CodePen.
マウスの動きに合わせて、ハーフトーン状にマスキングされるテクニック。
See the Pen
Canvas Proximity Mask by Ricardo Mendieta (@mendieta)
on CodePen.
マウスカーソルがキラキラの流れ星になるデザインテクニック、細かい調整を自分でカスタマイズできます。
See the Pen
Shooting Star by Ko.Yelie (@ko-yelie)
on CodePen.
マウスの動きに合わせて、無数に瞬く星がワープのように移動するアニメーションエフェクト。
See the Pen
rymd by Hakim El Hattab (@hakimel)
on CodePen.
グリッチテキストエフェクトを使い、映画マトリックス風のテキストエフェクトを実現しています。
See the Pen
WebGL CRT Neon Matrix Effect by Nick Matantsev (@unframework)
on CodePen.
CSSのみでスタイリングされた、ぐるぐると立体的に動くクレジットカード。
See the Pen
CSS 3D floating Credit Card! by Kivanfan (@kivanfan)
on CodePen.
文字テキストにカーソルを合わせると、紙吹雪のようにピクセルが爆発するエフェクト。
See the Pen
Web Components: Barfy Stars by Liam Egan (@shubniggurath)
on CodePen.
文字テキストが水面のように波打つ様子をアニメーションで表現したCSSテクニック。
See the Pen
Animated wave clipped by text by web-tiki (@web-tiki)
on CodePen.
CSSのみでスタイリングされたウェーブ型アニメーションテキストエフェクト。
See the Pen
Only CSS: Text Wave by Yusuke Nakaya (@YusukeNakaya)
on CodePen.
Stepper Iteration with Anime JS
マウスを上下にドラッグすることで、マイクロインタラクション付きで数字で切り替わる仕組み。
See the Pen
Stepper Iteration with Anime JS by Valery Alikin (@AlikinVV)
on CodePen.
Circular Navigation Menu Selector
円形にタイムライン状に並べられたナビゲーションメニュー。
See the Pen
Circular Navigation Menu Selector by Mark Miscavage (@markmiscavage)
on CodePen.
マウスカーソルの動きが、表示された女性ペイントの腕の役目となり、カンバスを自由にペイントします。
See the Pen
11/12: Paint on Mouse Move by Angela He (@zephyo)
on CodePen.
Personal Website – Yahia Refaiea [Beta]
無数の粒子が集まってイメージ写真を成形する、インタラクティブなデザインレイアウトの参考に。
See the Pen
Personal Website – Yahia Refaiea [Beta] by Yahia Refaiea (@YahiaRefaiea)
on CodePen.
Layered animations with anime.js
新しくアップデートされたanime.jsの具体的な使い方の参考にしたい、複雑なレイヤーの重なり方と動き方を表現しています。
See the Pen
Layered animations with anime.js by Julian Garnier (@juliangarnier)
on CodePen.
SVG sphere animation with anime.js
こちらもanime.jsを使った、なめらかなアニメーションが魅力的なコードスニペット。
See the Pen
SVG sphere animation with anime.js by Julian Garnier (@juliangarnier)
on CodePen.
CSS background gradientを利用した、さまざまな形のスタイリング方法をまとめたチートシート。
See the Pen
Gradient Shapes by yuanchuan (@yuanchuan)
on CodePen.
美しいグラデーションカラーのホバーエフェクトは、CSSのみでスタイリング可能な小技テクニック。
See the Pen
CSS Gradient Hover Effect by Jon Daiello (@jondaiello)
on CodePen.
マウスカーソルに合わせてグラデーションカラーが絶えず変化する、インタラクティブなエフェクトが魅力です。
See the Pen
Interactive button border by Tobias Reich (@electerious)
on CodePen.
#CodePenChallenge: Peach Beach
マウスホバーに合わせてグラデーションカラーを変化させる小技CSSテクニック。
See the Pen
#CodePenChallenge: Peach Beach by Ann H. (@merkund)
on CodePen.
カスタマイズされたマウスカーソルをつかって、繊細なボタンエフェクトを演出します。ダーク系ウェブデザインにオススメ。
See the Pen
Button – Fluent Design-Like by Abubaker Saeed (@Abubaker_Saeed)
on CodePen.
本物のボタンそっくりなCSSスタイリングが特長。
See the Pen
Purely CSS Button by Jorge Reyes (@jorgert1205)
on CodePen.
Progress Button Microinteractions
ボタンクリックでアップロードの完了がより分かりやすく表示されます。
See the Pen
Progress Button Microinteractions by Takane Ichinose (@takaneichinose)
on CodePen.
各種ソーシャルメディアへのシェアを容易にするマウスホバーエフェクト。
See the Pen
Hover Me Pill by Joshua Ward (@joshuaward)
on CodePen.
ボタンをクリックすると、指紋認証センサーが発動するデザインテクニック。
See the Pen
Black Biometirics Button by Mikael Ainalem (@ainalem)
on CodePen.
鮮やかなグラデーションカラーを利用した、立体的なマウスホバーエフェクト。
See the Pen
3D Gradient Buttons by Sietse (@firepenguin)
on CodePen.
Randomly generated Pure CSS menu icons w/ markup and SCSS
ランダムに自動生成されるハンバーガーメニュー集。どれもマークアップ記述用SCSSをエクスポートできます。
See the Pen
Randomly generated Pure CSS menu icons w/ markup and SCSS by Jamie Coulter (@jcoulterdesign)
on CodePen.
ドット状のナビメニューにインタラクティブな動きを加えたコンセプト4種類。
See the Pen
Dot Menu Animations by Tamino Martinius (@Zaku)
on CodePen.
左端に表示されたハンバーガーメニューをクリックすると、ドロップダウン状にアニメーション付きで展開します。
See the Pen
Drop-down menu by Ivan Grozdic (@ig_design)
on CodePen.
Burger – Minimal, fullscreen nav.
ナビメニューをクリックすると、左側からスライド式にアニメーション表示されます。
See the Pen
Burger – Minimal, fullscreen nav. by Matthew Blode (@mblode)
on CodePen.
あまり他では見かけないナビメニューの展開アニメーションが披露されています。
See the Pen
Gourmet Hamburger 🍔 by Luke Bailey (@LukeBailey)
on CodePen.
Hamburger Menu Button Interaction
ハンバーガーメニューは分かりにくいというひとにおすすめしたい作品。クリックで文字テキストが飛び出ます。
See the Pen
Hamburger Menu Button Interaction by Himalaya Singh (@himalayasingh)
on CodePen.
画面の上下左右にそれぞれ配置されたナビメニュー、ポートフォリオなどに良さそうなテクニック。
See the Pen
Four Side Navigation by Allan Pooley (@allanpooley)
on CodePen.
ナビメニューにカーソルを合わせると、磁石のようにくっつくユニークなエフェクトが素敵です。
See the Pen
Magnetic link UI effect by Ryan Yu (@iamryanyu)
on CodePen.
Perspective Split Text Menu Hover
マウスカーソルの動きに合わせて、立体的なパララックスエフェクトを利用したナビメニュー。
See the Pen
Perspective Split Text Menu Hover by James Bosworth (@bosworthco)
on CodePen.
無造作に表示された棒をクリックすると、Stay Trueというロゴ名が浮かび上がります。
See the Pen
Stay True by Adam Kuhn (@cobra_winfrey)
on CodePen.
クリックすると文字が追加されるCSSアニメーションエフェクト。
See the Pen
Stay Positive by Adam Kuhn (@cobra_winfrey)
on CodePen.
CSS Gridプロパティを利用してスタイリングされた、シンプルで効果的なホバーエフェクト。
See the Pen
CSS Grid: Makeup Palettes by Olivia Ng (@oliviale)
on CodePen.
Desert Sunrise (Hover on Image)
砂漠にあるピラミッド、マウスホバーすると太陽がキラリと顔をのぞかせるユニークな仕掛け。
See the Pen
Desert Sunrise (Hover on Image) by Karen (@karenbtlai)
on CodePen.
Earth Day & Night (Click on Image)
マウスクリックに合わせて昼と夜が逆転するテクニック。
See the Pen
Earth Day & Night (Click on Image) by Karen (@karenbtlai)
on CodePen.
トグルを切り替えると、背景全体の色が変更されるCSSスタイリング。
See the Pen
Snowglobe 🔮 by Vangel Tzo (@srekoble)
on CodePen.
トグルを切り替えることで、アワアワの球体が弾けるアニメーションエフェクト。
See the Pen
Bubble Toggle by Chris Gannon (@chrisgannon)
on CodePen.
マウスカーソルを動かすと、山に隠れるように文字テキストが非表示になるユニークなエフェクトで、ヒーローイメージにぴったり。
See the Pen
Night on the mountain by Mikael Ainalem (@ainalem)
on CodePen.
コンテンツが切り替わるたびに、ゆらゆらと水面のように揺れながらイメージ画像が遷移するスライダー。
See the Pen
PIXI Displacement Map Slider by Ash Thornton (@ashthornton)
on CodePen.
Hover slider (dark/light) – ver 2
マウスカーソルをテキストリンクに合わせることで、背景のイメージ画像が同時に切り替わります。
See the Pen
Hover slider (dark/light) – ver 2 by Ivan Grozdic (@ig_design)
on CodePen.
Recreation Cuberto Homepage Vanilla JS
左側になるナビゲーションメニューをクリックすることで、画面全体がアニメーション付きで切り替わるコンテンツスライダー。
See the Pen
Recreation Cuberto Homepage Vanilla JS by Josh Kennedy (@joshatoutthink)
on CodePen.
クリックボタンを押すとタイル状にバラバラと崩れるエフェクトをカスタマイズできます。
See the Pen
Split image in tiles by Fabio Ottaviani (@supah)
on CodePen.
アイコンをクリックすると立体的に展開するカード型レイアウトのコンセプト。
See the Pen
Animated color cards by Alex Zaworski (@alexzaworski)
on CodePen.
カード状レイアウトをクリックすることで、画面全体で展開するアニメーション。
See the Pen
IOS 12 Cards | Concord Cards by Ryan Tarson (@RTarson)
on CodePen.
サーチボタンをクリックすると、そのまま文字の入力をはじめることができるテクニック。
See the Pen
Fancy input, CSS animation by Stanko (@stanko)
on CodePen.
How to Create Responsive SVG images
表示している画面サイズに応じて、SVGロゴデザインを変更するテクニック。
See the Pen
How to Create Responsive SVG images by Envato Tuts+ (@tutsplus)
on CodePen.
SVGアニメーションを利用することで、よりインタラクティブなデザインが可能になっています。
See the Pen
Flat Devices by Maximilian Alexander (@mbalex9)
on CodePen.
3 Markus Magnusson’s animations converted to svg and canvas
SVGアニメーションの可能性を感じる、なめらかな動きが魅力的な作品。
See the Pen
3 Markus Magnusson's animations converted to svg and canvas by kittons (@airnan)
on CodePen.
Developer page concept (digital design)
マウスを長押しすると画面全体がモザイク状にキラキラと展開するスニペット。
See the Pen
Developer page concept (digital design) by fajjet (@fajjet)
on CodePen.
立体的な棒グラフをランダムで生成してくれます。異なるパターンを毎回利用している点もポイント。
See the Pen
3D Animated Bar Chart by Nick Matantsev (@unframework)
on CodePen.
CSS (on hover) animated SVG icons
SVGアイコンにCSSアニメーションを使って、細かい動きを追加したインタラクティブな作品。
See the Pen
CSS (on hover) animated SVG icons by Stefan (@EntropyReversed)
on CodePen.
#CodepenChallenge Canvas Times Tables (Circles)
無数のラインを利用することで、ランダムに模様を自動生成するツール。スピードやポイントの数なども調整できます。
See the Pen
#CodepenChallenge Canvas Times Tables (Circles) by Stefan (@EntropyReversed)
on CodePen.
Line Lisa (based on low-sugar-eye-candy gif)
砂嵐のようにラインが重なることで、モナリザの絵画が浮かび上がります。
See the Pen
Line Lisa (based on low-sugar-eye-candy gif) by Nikita Dubko (@dark_mefody)
on CodePen.
すだれ状に表示されたカラフルなメッシュを、マウス操作で自由に形を変えることができます。
See the Pen
19×2 points and lines by sean_codes (@sean_codes)
on CodePen.
本物そっくりでリアルな炎をデザインしたスニペット。
See the Pen
Flame in the wind by Blake Bowen (@osublake)
on CodePen.
アスキーアートにCSSでアニメーションを追加したスタイリング。
See the Pen
Flipping Out by Jon Kantner (@jkantner)
on CodePen.
波動拳と文字テキストをCSSプロパティ mix-blend-modeを使ってスタイリング。
See the Pen
mix-blend-mode hadouken by Jarrod Thibodeau (@jarrodthibodeau)
on CodePen.
