A TSUKIGAKU PRODUCTION

45 EXPERIMENTS IN MOTION

SCROLL
A TSUKIGAKU PRODUCTION
FILE NO. 01

45 EXPERIMENTS IN MOTION

SCROLL
2026・TSUKIGAKU.COM/LAB
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 / KineticINFINITE MARQUEE
INFINITE MARQUEE演出のデパートWEB TECHNIQUESHOUSHIN ENGIINFINITE MARQUEE演出のデパートWEB TECHNIQUESHOUSHIN ENGI
REVERSE LANE逆走レーンBRAND KEYWORDS連呼で余白を埋めろREVERSE LANE逆走レーンBRAND KEYWORDS連呼で余白を埋めろ
WHITE LANE白レーン3 STACKED3レーン重ねWHITE LANE白レーン3 STACKED3レーン重ね
12 / BG + DataLIQUID BLOBS

NEXT-LEVEL
WEB STANDARD

BUILT WITH 45 TECHNIQUES — FREE STOCK IMAGERY

0
TECHNIQUES
0
PER MONTH
0
LIVE
13 / Interaction3D TILT
CARD A
CARD B
CARD C
14 / CursorSPOTLIGHT MASK
HIDDEN MESSAGE

HIDDEN MESSAGE

15 / ScrollPARALLAX DEPTH

DEPTHBY SPEED

5 LAYERS / 5 DIFFERENT SPEEDS
16 / ScrollREVEAL ON SCROLL
01

FADE-UP CARDS

下からふわっと出現。stagger値で順番に発火させると視線誘導が生まれる。

02

STAGGERED ENTRY

同じパターンを少しずつズラして、リズムある入場を演出。

03

VIEWPORT TRIGGER

IntersectionObserverで「画面に入った瞬間」だけ発火。軽量でモバイル耐性あり。

04

OPACITY + Y

透明度と上下移動の組み合わせが王道。派手さより信頼感が出る。

05

EASING

cubic-bezier(.2,.8,.2,1) を使うと「上品に到着する」感が出る。

06

ONCE ONLY

once trueで再発火させない。スクロール戻しで何度も動くと逆にうるさい。

17 / BackgroundPARTICLE FIELD

PARTICLE FIELD
FOLLOWS YOU

CANVAS / 60FPS

18 / InteractionDRAG CAROUSEL
ITEM 01
ITEM 02
ITEM 03
ITEM 04
ITEM 05
ITEM 06
CLICK + DRAG TO SCROLL
19 / InteractionACCORDION FAQ

よくある質問

ツキガクが本番サイトに実装できるWeb演出を、実物デモで45本陳列したカタログです。「うちのサイトでこれが作れる」を一望できるショールームです。

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

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

20 / CursorCURSOR LABEL
21 / InteractionGOOEY EFFECT
HOVER ME
SVG GAUSSIAN BLUR + COLOR MATRIX
22 / WebGLLIQUID SHADER
MOVE MOUSE OVER IMAGE
23 / CursorEYES TRACK YOU
8 EYES, INDEPENDENT TRACKING
24 / Image FXRGB GLITCH
HOVER FOR GLITCH
25 / CanvasMAGNETIC MESH
VERTEX GRID REPELS FROM CURSOR
26 / EffectLIGHTNING ARCS
CURSOR EMITS ELECTRIC ARCS TO NEARBY NODES
27 / EffectHOLOGRAPHIC TILT
HOLOGRAPHICTILT TO SHIFT
MOVE CURSOR TO CHANGE ANGLE
28 / EffectSHOCKWAVE
CLICK ANYWHERE
29 / EffectNEON FLICKER
CYBERPUNK
NEON SIGN
FLICKER FX
3 INDEPENDENT FLICKER PATTERNS
30 / EffectFLUID PLASMA

FLUID PLASMA
NEVER STOPS

5 ANIMATED RADIAL GRADIENTS

31 / PopJELLY BUTTON
CLICK TO BOUNCE
32 / PopWAVE LETTERS
POP!POP!
SINE WAVE PER LETTER
33 / PopSTICKER PEEL
🍩SWEET
STAR
🌈RAINBOW
🍰CAKE
🦄MAGIC
💖LOVE
34 / PopSTAR TRAIL

WAVE YOUR
CURSOR ✨

STARS FOLLOW YOUR PATH

35 / PopSMILEY BOUNCE
12 SMILEYS, GRAVITY-LESS PHYSICS
36 / Scroll
スクロールするたび散らばったことば所定の位置に組み上がる
SCROLL TO ASSEMBLE
37 / ScrollCHART BUILD
スクロールで 数値 が立ち上がる
02021
02022
02023
02024
02025
02026
38 / ScrollCONSTELLATION
ノードが現れ、線で 繋がる
STARTCOREDATAHUBUSERAPIEND
39 / ScrollBLUEPRINT BUILD
線が走り、図面が描かれる
12.4 m7.0 mDESKMEETINGSHELFTABLE
40 / AwwwardsBAYER DITHER
HOVER FOR ORIGINAL — REMOVE TO SEE 4×4 BAYER DITHER
INSPIRED BY ASTRODITHER (R. BORGHESI / AWWWARDS SOTD)
41 / AwwwardsWARP SPEED

WARP SPEED

RADIAL CHROMATIC STREAKS

RGB-SPLIT STREAKS RADIATING FROM CENTER
42 / AwwwardsLETTER MASK

THE WINDOW
BETWEEN WORLDS.

INSPIRED BY T11 / SOTD

43 / EffectANIMATED GRADIENT

RAINBOW
FLOW

BACKGROUND-CLIP TEXT × ANIMATED 8-COLOR GRADIENT

44 / EffectCYBERPUNK GLITCH

GLITCH

MODE

RGB SPLIT × SCANLINES × HOVER FOR HEAVY GLITCH

45 / ScrollTEXT MASK SCROLL

REVEAL

SCROLL TO REVEAL — 0%