Effects & Animation Catalog
Web演出、100連発。
スクロール演出・ホバー・テキスト・背景・UIまで、このラボが実装できるWebの動きを番号付きで並べました。すべて素のHTML/CSS/JS（軽量・スマホ対応）。
気になる番号を「これ入れたい」と言ってもらえれば、あなたのサイトに組み込みます。
カードをタップ／クリックすると、演出をもう一度再生できます。
CATEGORY 01
スクロールで現れる
CATEGORY 02
数字・グラフ・線が描かれる
0
CATEGORY 03
触ると反応する（ホバー/クリック）
HOVER
ButtonHOVER
虹の枠
HOVERMOVE
MagnetMOVE
TapCLICK
HOVER
Read moreHOVER
⚙️HOVER
HOVER
CATEGORY 04
文字の演出
Gradient
NEON
GLITCH
★ LOHI MUSIC LAB ★ 制作受付中 ★ LP・HP ★
OUTLINE
CATEGORY 05
背景・空間の演出
MOVE
CATEGORY 06
UI・マイクロインタラクション
🤍CLICK
CLICK
＋ 開いて閉じる
クリックでスッと開くアコーディオン。FAQなどに。
通知を出す✓ 送信しました！
CATEGORY 07
スクロール・レイアウト上級
MOVE
この箱の中をスクロールすると…上のバーが読了率と一緒に伸びます。記事ページの定番。ブログやコラムで「どこまで読んだか」が一目で分かる、親切な演出です。ページ全体版はこのページの最上部でも動いています。
📌 見出しA（貼り付く）
SCROLLスクロールしても見出しが上に貼り付いて残ります。長いメニューや料金表で便利。
📌 見出しB（交代する）次の見出しが来ると自然に交代します。この動きはCSSだけで作れます。
DRAG / SCROLL
CATEGORY 08
画像の見せ方
● REC
CATEGORY 09
カーソル・クリック演出
MOVE
MOVE
🎉 Click!
💛 Click!
LOHI LABHOVER
PAGE ACLICK
CATEGORY 10
パーティクル・空気感
CATEGORY 11
3D・カード
OMOTE
URA!
MOVE
HOVER
¥
CATEGORY 12
文字・ロゴ上級
0
1
2
3
4
5
6
7
8
9
00
1
2
3
4
5
6
7
8
9
00
1
2
3
4
5
6
7
8
9
0PV
1
2
3
4
5
6
7
8
9
00
1
2
3
4
5
6
7
8
9
00
1
2
3
4
5
6
7
8
9
0PV
LOHI LAB
済
CATEGORY 13
ボタン・部品の気持ちよさ
押してみてCLICK
LiquidHOVER
ヘルプ💡 こういう補足が出せますHOVER
🔔
送信
CLICK10
CATEGORY 14
仕上げの魔法
LOHI
スクロールして読み進めると、読んだところまで文字に色が付いていきます。長い説明文やストーリーページで「読む楽しさ」を足せる演出です。企業の沿革・こだわりの紹介・物語仕立てのLPにぴったり。最後まで読むと全部が光ります。
🎆 Click!
Still 250 more
まだ250種類あります。
ローダー・ボタン・カード・実用UI・遊び・音楽ラボ、最新のブラウザ技術まで。続きも全部その場で動かせます。
Order
この動き、あなたのサイトに。
「番号◯番の演出を入れたい」でOK。目的に合わせて選んで組み込みます。やりすぎない“ちょうどいい”演出設計もお任せください。