画像にアニメーションを加えて、Webページのスクロールを滑らかにしてみる
デモページ ソースダウンロード この記事では、HTMLによってviewpoint内の画像に少しのアニメーションをく...
- Webデザイン
- スクロール
- 実装方法
スクロールとは、PCやスマートフォンなどのデバイス操作画面で、ディスプレイに映す範囲を上下または左右に移動させることを指します。
「渦巻き、巻物、巻く」などの意味を持つ「scroll」という英単語が語源とされています。
PCやスマートフォンの画面に長い文章や大きな画像などを表示すると、全体が収まらず一部分のみが表示されます。この部分的に表示された範囲を移動する操作がスクロールです。とくに上に移動することを「上スクロール」または「スクロールアップ」、下に移動することを「下スクロール」または「スクロールダウン」、左に移動することを「左スクロール」、右に移動することを「右スクロール」と呼びます。以下ではスクロールに関する用語を紹介します。
■スムーススクロール
スクロール操作による表示範囲の移動処理をピクセル単位で滑らかに行うこと。
■バックスクロール
一定の順番で項目が並んでいる表示画面において、本来の順序とは逆向きに表示範囲を移動させること。
■パララックススクロール
Webサイトなどのデザインに用いられる、スクロールを用いた演出のひとつ。
ページをスクロールしたときに各要素の移動速度に差をつけることで、立体感や奥行き演出する手法。
・UI/UX
・UXデザイナー
・ヘッダー
・フッター
・人間中心設計