LPなどでよく使われている、スクロールした時に左右からシュッとスライドインしてくる要素の作り方を紹介します。

まずは完成品

See the Pen SlideIn by Leo_8192 (@Leo_8192) on CodePen.

各要素が画面下部から10%の位置に入ると、左右からスライドインしてきます。

HTML

<div class="container">
	<p>↓ スクロールしてね ↓</p>
	<div class="slidein slide_left">😇</div>
	<div class="slidein slide_right">😇</div>
	<div class="slidein slide_left">😇</div>
	<div class="slidein slide_right">😇</div>
</div>

スライドインさせたい要素にslideinというクラスを振り、さらに左から出現させたい場合はslide_left、右から出現させたい場合はslide_rightというクラスも追加します。

CSS

.container{
	overflow: hidden;
}
.slidein{
	/* 装飾に関わるスタイルは省略 */
	margin: 50px auto;
	transition: 1s cubic-bezier(0.75, 0, 0.25, 1);
}
.slide_left{
	transform: translateX(calc(-50vw - 50%));
}
.slide_right{
	transform: translateX(calc(50vw + 50%));
}
.show{
	transform: translateX(0);
}

見ての通り、スライドインさせる要素の初期位置をtransform: translateX();で画面の外に設定しています。このcalc()の書き方はコンテンツ幅や画面幅に影響されずに要素をキレイに外に移動させることが出来るので、覚えておくと便利です。

そして、要素を中央に戻す際に使うshowというクラスも用意しておきます。このクラスにはtransform:translateX(0);を指定しておきましょう。

また、要素の初期位置が画面の外なので、親要素にoverflow: hidden;を指定していないと横スクロールが発生してしまうので注意です。

jQuery

let winHeight,winScroll,scrollPos;
$(window).on('load scroll',function(){
	winScroll = $(window).scrollTop();
	winHeight = $(window).height();
	scrollPos = winHeight * 0.9 + winScroll;
	$(".slidein").each(function(){
		if($(this).offset().top <= scrollPos){
			$(this).addClass("show");
		}else{
			$(this).removeClass("show");
		}
	});
});

画面の高さ、スクロール位置、要素を出現させたい位置を組み合わせ、.slideinが指定された要素が条件にマッチしたら.showが付与されるという簡単なスクリプトです。これでtranslateXが0になるので画面外の要素が中央にスライドしてきます。

まぁどこを調べてもこんな感じのコードばかり紹介されているので、詳しい解説は省略で…

最後に

今回紹介したテクニックですが、CSSを調整するだけでフェードイン効果等を付与することも可能です。

LPやコーポレートサイト、ポートフォリオなど、幅広い用途があるテクニックなので、Webサイトにアクセントを加えたい方は是非ご活用ください。