01
Magnetic Button
ボタンに近づくとカーソルに吸い付くように動く、磁力のようなインタラクション。
사용 기술
GSAP — gsap.quickTo
マウス座標と要素中心の差分を計算し、quickTo で滑らかに補間。ホバー解除時は elastic.out で弾むように戻ります。
INTERACTIVE SHOWCASE
만지며 배우는
웹디자인 도감
실제로 만져 체험할 수 있는 인터랙션 모음.
카드 안의 데모 영역에서 움직임을 시험해 보세요.
02
Text Reveal
文字が一文字ずつ下からフワッと現れるアニメーション。ブランドメッセージに印象を与えます。
好奇心を、カタチに。
사용 기술
GSAP — stagger + IntersectionObserver
各文字を span に分割し、stagger: 0.05 でずらしながら出現。IntersectionObserver で発火タイミングを制御。
03
Hover Image Reveal
テキストにマウスを乗せると、カーソルに追従して画像がフワッと現れる演出。
- Brand Identity
- Web Design
- App Development
사용 기술
GSAP — quickTo + mousemove
quickTo で画像コンテナをカーソルに追従。mouseenter/leave で opacity と scale を切り替え。
04
3D Card Tilt
カーソル位置に応じてカードが3D的に傾く、奥行きのあるインタラクション。
WDDLPremium Card
사용 기술
CSS perspective + GSAP
親に perspective を設定し、マウス座標から rotateX/Y を計算。光沢レイヤーも連動させリアルな反射を再現。
05
Infinite Marquee
テキストが途切れなく横に流れ続ける無限スクロール。ブランド名のリピート演出に。
DESIGN ✦ CODE ✦ CREATE ✦ INSPIRE ✦ DESIGN ✦ CODE ✦ CREATE ✦ INSPIRE ✦
WDDL — WEB — APP — BRAND — WDDL — WEB — APP — BRAND —
사용 기술
CSS @keyframes + translateX
同一テキストを2つ並べ translateX(-50%) をループ。transform のみ使うため60fpsで滑らか。
06
Gradient Mesh
複数のグラデーションが交差しながらゆっくり動く、没入感のある背景アニメーション。
Ambient
사용 기술
CSS radial-gradient + @keyframes
複数の radial-gradient を重ね、transform で位置とスケールをゆっくり変化させます。
07
Blur-to-Focus
ぼやけた状態からホバーでピントが合うように鮮明になる演出。
Coming Soon
호버해 포커스
사용 기술
CSS filter: blur() + transition
初期状態で blur(12px)、:hover で blur(0) にトランジション。letter-spacing の変化も加えてピント感を強調。
08
Elastic Counter
数値が弾むようにカウントアップするアニメーション。実績数の表示に説得力を加えます。
0Projects
0Satisfaction %
0Awards
사용 기술
GSAP — gsap.to + snap + onUpdate
ダミーオブジェクトの value をアニメーションし、onUpdate で snap: 1 して DOM に反映。
09
Stagger Grid
グリッドのアイテムが波のように時間差で現れるカスケードアニメーション。
사용 기술
GSAP — stagger: { from: "random" }
stagger の from: "random" や grid オプションで、グリッド構造を考慮した波状アニメーションを実現。
10
Parallax Layers
マウスの動きに応じて複数のレイヤーが異なる速度で動く、奥行きのあるパララックス。
◆
▲
●
마우스를 움직이세요
사용 기술
GSAP — quickTo + data-speed
各レイヤーに data-speed で移動量を設定。カーソル位置と中心の差分 × speed を quickTo で滑らかに追従。
11
Typewriter
文字が1文字ずつタイプされていく演出。コピーライティングやコード表示に効果的。
사용 기술
JavaScript — setInterval + CSS blinking cursor
setInterval で1文字ずつ textContent に追加。::after でブリンクするカーソルをCSS animationで表現。
12
Glitch Text
テキストがグリッチ（信号の乱れ）のように一瞬ブレる、サイバーパンクな演出。
GLITCH
호버로 발동
사용 기술
CSS ::before/::after + clip-path + @keyframes
擬似要素でテキストを複製し、clip-path で断片的に表示。translateX のずれと色ずれを組み合わせます。
13
Morphing Blob
有機的な形が滑らかに変形し続ける、生命感のあるアニメーション。
사용 기술
CSS border-radius + @keyframes
border-radius に複雑な値（例: 60% 40% 30% 70% / 60% 30% 70% 40%）を設定し、keyframes で補間させます。
14
Card Flip
クリックでカードが3D回転し裏面が現れる。情報の表裏を見せるUIに最適。
FRONT
클릭해 회전
클릭해 회전
BACK
다시 클릭
다시 클릭
사용 기술
CSS transform: rotateY + backface-visibility
前面・背面を absolute で重ね、backface-visibility: hidden を設定。クリックで親の rotateY(180deg) をトグル。
15
Underline Animation
リンクのアンダーラインが左から右へスライドして現れる、上品なホバーエフェクト。
사용 기술
CSS ::after + transform: scaleX + transition
::after で幅100%・高さ2pxの線を配置し、scaleX(0) → scaleX(1) でスライド表示。transform-origin で方向を制御。
16
Wave Motion
テキストの各文字が波のようにうねる、有機的なモーションエフェクト。
WAVELENGTH
사용 기술
GSAP — stagger + yoyo + repeat
各文字に gsap.to で y を stagger つきでアニメーション。yoyo: true + repeat: -1 で永続的な波を作ります。
17
Progress Ring
円形のプログレスバーがアニメーションで満たされていく。スキル表示やローディングに。
0%
사용 기술
SVG stroke-dasharray + GSAP
SVG circle の stroke-dasharray と stroke-dashoffset をGSAPでアニメーション。offset を円周から0へ変化させます。
18
Image Compare
スライダーを動かして2つの画像を比較できるBefore/After UI。
After
Before
사용 기술
CSS clip-path + mousemove / touch
上に重ねた画像の clip-path: inset() をマウス位置に連動。ドラッグハンドルで直感的に操作できます。
19
Particle Float
小さな光の粒がゆっくり漂う、幻想的な背景エフェクト。
사용 기술
CSS @keyframes + 複数要素
小さな span を複数配置し、各々に異なる animation-duration と delay を設定。transform: translateY + opacity で浮遊感を演出。
20
Hamburger Toggle
ハンバーガーメニューアイコンが✕にモーフィングするアニメーション。
사용 기술
CSS transform: rotate + transition
3本の span に transition を設定。クリックで中央を opacity: 0、上下を rotate(±45deg) + translateY でXの形に変形。
21
Gradient Text
テキストにアニメーションするグラデーションが流れる、華やかな演出。
Gradient Flow
사용 기술
CSS background-clip: text + @keyframes
大きな linear-gradient を background に設定し、background-clip: text で文字に適用。background-position をアニメーションで移動。
22
Skeleton Screen
コンテンツ読み込み中のプレースホルダーがキラッと光る、UXを高めるローディング表現。
사용 기술
CSS linear-gradient + @keyframes shimmer
背景に斜めの linear-gradient（暗→明→暗）を設定し、background-position を右へ移動させることでシマー効果を実現。
23
Ripple Click
クリックした位置から波紋が広がるマテリアルデザイン風のフィードバック。
사용 기술
JavaScript + CSS @keyframes scale + opacity
click イベントで座標を取得し、span を動的に生成。scale(0) → scale(4) + opacity: 0 のアニメーションを適用後、要素を削除。
24
Smooth Accordion
高さが滑らかに伸縮するアコーディオン。FAQやメニューに不可欠なUI。
最新CSSのgrid-template-rowsトランジションで滑らかに開閉。
JavaScriptで高さを計算する必要がなく、CSSだけで完結します。
overflow: hidden と 0fr→1fr の切り替えがポイント。
사용 기술
CSS grid-template-rows: 0fr → 1fr + transition
最新CSSの grid-template-rows トランジションを利用。overflow: hidden の子要素を 0fr → 1fr で滑らかに開閉します。
25
Hover Card Reveal
カードにホバーするとオーバーレイがスライドし、隠れていたテキストが現れる演出。
WDDL
사용 기술
CSS transform: translateY + transition + overflow: hidden
オーバーレイを translateY(100%) で下に隠し、:hover で translateY(0) にスライド。overflow: hidden でマスク。
26
Cursor Trail
カーソルの軌跡にドットが残り、フェードアウトしていく華やかなエフェクト。
마우스를 움직이세요
사용 기술
JavaScript — mousemove + 動的 span 生成
mousemove の度に小さなドット(span)を生成し、GSAP で scale と opacity を 0 にアニメーション後、DOM から削除。
27
Scroll Progress
スクロール量に連動してプログレスバーが伸びる、読了率の可視化。
↕ 스크롤해 주세요
✓ 여기까지 스크롤
사용 기술
CSS + scroll event / ScrollTrigger
スクロール量 / (全高 - ビューポート高) で進捗率を計算し、バーの scaleX または width を更新。ScrollTrigger でも実装可能。
28
Rotating Border
カードの枠線がグラデーションで回転する、目を引くデコレーション効果。
Rotating
Border
Border
사용 기술
CSS conic-gradient + @keyframes rotate
疑似要素に conic-gradient を適用し rotate アニメーション。内側に背景色の要素を重ねてボーダーに見せる技法。
29
Text Scramble
ランダムな文字がシャッフルされた後、正しいテキストに落ち着く暗号解読風の演出。
WDDL DESIGN
사용 기술
JavaScript — setInterval + Math.random
ターゲット文字列を1文字ずつ解決。未解決部分はランダム文字を高速で切り替え、段階的に正しい文字に確定させます。
30
Elastic Modal
クリックでモーダルが弾むように現れる。ダイアログやポップアップに高級感を。
Elastic Modal
사용 기술
GSAP — elastic.out easing + backdrop
gsap.from で scale: 0.5, opacity: 0 から elastic.out(1, 0.5) で弾むように出現。背景のバックドロップも同時にフェードイン。