最近よくある、Webページをスクロールして、要素が見えたら動きを付けて要素が表示されるというやつです。今回は通常隠れている画像がスクロールしたらワイプで出現するような物を試しに作ってみました。JavaScriptやCSSを用いることであらゆる演出が可能です。

• シンプルなHTML
• スクロールが到達したら対象のHTML要素にclass属性を付加する
• 動きの実装はすべてCSSで制御

という条件で実装します。

動きのイメージ

今回はこのような物を作ります。あらかじめCSSでimg要素にマスクをかけておき、JavaScriptでスクロール座標を監視。スクロール座標が要素の見える圏内に到達したらclass属性を与え、CSSでマスクの大きさを変える。アニメションの実装もCSSのtransitionプロパティを用い、描く制御を完全に分離します。

HTMLコード

class="first"のdivはあくまでスクロール到達までの高さ確保用。class="target"が今回対象となるHTML要素。animeLeftとanimeRightはアニメーションのバリエーションでそれぞれ左と右からワイプすると言うだけのもの。

<div class="first">スクロールしてね</div>
<div class="target animeLeft"><img src="画像" alt=""></div>
<div class="target animeRight"><img src="画像" alt=""></div>

CSSコード

.first{
 height: 200vh; /*高さ確保用*/
}
.target{
 transition: 0.5s clip-path; /*0.5秒でクリップマスクを動かす*/
}
.target img{
 width: 100%;
}
.animeLeft{
 clip-path: inset(0 100% 0 0);/*左から右へ動くクリップマスク*/
}
.animeRight{
 clip-path: inset(0 0 0 100%);/*右から左へ動くクリップマスク*/
}
/*要素が見えたときの見え方*/
.show{
 clip-path: inset(0 0 0 0);/*クリップマスクを広げる*/
}

JavaScriptコード

JavaScriptで挙動を実装します。例では、class="target"という要素が見えたらshowというclass属性を与えるようにしています。

変数のdisではアニメーションを開始するタイミングを指定します。例のように2に設定すると要素が画面の2分の1の高さまで来たらアニメーションのを開始するという意味です。1にすると要素がスクロール座標を迎えたタイミングでアニメーションが開始されます。その場合スクロール速度によっては要素が見切れる可能性があるので、最適な値にすることをお勧めします。

const win = window;
const dis = 2; //要素が距離が画面の半分まで到達したらアニメーションを開始
const el = document.querySelectorAll(".target"); //対象の要素名
let winHeight,scrollY;
win.addEventListener('load', scrollAnime);
win.addEventListener('resize', scrollAnime);
win.addEventListener('scroll', scrollAnime);

function scrollAnime(e){
 winHeight = win.innerHeight;
 scrollY = win.scrollY;
 for ( let i = 0; i < el.length; i++ ) {
  let elOffset = el[i].offsetTop;
  if ( scrollY >= elOffset - ( winHeight / dis  ) ) {
   el[i].classList.add('show');	//要素が見えたらshowというclass属性を与える
  }   
 }
}

CSSを駆使すれば、あらゆる演出やアレンジ、秒数や遅延処理などいろいろ出来ると思うので、いろいろ遊んでみましょう。

おしまい♥