タグ: animation
-
Scroll Story UIの作り方｜スクロール連動で内容が切り替わるUI
スクロールに合わせて、左のビジュアルや説明が切り替わるUIを見かけることがあります。プロダクト紹介、機能説明、サービスLPなどでよく使われる見せ方です。 このUIは、ただ派手なだけではありません。「ユ…
-
スクロールに追従するUIの作り方（Sticky Animation）
スクロールしているのに、要素そのものは画面内に留まり続ける。そんな「Sticky UI」は、説明型のレイアウトやストーリー型の見せ方と相性が良いパターンです。 たとえば次のような場面でよく使われます。
-
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（スタッガーアニメーション） です。 要素を「少しずつ時間…
-
Skeleton Loaderの作り方｜ローディング体験を改善するUIパターン
1.Skeleton Loaderとは Webサイトやアプリでデータを読み込むとき、何も表示されないとユーザーは「止まっているのでは？」と感じてしまいます。 そこでよく使われるのが Skel…
-
JavaScriptで数値カウントアップUIを作る方法【Number Animation入門】
1. はじめに 「0 から 1000 まで数字が増えていく表示」を見たことがあると思います。たとえば、以下のようなUIです。 こうした 数値が変化するUI は、ただ値を一気に切り替…
-
easingとは？アニメーションの減速・加速を作る方法【cubic-bezierも解説】(#03)
← Prev Next → アニメーションが「どこか硬い」と感じたことはありませんか？ それは 速度が一定だから かもしれません。 そこで登場するのが easing（イー…