Advertisement

latestsnippet2019feb

 

思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。

 

新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。

 

「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。

 

top-hearted-codepen-2018
CodePen は、ブラウザ上でコーディング、プレビュー確認ができ、ソースコードの共有を行うことができる、世界でも人気のウェブサービスです。 今回は、

 

 

コピペで実装できる、最新WebテクHTML/CSSコードスニペットまとめ

 

Turbulence font – SVG

マウスの動きに合わせて、文字テキストがゆらゆらと揺れるアニメーションエフェクト。

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.

 

 

 

The Staak Shack – Color Pop

ネオンサインのように光る文字テキストをSVGファイルで表現しています。

See the Pen
The Staak Shack – Color Pop
by Staak (@Staak)
on CodePen.

 

 

 

Animating SVG Text

軽快なアニメーション表示がポイントとなるエフェクトで、ロゴデザインなどに利用したいテクニック。

See the Pen
Animating SVG Text
by Omar Elbaga (@omarel)
on CodePen.

 

 

 

FlyIn Movie Title

映画のワンシーンなどで使われている、文字が画面外から飛び出すエフェクトをCSSのみで表現しています。

See the Pen
FlyIn Movie Title
by Vuild (@vuild)
on CodePen.

 

 

 

Repellers

マウスカーソルを動かすことで、自由に文字テキストの形を変化させることができるスニペット。

See the Pen
Repellers
by Johan Karlsson (@DonKarlssonSan)
on CodePen.

 

 

 

Canvas Proximity Mask

マウスの動きに合わせて、ハーフトーン状にマスキングされるテクニック。

See the Pen
Canvas Proximity Mask
by Ricardo Mendieta (@mendieta)
on CodePen.

 

 

 

Shooting Star

マウスカーソルがキラキラの流れ星になるデザインテクニック、細かい調整を自分でカスタマイズできます。

See the Pen
Shooting Star
by Ko.Yelie (@ko-yelie)
on CodePen.

 

 

 

rymd

マウスの動きに合わせて、無数に瞬く星がワープのように移動するアニメーションエフェクト。

See the Pen
rymd
by Hakim El Hattab (@hakimel)
on CodePen.

 

 

 

WebGL CRT Neon Matrix Effect

グリッチテキストエフェクトを使い、映画マトリックス風のテキストエフェクトを実現しています。

See the Pen
WebGL CRT Neon Matrix Effect
by Nick Matantsev (@unframework)
on CodePen.

 

 

 

CSS 3D floating Credit Card!

CSSのみでスタイリングされた、ぐるぐると立体的に動くクレジットカード。

See the Pen
CSS 3D floating Credit Card!
by Kivanfan (@kivanfan)
on CodePen.

 

 

 

Web Components: Barfy Stars

文字テキストにカーソルを合わせると、紙吹雪のようにピクセルが爆発するエフェクト。

See the Pen
Web Components: Barfy Stars
by Liam Egan (@shubniggurath)
on CodePen.

 

 

 

Animated wave clipped by text

文字テキストが水面のように波打つ様子をアニメーションで表現したCSSテクニック。

See the Pen
Animated wave clipped by text
by web-tiki (@web-tiki)
on CodePen.

 

 

 

Only CSS: Text Wave

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.

 

 

 

11/12: Paint on Mouse Move

マウスカーソルの動きが、表示された女性ペイントの腕の役目となり、カンバスを自由にペイントします。

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.

 

 

 

Gradient Shapes

CSS background gradientを利用した、さまざまな形のスタイリング方法をまとめたチートシート。

See the Pen
Gradient Shapes
by yuanchuan (@yuanchuan)
on CodePen.

 

 

 

CSS Gradient Hover Effect

美しいグラデーションカラーのホバーエフェクトは、CSSのみでスタイリング可能な小技テクニック。

See the Pen
CSS Gradient Hover Effect
by Jon Daiello (@jondaiello)
on CodePen.

 

 

 

Interactive button border

マウスカーソルに合わせてグラデーションカラーが絶えず変化する、インタラクティブなエフェクトが魅力です。

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.

 

 

 

Button – Fluent Design-Like

カスタマイズされたマウスカーソルをつかって、繊細なボタンエフェクトを演出します。ダーク系ウェブデザインにオススメ。

See the Pen
Button – Fluent Design-Like
by Abubaker Saeed (@Abubaker_Saeed)
on CodePen.

 

 

 

Purely CSS Button

本物のボタンそっくりな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.

 

 

 

Hover Me Pill

各種ソーシャルメディアへのシェアを容易にするマウスホバーエフェクト。

