投稿者: Idle Interface
-
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（スタッガーアニメーション） です。 要素を「少しずつ時間…
-
Skeleton Loaderの作り方｜ローディング体験を改善するUIパターン
1.Skeleton Loaderとは Webサイトやアプリでデータを読み込むとき、何も表示されないとユーザーは「止まっているのでは？」と感じてしまいます。 そこでよく使われるのが Skel…
-
クリック位置から広がる Ripple エフェクトの作り方【JavaScript / UIフィードバック】
UIのクリックフィードバックとしてよく使われるのがRipple（波紋）エフェクトです。 Material Design などでも採用されており、クリックした場所から円が広がることで という …
-
気持ちいいHover Animationの作り方【UIフィードバックの基本】
1.Hover Animationとは？ Hover Animationとは、マウスカーソルが要素の上に乗ったときに発生するアニメーションです。 ボタンやカードUIなどでよく使われます。 例えば次のよ…
-
ボタンの気持ちいいクリックアニメーションの作り方【JavaScript / UI Feedback】
1.Button Interaction Animation UIアニメーションの基礎については、以下の記事もおすすめです。 ユーザーがボタンを押したとき、何も反応がないUIは不安になります。 逆に、…
-
スムーズなプログレスバーの作り方【JavaScript】
progress / lerp / easing を使って、気持ちよく伸びるUIを作る 読み込み中、達成率の表示、レベルゲージ、アップロード進行状況など、プログレスバーはさまざまなUIで使われます。 …
-
JavaScriptで数値カウントアップUIを作る方法【Number Animation入門】
1. はじめに 「0 から 1000 まで数字が増えていく表示」を見たことがあると思います。たとえば、以下のようなUIです。 こうした 数値が変化するUI は、ただ値を一気に切り替…