全2558文字
PR

 図12のWebページを作るHTMLのコードをリスト10に、CSSのコードをリスト11に示します。コードは説明のために簡略化しています。

リスト10 ●3つの画像を表示するWebページを作るコード(HTML)
リスト10 ●3つの画像を表示するWebページを作るコード(HTML)
[画像のクリックで拡大表示]
リスト11 ●画像の表示の仕方を設定するコード(CSS)
リスト11 ●画像の表示の仕方を設定するコード(CSS)
[画像のクリックで拡大表示]

 リスト11のCSSでは、(1)で画像(.image)の初期設定を行います。(2)は、偶数番目の要素にのみ行う初期設定です。1番目と3番目の画像は画面の右端から現れ、2番目の画像は画面の左端から現れるようにするために、(1)と分けて初期設定を行っています。

 (3)は、スクロール後の画像の設定です。すべての画像(.image)に対して.visibleクラスを付与しています。どの位置までスクロールしたらvisibleクラスを付与するのかは、あとで説明するJavaScriptで設定します。

 (4)~(6)のclip-pathプロパティは、要素を任意の形状で切り抜きます。ここでは画像を矩形で切り抜いています。

 (4)では、画像を右から左に向かってすべて切り抜き(clip-path: inset(0 100% 0 0))、(5)では画像を左から右に向かってすべて切り抜いて(clip-path: inset(0 0 0 100%))います。つまり、初期設定では画像は非表示です。

 (6)では、画像を全く切り抜いていない状態(clip-path: inset(0 0 0 0))に設定しています。つまり、一定の位置までスクロールしたら、画像を表示します。

 (4)~(6)の設定によって、画像が非表示の状態から、右または左に向かって画像を表示するような動きを表現しているのです。

 この画像の動きを行うタイミングを決めるのが、JavaScriptです。

 従来の方法で図13のような動きを作るためのJavaScriptコードを、リスト12に示します。

リスト12 ●従来の方法でスクロールに応じた処理を行うコード(JavaScript)
リスト12 ●従来の方法でスクロールに応じた処理を行うコード(JavaScript)
[画像のクリックで拡大表示]

 リスト12では、スクロールの位置に応じた処理を行うために、「スクロールが発生するたび(scrollイベントが発火するたび)に、スクロール位置と全要素の位置を調べて処理する」ということを行っています。