SHISAKU
SHŪ
完全でもなければ、特別でもない。
どこかで見たことのあるものばかり。
それでも、作ってみたいと思ったから、形にしています。
SHISAKU
-
122026
Card, Carousel, Drag Interaction
Drag InteractionInfinite Draggable Carousel
中央にカードが次々と重なるように表示された後、横方向に広がりながら無限ループが始まるカルーセル。ドラッグ操作と自動スクロールに対応し、スムーズに動作します。
-
112026
Card, Hover AnimationHover AnimationStripe Overlay Card
ホバー時に、分割されたストライプ状のレイヤーが下部から順次展開し、画像を覆うカードインタラクション。JavaScriptで要素の高さに応じた矩形を動的に生成し、各レイヤーのスケール変化とテキストのクリップパス表示をタイムラインで同期させています。
-
102026
Hero, Features, SVG Mask TransitionSVG Mask TransitionSVG Mask Column Random Grid
SVGマスクを用いたグリッド構造によるスクロール連動の演出を実装。画像を複数の矩形セルでマスクし、スクロールに連動して左から右へと各セルが順次展開することで、次の画像へ滑らかに切り替わるトランジションです。
-
092026
Hero, Features, SVG Mask TransitionSVG Mask TransitionSVG Mask Vertical Blinds
SVGマスクを用いた垂直ブラインド構造によるスクロール連動の演出を実装。画像を複数の縦長の矩形でマスクし、スクロールに連動して矩形が順番に開くことで、次の画像へ滑らかに切り替わるトランジションです。
-
082026
Hero, Features, SVG Mask TransitionSVG Mask TransitionSVG Mask Random Grid
SVGマスクを用いたグリッド構造によるスクロール連動の演出を実装。画像を複数の矩形セルでマスクし、スクロールに連動して各セルがランダムに展開することで、次の画像へ滑らかに切り替わるトランジションです。
-
072026
Hero, Features, SVG Mask TransitionSVG Mask TransitionSVG Mask Horizontal Blinds
SVGマスクを用いたブラインド構造によるスクロール連動の演出を実装。画像を複数の横長の矩形でマスクし、スクロールに連動して矩形が順番に開くことで、次の画像へ滑らかに切り替わるトランジションです。
-
062026
Card, Scroll Card InteractionScroll Card InteractionStack & Spread Card
スクロールに連動し、カードが浮上してスタックしていくアニメーション。全カードの集結後、中央を起点として水平方向へ展開する2フェーズのインタラクションを構築しています。
-
052026
Hero, Features, Section TransitionSection TransitionHorizontal Blinds
横方向に分割したブラインド状のレイヤーを、スクロールに連動させて展開するセクショントランジション。 次のセクションが画面に入るタイミングをトリガーに、前のセクション上に配置した帯が、下から順に各帯の中央を起点として上下へ広がり、画面を段階的に覆っていきます。
-
042026
Content, Section TransitionSection TransitionScale-down Stack
前画面セクションが縮小しながら次層が重なる演出。各セクションのコンテンツ量に応じて、内部スクロールから縮小アニメーションへの切り替わりを動的に制御しています。
-
032025
List, Hover AnimationHover Animation3 List Hover Animations
ホバー時に、テキストの流れるアニメーション、カーソルの進入方向に応じたスライド、非ホバー要素の透過処理。アクティブ要素を際立たせる3つの表現を実装しました。
-
022025
Features, Scroll InteractionScroll InteractionImage Scale & Text Slide
スクロールに連動したインタラクション。画像の拡大とテキストの移動タイミングをずらし、スピード差をつけることで、よりダイナミックな動きを演出しています。
-
012025
List, Features, Hover InteractionHover InteractionImage & Text Transition
ホバーに応じて奥行きのある画像とテキストを切り替えるインタラクション。CSS変数をGSAPで制御し、clip-pathとscaleで画像を滑らかに、テキストはフェードで切り替えます。リストのアクティブ状態にも連動。