SHISAKU
試作
SHISAKU
This site showcases parts and components created as prototypes.
Some of them may not have been fully tested, so we kindly ask for your understanding.
"SHISAKU" is a Japanese word that corresponds to the English word "prototype."
このサイトでは、試作として作成したパーツや部品を紹介しています。
検証が不十分なものもありますので、あらかじめご了承ください。
Visual Layering with
Fixed Card Offsets
Using GSAP and ScrollTrigger, an animation is implemented where each subsequent card moves upward by 34px and scales down by 10% as it reaches the center of the screen. When scrolling back, the cards smoothly return to their previous states.
固定したカードをずらして奥行きをつける
GSAPとScrollTriggerを使用し、次のカードが画面中央に到達したタイミングで、カードを1枚ごとに上に34pxずつ移動させ、同時に10%ずつ縮小させる演出を実装。スクロールで戻る際には、カードが一つ前の状態へ戻るように制御しています。
-
View more
-
View more
-
View more
Motion Text
I am controlling both the animation where specific characters fade and scale in a specified order, and the rotation speed — which starts fast and gradually settles into a constant speed — using JavaScript.
モーションテキスト
任意の文字を、指定した順番で「フェード」と「スケール」させるアニメーション、そして回転スピードを最初は速く、徐々に一定速度に落ち着かせる動きをJavaScriptで制御しています。
Card Snap and
Scroll-Linked Loop Animation
This animation uses GSAP and ScrollTrigger to create a smooth scrolling experience. When scrolling stops, the nearest card automatically snaps to the center, while the cards above and below shrink by 20% to create a sense of depth. In addition to scrolling, you can also navigate between cards using Next and Prev buttons.
カードスナップ＆スクロールに連動したループアニメーション
GSAPとScrollTriggerを使用してスムーズなスクロール体験を実現しています。スクロールを停止すると、最も近いカードが中央にスナップし、上下のカードは20%縮小して奥行き感を演出します。Next / Prevボタンでもカードを操作することが可能です。
Play Video on Card Open
Using GSAP, the hovered card enlarges and plays a video. The playback position is retained, so when hovered again, the video resumes from where it left off.
開いたカードの動画を再生
GSAPを使用して、ホバーしたカードを拡大し動画を再生。停止位置を保持し、再びホバーするとその位置から再生を再開します。
Rostislav Uzunov
Rostislav Uzunov
Video by
[Rostislav Uzunov] on Pexels
MAHMOUD RAMADAN ETMAN
MAHMOUD RAMADAN ETMAN
Video by
[MAHMOUD RAMADAN ETMAN] on Pexels
Pachon in Motion
Pachon in Motion
Video by
[Pachon in Motion] on Pexels
MAHMOUD RAMADAN ETMAN
MAHMOUD RAMADAN ETMAN
Video by
[MAHMOUD RAMADAN ETMAN] on Pexels