ブログ
-
Scroll Trigger Animationの作り方|スクロール位置で要素をふわっと表示する基本実装【JavaScript】
スクロールに合わせて要素がふわっと現れる演出は、記事一覧、特徴紹介、料金表、FAQ など、いろいろなUIで使われます。ただし、勢いで実装すると「毎フレーム scroll を監視して重くなる」「一度表示…
-
Parallax Scroll Animationの作り方｜スクロールで奥行きを出すUIをJavaScriptで実装
スクロールに応じたアニメーションは、UIに自然な動きを加える重要なパターンです。まずは基本的なスクロール連動の考え方から知りたい方は、こちらも参考にしてください。→ Scroll Progress A…
-
Scroll Snap Animationで気持ちよく止まるUIを作る方法【CSS中心で実装】
スクロールしたときに、要素が中途半端な位置で止まらず、ぴたっと揃うUIを見たことはないでしょうか。 たとえば、 スクロール量そのものを視覚化したい場合は、あわせて Scroll Progress の実…
-
Scroll Progressバーの作り方【JavaScriptでスクロール進捗を見せるUI】
→ easingやスクロールに関係する基礎はこちら#03 easing / cubic-bezier#18 Progress Bar Animation ページを読んでいるとき、上部に細いバーが伸びて…
-
スクロールでふわっと表示するUIの作り方【Scroll Reveal Animation】
ページをスクロールしたときに、要素が「ふわっ」と現れるUIを見たことはありませんか？ これは Scroll Reveal Animation と呼ばれ、視線誘導や没入感を高めるのに…
-
カードを順番に表示する「Stagger Animation」の作り方【CSS / JavaScript】
一覧UIでカードが一気に表示されると、少し味気ない印象になります。 そこで使われるのが Stagger Animation（スタッガーアニメーション） です。 要素を「少しずつ時間…