A LEUKYAMOS PRODUCTION

23 EXPERIMENTS IN MOTION

SCROLL
A LEUKYAMOS PRODUCTION
FILE NO. 01

23 EXPERIMENTS IN MOTION

SCROLL
2026・MOTION LAB

スクロールで動くサイトを作っています。ここに並べた23本は、すべて実装済みで、実際に動いています。

作る人
Leukyamos/北又 淳
できること
サイト制作・書類やExcel作業の自動化
進め方
設計から公開、その後の修正まで1人で担当

1つのサイトに入れる動きは3〜5個までが原則です。全部載せると読めなくなります。ここはあくまで見本帳です。

02 / DECOMPOSE → RECOMPOSE
1,000 TILES / CANVAS 2D
PROGRESS
0%
02
0%
03
DRAG TO PAINT
04
10,000 PARTICLES
05
PRODUCT BUILD
06 / CursorMAGNETIC CTA
07 / TypeTYPOGRAPHIC SHUFFLE

SHUFFLE → RESOLVE

HOVER OR TAP THE BOX
08 / Image FXHOVER DISTORTION
01
02
03
04
05
06
09 / ScrollHORIZONTAL PIN
01 / 04PIN START
02 / 04SCROLL DRIVES X
03 / 04VIEWPORT LOCKED
04 / 04END RELEASE
10 / ScrollSTICKY LAYERS
FIRST FRAME
11 / ScrollPARALLAX DEPTH

DEPTHBY SPEED

5 LAYERS / 5 DIFFERENT SPEEDS
12 / InteractionACCORDION FAQ

よくある質問

本番サイトに実装できるWeb演出を、実物デモで23本並べたカタログです。「こういう動きが作れる」を一望できるようにしています。

3〜5個に絞るのが原則。詰め込みすぎは読み手を疲れさせて逆効果になります。業種・目的に合わせて最適な組み合わせを提案します。

各演出のタグ右に「PCのみ/PC&スマホ」を明記しています。32演出がPC&スマホ両対応、13演出はカーソル必須でPC専用。スマホ向け代替演出も用意します。

13 / WebGLLIQUID SHADER
MOVE MOUSE OVER IMAGE
14 / EffectHOLOGRAPHIC TILT
HOLOGRAPHICTILT TO SHIFT
MOVE CURSOR TO CHANGE ANGLE
15 / Scroll
スクロールするたびに散らばったことばが所定の位置に組み上がる
SCROLL TO ASSEMBLE
16 / ScrollCHART BUILD
スクロールで 数値 が立ち上がる
02021
02022
02023
02024
02025
02026
17 / ScrollCONSTELLATION
ノードが現れ、線で 繋がる
STARTCOREDATAHUBUSERAPIEND
18 / ScrollBLUEPRINT BUILD
線が走り、図面が描かれる
12.4 m7.0 mDESKMEETINGSHELFTABLE
19 / AwwwardsBAYER DITHER
HOVER FOR ORIGINAL — REMOVE TO SEE 4×4 BAYER DITHER
INSPIRED BY ASTRODITHER (R. BORGHESI / AWWWARDS SOTD)
20 / AwwwardsLETTER MASK

THE WINDOW
BETWEEN WORLDS.

INSPIRED BY T11 / SOTD

21 / EffectANIMATED GRADIENT

RAINBOW
FLOW

BACKGROUND-CLIP TEXT × ANIMATED 8-COLOR GRADIENT

22 / EffectCYBERPUNK GLITCH

GLITCH

MODE

RGB SPLIT × SCANLINES × HOVER FOR HEAVY GLITCH

23 / ScrollTEXT MASK SCROLL

REVEAL

SCROLL TO REVEAL — 0%