マウスで下にスクロールした後に要素が下から上にふわっとゆっくり表示｜inview.js

困ってる人

マウスで下にスクロールした時に、画像や文字なんかを下から上にふわっと表示させる方法って一体どうやればいいんだろう？

こんにちは、ヨロと申します。

という事で今回は、マウスで下にスクロールして、ある要素をゆっくりと表示させるアニメーション。

アニメーションの方法というのは、いろいろとあるのだけれど、

今回は、単純な下から上にふわっと現れるアニメーションの作り方。

使用するjQueryプラグインは「jquery.inview.js」というもので、

今回のように「スクロールイベント」を実装する際には、とても簡単で便利。

という事で今回は、画像を３つ横並びにしてみて、画像のそれぞれの親要素に

試しに「showup」というクラス名をつけて、ふわっと表示させてみました。

マウスで下にスクロールした後に要素が下から上にふわっとゆっくり表示｜inview.js

まずは「https://github.com/protonet/jquery.inview」から「jquery.inview.js」をダウンロード、保存し、HTML側で読み込む。

次に、スクロールイベントのHTML部分、

スクロールイベント：HTML部分

<div class="showup-wrapper">
    <div class="showup inview">
        <img src="画像ファイル">
    </div>

    <div class="showup inview">
        <img src="画像ファイル">
    </div>

    <div class="showup inview">
        <img src="画像ファイル">
    </div>
</div>

スクロールイベント：CSS部分

.showup-wrapper {
	display: flex; /* ここで画像を横並びに */
}

.showup {
	width: 33.3%;
	opacity: 0; /* ここではまず最初の時点で要素が見えないように */
	overflow: hidden;
}

.showup img {
	max-width: 100%;
	height: 100%;
}

.inview {
	transition: 2s; /* ２秒かけて */
	transform: translate(0, 40px);
	-webkit-transform: translate(0, 40px); 
}

.show { /* jQuery側でこのクラスを付与するように指示 */
	opacity: 1.0; /* opacityを0から1にして要素が見えるように */
	transform: translate(0, 0);  /* 位置を0の場所まで戻す設定 */
	-webkit-transform: translate(0, 0);
}

スクロールイベント：jQuery部分

$(function() {
	$('.showup').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView) { // 要素が見える場所まで来たら
			$(this).stop().addClass('show'); // showクラスを付ける(addClass)
		}
		else{
			$(this).stop().removeClass('show');
		}
	});
});

HTML側の画像の親要素に「inview」というクラス名をつけて、CSSで下から上に要素が現れるように命令。

画面をスクロールした際に、jQueryで「show」というクラスを、HTML側の画像の親要素に付与、

画像の「opacity」を０から１にして画像を表示。

今回の内容は、簡単に説明するとこんな感じ。

スクロールイベント：それぞれ画像の表示タイミングをずらす

それぞれの画像の表示するタイミングをずらしたい場合は、それぞれの要素に別のクラス名をつけてCSS側で制御すればOK(例えば、inview1, inview2, inview3 など)

例えばこんな感じ。↓

それぞれの画像の表示タイミングをずらす：HTML部分

<div class="showup-wrapper">
    <div class="showup inview1">
        <img src="image/img1.jpg.webp">
    </div>

    <div class="showup inview2">
        <img src="image/img2.jpg.webp">
    </div>

    <div class="showup inview3">
        <img src="image/img3.jpg.webp">
    </div>
</div>

それぞれの画像の表示タイミングをずらす：CSS部分

.inview1 {
	transition: 2s;
	transform: translate(0, 40px);
	-webkit-transform: translate(0, 40px); 
}

.inview2 {
	transition: 3s;
	transform: translate(0, 60px);
	-webkit-transform: translate(0, 60px); 
}

.inview3 {
	transition: 4s;
	transform: translate(0, 80px);
	-webkit-transform: translate(0, 80px); 
}

こうする事によって、それぞれの画像が左から順番にタイミングをずらしながら表示される。

マウスオーバー系(hover)の処理：HTML部分

画像にカーソルを合わせた際のアニメーションをつけたい場合は、例えばこんな感じ、

今回は試しに「textbox」というクラス名をつけて、中に文字を書いてみました。

<div class="showup inview1">
    <img src="image/img1.jpg.webp">
	<div class="textbox">
	    <p>テキストテキストテキストテキスト</p>
	</div>
</div>

マウスオーバー系(hover)の処理：CSS部分

.showup {
	position: relative; /* これを追加 */	
}

.textbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
  z-index: 2;
  color: #fff;
  text-align: center;
}

.showup:hover .textbox {
	opacity: 1;
}

これでOK。

もしマウスオーバー時(ホバー)に、画像を少し拡大させたい場合は、画像の親要素に別のクラス名をつけて、こんな感じでもOK。

.zoom img:hover {
	transform: scale(1.05);
	transition-duration: .3s;
	filter: brightness(0.3);
}

完