JAEN
制作のご相談

EFFECTS SHOWCASE · 26 EFFECTS

KEYAKILAB

効果の見本市。 WebGL、3D、スクロール連動、ポインター。いま動かせる表現を、このページに全部並べました。触って、スクロールして、試してください。

見本を見るこの技術で相談する
エフェクト
26
カテゴリ
5
外部ライブラリ
0
  • WEBGL
  • SHADER
  • 3D
  • PARALLAX
  • TYPOGRAPHY
  • POINTER
  • SCROLL
  • CANVAS
  • MOTION
  • SVG

01 / BACKGROUNDS

背景

ページの空気をつくる、動く背景。GPU シェーダーから CSS まで。5

カーソルを動かしてみてください

01

WebGL メッシュグラデーション

ドメインワープした fbm ノイズを、生の WebGL フラグメントシェーダーで描画。カーソルの位置に光が寄ります。

WebGLGLSLタッチ: 光が自動で漂う ／ 低モーション: 静止した 1 フレーム ／ WebGL なし: CSS グラデーション

02

オーロラ

ぼかした色のかたまりがゆっくり流れる、CSS だけの背景。

CSS低モーション: 静止

03

パーティクルネットワーク

点が漂い、近い点どうしが線でつながる。ポインターに引き寄せられます。

Canvas 2Dタッチ: 見えない指が自動で動く ／ 画面外では描画停止 ／ 低モーション: 静止

ポインターの周りだけ方眼が見えます

04

グリッド・スポットライト

ポインターの周りだけ、方眼がうっすら浮かび上がります。

CSS maskタッチ: ドラッグした位置を照らす

グレインあり

05

フィルムグレイン

SVG ノイズを重ねて、フラットな面に質感を足す。

SVG filter動かないので、そのまま

02 / TYPOGRAPHY

テキスト

文字そのものを演出する。読めること、読み上げられることは損なわない。5

KEYAKI CREATE
06

テキスト・デコード

でたらめな文字が、左から順に本来の文字へ落ち着く。

rAFタッチ: 表示時とタップで再生 ／ 低モーション: 最初から本来の文字

仙台から、つくる。

07

1 文字ずつせり上がる

マスクの下から、文字が時間差で立ち上がる見出し。

CSS transition低モーション: 最初から表示

SHIMMER
08

光が走るグラデーション文字

文字の上を光の帯が横切ります。

CSS低モーション: 静止

  • DESIGN
  • BUILD
  • MOTION
  • SHIP
  • 仙台
  • ホームページ
  • 広告物
  • システム
09

無限マーキー

継ぎ目のない横スクロール。ホバーで一時停止。

CSSタッチ: 常に流れる ／ 低モーション: 停止

TOUCH THE TYPE
10

ポインターから逃げる文字

カーソルが近づくと文字が弾かれ、離れるとばねのように戻ります。

Pointer Eventsタッチ: 文字がなみ打つ ／ 低モーション: 静止

03 / POINTER

ポインター

マウスの動きに応える効果。タッチ端末には、別の見せ方を用意しています。5

このエリアの中で動かしてみてください

11

カスタムカーソル

なめらかに追従するリング。ボタンの上で大きくなります。

rAFPointer Eventsタッチ: 非表示（カーソルがないため）

12

マグネティックボタン

近づくとボタンが引き寄せられます。

Pointer Eventsタッチ: 通常のボタン＋押下時に縮む

KEYAKI

3D
TILT

13

3D チルトカード

ポインターの位置でカードが傾き、光沢が動く。

CSS 3Dタッチ: ゆっくり自動で揺れる ／ 低モーション: 静止

WebGL

GPU で描く背景。ノイズとシェーダーだけで、写真のような奥行きが出せます。

Canvas

粒子や線を自由に描く。データの可視化にも使える、軽量な描画。

CSS

多くの動きは CSS だけで足ります。軽く、壊れにくく、止めやすい。

14

スポットライト枠

ポインターのある場所だけ、カードの枠が光る。

CSS maskタッチ: 上辺が常に光る

15

リップル

押した点から波紋が広がる。マウス・タッチ・ペン共通。

Pointer Events低モーション: 一瞬で消える

04 / SCROLL

スクロール

スクロールに連動して動く、現れる効果。5

画面の一番上に、読み進めた量を示す線が出ています。

16

スクロール進捗バー

このページ最上部の細い線。いまどこまで読んだかを示します。

scrollrAF低モーション: そのまま（位置を示すだけ）

1,234

※ デモ用の数値です

17

カウントアップ

見えた瞬間から数字が増えていきます。

rAF低モーション・JS なし: 最初から最終値

18

多層パララックス

重ねた画像がスクロールで別々の速さで動く。

scrolltransform低モーション: 静止

明るい美容室の店内（サンプル画像）
20

クリップパス・ワイプ

画像が、幕を引くように現れる。

clip-path低モーション・JS なし: 最初から表示

19

横スクロール・ギャラリー

縦にスクロールすると、ピン留めされたまま画像が横へ流れます。画像はすべて制作サンプルです。

低モーション: 指で横にスワイプする通常の一覧になります。

機械式時計の3Dモデル

機械式時計の3Dモデル

3D制作

定食屋のホームページ

定食屋のホームページ

サンプルサイト

日替わり定食のバナー

日替わり定食のバナー

バナー

美容室のホームページ

美容室のホームページ

サンプルサイト

ヘアケアのチラシ

ヘアケアのチラシ

チラシ

秋のセールのバナー

秋のセールのバナー

バナー

05 / UI & MOTION

UI・モーション

カード、比較、描画、3D。部品としてそのまま使える動き。6

欅の枝と木漏れ日の写真。左が加工前、右が加工後BEFOREAFTER
21

ビフォー・アフター

境目をドラッグして比較。キーボードの矢印でも動かせます。

input rangeタッチ・キーボード: そのまま操作できる

22

SVG パス描画

線が自分で引かれていきます。

SVG低モーション・JS なし: 最初から描画済み

23

モーフィング・ブロブ

輪郭が絶えず形を変える、グラデーションのかたまり。

CSS低モーション: 静止

ガラスのカード

背後の動きがぼけて透けます。文字はくっきりと。

24

ガラスのカード

動く背景をすりガラス越しに見せる。

backdrop-filter背景が止まれば、カードも静か

機械式時計の3Dモデル
定食屋のホームページ
日替わり定食のバナー
美容室のホームページ
ヘアケアのチラシ
秋のセールのバナー
25

3D リング

カードが輪になって立体的に回る。ホバーで停止。

CSS 3Dタッチ: 常に回る ／ 低モーション: 停止

  • WebGL

    GPU で描く

  • 3D

    CSS の遠近

  • Scroll

    連動と固定

  • Typography

    文字を演出する

26

ベントグリッド

大きさの違うタイルが、ホバーで持ち上がる。

CSS gridタッチ: 押している間だけ反応

この動きを、
あなたのサイトに。

効果は目的ではなく手段です。見せたいものが一番よく伝わる動きだけを選んで、軽く、止められる形で実装します。まずはご相談ください。

制作のご相談