SHEET K-42
番号で
Webサイトの表現
サイトを
01グループ
グループから、奥へ 進む。
SVGに
- 01｜K-48SVGに
よる 6種SVG を表現 中心に 描く 表現。 仕組みや 関係を、 形・奥行き・動きで 伝える。 動く 実物つき。 - 02｜K-45動き117項目・作例12件スクロール・カーソル・クリック・
自動。 きっかけごとに 分け、 代表的な ものは サイトの 中で 動かせます。 - 03｜K-44文字52種文字の
組み方と、 動く 文字。 架空の サイトの 一場面と して 並べています。 - 04｜K-43質感100種背景に
敷く 素材。 紙・布・木・石・金属・光・和柄・動く 質感まで。 - 05｜K-49UIの
部品 4種ボタン・カードなど、触れて 使う 部品。 押した 手応えや、 触れた 時の 動きまで 実物で 確かめられます。 - 06｜K-46ヒーローの
演出 5種サイトを開いて 最初に 目に 入る、 動く図。 トップと 同じ 並びで、 実物を 見比べられます。
02ライブラリの
ライブラリを使った作例。
Three.js・GSAP などの
- Three.js3D Model ViewerBlenderライクな
インタラクティブ3Dビューア。 マウスや タッチ操作で モデルを 自由に 回転・ズームできます。 - Three.js3D Texture Mapping円錐・円柱・楕円体・
四面体などの 3Dシェイプに 動的テクスチャを マッピング。 - Three.jsParticle Morphing約33,000個の
パーティクルが スクロールに 連動して モーフィングする 3Dスクロール体験。 - CSSCSS Animations純粋な
CSSで 実装された 高パフォーマンスアニメーション。 - JavaScriptScroll EffectsIntersection Observer API を
活用した スクロール連動の 演出。 - Three.jsThree.jsWebGL ベースの
リアルタイム3Dレンダリングと エフェクト。 - particles.jsParticlesインタラクティブな
粒子システムに よる 背景や 演出。 - GSAPGSAPGSAP に
よる 高度な タイムライン制御と アニメーション。 - CSSAdvanced CSSCSS Grid・Custom Properties・3D 変換を
活用した 視覚効果。 - Vanta.jsVanta.jsThree.js ベースの
インタラクティブな 3D背景。 - CSSCSS Backgroundグラデーション・パターン・図形を
組み合わせた、 CSSだけの 背景アニメーション。 - Canvas / WebGLJS BackgroundCanvas API や WebGL を
使った、 動的な 背景演出。
