パララックススクロールとは?

執筆者:

カテゴリ:

,

The parallax scrolling effect is a design technique that’s relatively new in development and web design. Over the past few years since it’s hit the scene though, it’s grown pretty popular in its own right, and with good reason, too.

パララックススクロールの定義

Parallax scrolling is a technique wherein your web page’s background image scrolls at a slower rate compared to the foreground image. It gives the user a unique sense of depth and action while scrolling through a page when used on a website.

Without Parallax Scrolling

The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.

With Parallax Scrolling

The background image scrolls at a different rate as the rest of the elements in the page.

パララックススクロールがユーザーに与える影響

しかし、この技法は決して新しいものではなく、古くは1920年代から伝統的なアニメーションで使用されていました。また、『スーパーマリオブラザーズ』のような数々のクラシックなビデオゲームでも採用されてきました。

一方、ウェブデザインの領域では、Nikeが2011年にパララックススクロールをいち早く採用した先駆者の一社としてよく挙げられます。それ以来、「パララックススクロール」(「パララックス背景」とも呼ばれます)という言葉は、デザイナーや開発者の間で一般的な用語となり、着実に人気を高めています。

Parallax scrolling as used in a version of Super Mario Brothers. Notice how the hills in the background move
in slightly varying speeds, as compared to Mario and the other characters in the foreground.

ユーザーにとってのメリット

このエフェクトの素晴らしい点は、ユーザーのウェブサイトへのエンゲージメントを促進し、インタラクションと魅力の両方を高められることです。そして、適切に活用すれば、パララックススクロールは極めてシンプルなウェブサイトにも生命を吹き込むことができます。サイトの訪問者を瞬時に引き込む見事なストーリーテリングを作り出すことさえ可能です。

あなたの作品を共有してください!

皆さんはどう思われますか?PBS v4の最新パララックス背景機能はもう使ってみましたか?うまく活用できていますか?ぜひあなたの作品のリンクを共有したり、下のコメント欄にご意見をお寄せください。

素晴らしいサイト制作を!