Google Chrome、Microsoft Edge、Firefox、Safariといった今どきのWebブラウザーでは、ユーザーの使いやすさを向上するようなWebの表現を、ブラウザーの違いを気にすることなく実装できる。シンプルなコードでWebの表現力をアップさせる最新機能を紹介する。
「Webページを一定量までスクロールすると、画像や文字が左右から飛び出して表示される」という表現は、広告ページなどでよく使われています。このような「スクロール連動エフェクト」は作り方が複雑そうに見えますが、モダンブラウザーで使えるJavaScriptの「Intersection Observer」を使うと手軽に実装できます。
表5にIntersection Observerの構文を示します。スクロール連動エフェクトの表現を使ったWebページを作ってみましょう。
ここでは、日本の観光名所を紹介するページを作ることを考えます。図12のような3つの観光名所の名前と3つの写真が掲載されているページです＊5。
このWebページをスクロールしていくと、それぞれの写真が順番に、画面の左右から現れます。
まず、Webページにアクセスすると、図13の（1）のように「山口県角島大橋」の写真が画面の右端からスライドしながら現れ、（2）のように画面いっぱいに写真が表示されます。そのままスクロールを続けると、（3）のように「福岡県太宰府市」の写真が画面の左端からスライドしながら現れ、（4）のように表示されます。さらにスクロールを続けると、（5）のように「熊本県菊池渓谷」の写真が画面の右端から現れ、（6）のように表示されます。
このようなスクロール連動エフェクトのあるWebページを作り、従来のブラウザー向けのコードの書き方とモダンブラウザー向けのコードの書き方を比較します。どちらの方法でも、ベースとなるWebページをHTMLとCSSで作ります。
