【Javascript,HTML,CSS】スクロールしたらふわっと表示(jQueryなし)

【Javascript,HTML,CSS】スクロールしたらふわっと表示(jQueryなし)

素のJavascriptでスクロールに応じてふわっと表示する方法のメモです。(jQueryなし)

デモはこちらです↓

※スマホの方はResultを押すと動きだけ表示されます。

See the Pen スクロールでふわっと表示 by dyna (@sakudyna) on CodePen.

 

作り方

1. HTMLで表示させるかたまりをくくる。(スクロールで表示させたいところには、あとからJSで表示させるクラスを追加します)

2. 1をCSSで初めは見えなくしておく。別クラスを作成して、そちらは表示させるように記載しておく。

3. JSでウィンドウの現在位置を取得して、スクロールしたら2の別クラスを付与して表示させる。

 

こちらの記事、「accordionメニュー(トグルメニュー)」と似たようなことをしています。

※accordionメニューを作ってみた記事はこちら

違うのは、JSでウィンドウ位置を把握する事、スクロールトリガーを付けたことです。

では内容を見ていきます。

 

1. HTMLで表示させるかたまりをくくる。(スクロールで表示させたいところには、あとからJSで表示させるクラスを追加します)

HTML↓

ふわっと表示させたいところをdivやsectionでくくります。

※ここでは表示1、表示2ごとにふわっと表示させたいので、divとしてくくります。

divのclassには up と op をつけておきます。

 

2. 1をCSSで初めは見えなくしておく。別クラスを作成して、そちらは表示させるように記載しておく。

CSS↓

下の3段が大事です。

 .up{ ~、.up.show{~、 .op{~ が今回の表示、非表示に使います。 

.up{
opacity: 0; //完全に透明
transition: all 1s ease; //変化の設定 1秒かけてゆっくり表示
}

.up.show { //jsで追加するクラス(表示用)
opacity: 1; //完全に不透明
transform: none; //変化なし
}

 

.op{
transform: translate(0, 100px); //x,y 表示位置を100px下から
}

この.showをJSでクラス付与操作していきます。

 

 

3. JSでウィンドウの現在位置を取得して、スクロールしたら2の別クラスを付与して表示させる。

js↓

 

document.querySelectorAll(‘.up’); で.upのクラスをすべて取得します。

※document.querySelectorAllの記事はこちらにも記載してます。

var Animation = function() { ここで高さの取得の関数を設定します。

躓きやすいところ↓

window.innerHeight現在のブラウザの高さを取得
getBoundingClientRect().topターゲット要素の位置座標を取得する
ブラウザの表示領域の左上を(0, 0)として算出
classList.addクラスを追加する

 

つまり、if~からの内容は

「現在のブラウザの高さ > .upのクラス位置(左上基準)+ 80px」

の時は、.showクラスの追加をする、としています。

 

先ほどのCSSでshowクラスに

opacity =1:表示(完全に不透明)

を追加しているので、スクロールするとshowクラスの追加→表示ということになります。

 

ふわっと表示しているのは、CSSのtransform,translateが効いているからです。

 

最後にwindow.addEventListener(‘scroll’, Animation); でスクロールしたときにAnimation関数を実行するように設定。

 

※window.onloadはこのJSのリンクをヘッダーに記載して先に読み込ませる書き方をしたので記載しています。

  

 

まとめてみると、書き方(作り方)は色々あるなと改めて思います。

ただ、この書き方は自分的には比較的楽だなと思います。

HTML&CSS関連はこれで勉強してました。実際に使えるコードが多数。そしてデザインがオシャレです!!

【参考にさせていただいたサイト】

スクロール位置の取得→スクロール位置取得方法をいい加減忘れないようにメモ

transition、translare →【CSS3】Transition(変化)関連のまとめHTMLクイックリファレンス

いつもありがとうございます。