スクロールすると要素がふわっと現れる、あの演出の裏側

ページをスクロールしていくと、写真や見出しがふわっと浮かび上がってくる。
このサイトのあちこちでも使っている演出です。
種を明かすと、二人の共同作業でできています。

見張り役と着せ替え役

まずJavaScriptが見張り役です。
その要素が画面の中に入ってきたかどうかを、ずっと監視している。
入ってきた瞬間、要素に登場済みの印をつける。仕事はそれだけです。

実際にふわっと動かすのはCSSのほうで、印がついたら透明から不透明へ0.6秒かけて変化、という着せ替えの指示が書いてあります。
JavaScriptが合図して、CSSが動く。
Webページの動きはたいてい、この分業でできています。

使いすぎ注意

便利な演出ですが、全部の要素をふわふわさせると、読みたい人を待たせるだけのページになります。
料理の飾り付けと同じで、主役より目立ったら失敗。
僕は、初見では気づかれないくらいを目安にしています。