See the Pen
Hover Me Pill
by Joshua Ward (@joshuaward)
on CodePen.

 

 

 

Black Biometirics Button

ボタンをクリックすると、指紋認証センサーが発動するデザインテクニック。

See the Pen
Black Biometirics Button
by Mikael Ainalem (@ainalem)
on CodePen.

 

 

 

3D Gradient Buttons

鮮やかなグラデーションカラーを利用した、立体的なマウスホバーエフェクト。

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.

 

 

 

Dot Menu Animations

ドット状のナビメニューにインタラクティブな動きを加えたコンセプト4種類。

See the Pen
Dot Menu Animations
by Tamino Martinius (@Zaku)
on CodePen.

 

 

 

Drop-down menu

左端に表示されたハンバーガーメニューをクリックすると、ドロップダウン状にアニメーション付きで展開します。

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.

 

 

 

Gourmet Hamburger 🍔

あまり他では見かけないナビメニューの展開アニメーションが披露されています。

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.

 

 

 

Four Side Navigation

画面の上下左右にそれぞれ配置されたナビメニュー、ポートフォリオなどに良さそうなテクニック。

See the Pen
Four Side Navigation
by Allan Pooley (@allanpooley)
on CodePen.

 

 

 

Magnetic link UI effect

ナビメニューにカーソルを合わせると、磁石のようにくっつくユニークなエフェクトが素敵です。

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

無造作に表示された棒をクリックすると、Stay Trueというロゴ名が浮かび上がります。

See the Pen
Stay True
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

Stay Positive

クリックすると文字が追加されるCSSアニメーションエフェクト。

See the Pen
Stay Positive
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

CSS Grid: Makeup Palettes

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.

 

 

 

Snowglobe 🔮

トグルを切り替えると、背景全体の色が変更されるCSSスタイリング。

See the Pen
Snowglobe 🔮
by Vangel Tzo (@srekoble)
on CodePen.

 

 

 

Bubble Toggle

トグルを切り替えることで、アワアワの球体が弾けるアニメーションエフェクト。

See the Pen
Bubble Toggle
by Chris Gannon (@chrisgannon)
on CodePen.

 

 

 

Night on the mountain

マウスカーソルを動かすと、山に隠れるように文字テキストが非表示になるユニークなエフェクトで、ヒーローイメージにぴったり。

See the Pen
Night on the mountain
by Mikael Ainalem (@ainalem)
on CodePen.

 

 

 

PIXI Displacement Map Slider

コンテンツが切り替わるたびに、ゆらゆらと水面のように揺れながらイメージ画像が遷移するスライダー。

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.

 

 

 

Split image in tiles

クリックボタンを押すとタイル状にバラバラと崩れるエフェクトをカスタマイズできます。

See the Pen
Split image in tiles
by Fabio Ottaviani (@supah)
on CodePen.

 

 

 

Animated color cards

アイコンをクリックすると立体的に展開するカード型レイアウトのコンセプト。

See the Pen
Animated color cards
by Alex Zaworski (@alexzaworski)
on CodePen.

 

 

 

IOS 12 Cards | Concord Cards

カード状レイアウトをクリックすることで、画面全体で展開するアニメーション。

See the Pen
IOS 12 Cards | Concord Cards
by Ryan Tarson (@RTarson)
on CodePen.

 

 

 

Fancy input, CSS animation

サーチボタンをクリックすると、そのまま文字の入力をはじめることができるテクニック。

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.

 

 

 

Flat Devices

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.

 

 

 

3D Animated Bar Chart

立体的な棒グラフをランダムで生成してくれます。異なるパターンを毎回利用している点もポイント。

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.

 

 

 

19×2 points and lines

すだれ状に表示されたカラフルなメッシュを、マウス操作で自由に形を変えることができます。

See the Pen
19×2 points and lines
by sean_codes (@sean_codes)
on CodePen.

 

 

 

Flame in the wind

本物そっくりでリアルな炎をデザインしたスニペット。

See the Pen
Flame in the wind
by Blake Bowen (@osublake)
on CodePen.

 

 

 

Flipping Out

アスキーアートにCSSでアニメーションを追加したスタイリング。

See the Pen
Flipping Out
by Jon Kantner (@jkantner)
on CodePen.

 

 

 

mix-blend-mode hadouken

波動拳と文字テキストをCSSプロパティ mix-blend-modeを使ってスタイリング。

See the Pen
mix-blend-mode hadouken
by Jarrod Thibodeau (@jarrodthibodeau)
on CodePen.

 

 

参照元リンク : Night on the mountain by Mikael Ainalem – CodePen