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

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

デモはこちらです↓

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

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

作り方

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

2.　1をCSSで初めは透明（＝非表示）にしておく。別クラスを作成して、そちらは不透明（=表示）にする。

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

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

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

javascript,HTML,CSSでアコーディオンメニュー作成（jQueryなし）

javascriptでアコーディオンメニュー（トグルメニュ―）を作成した記録です。 jQueryなしの素のJavascriptで記載してます。

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

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

1. 1.　HTMLで表示させるかたまりをくくる。（スクロールで表示させたいところには、あとからJSで表示させるクラスを追加します）
2. 2.　 1をCSSで初めは透明（＝非表示）にしておく。別クラスを作成して、そちらは不透明（=表示）にする。
3. 3.　JSでウィンドウの現在位置を取得して、スクロールしたら2の別クラスを付与して表示させる。

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

HTML↓


<p>スクロールするとふわっと表示</p>
  <section>
        <div class="up op">表示1</div>
  </section>
  <section>
        <div class="up op">表示2</div>
  </section>

<p>スクロールするとふわっと表示</p>

</section>

</section>

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

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

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

2.　 1をCSSで初めは透明（＝非表示）にしておく。別クラスを作成して、そちらは不透明（=表示）にする。

CSS↓


p{
  text-align:center;
}
section {
  display: flex;
  padding: 2%;
  box-sizing: border-box;
}
 
.up{
  width: 600px;
  height: 200px;
  margin-left: auto;
  margin-right:auto;
  box-sizing: border-box;
  background: #6de;
}


.up{
    opacity: 0;
    transition: all 1s ease;
  }
   
 .up.show {
    opacity: 1;
    transform: none;
  }
   
.op{
    transform: translate(0, 100px);
  }

text-align:center;

}

section {

display: flex;

padding: 2%;

box-sizing: border-box;

}

.up{

width: 600px;

height: 200px;

margin-left: auto;

margin-right:auto;

box-sizing: border-box;

background: #6de;

}

.up{

opacity: 0;

transition: all 1s ease;

}

.up.show {

opacity: 1;

transform: none;

}

.op{

transform: translate(0, 100px);

}

下の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↓


window.onload=function(){
  var scroll = document.querySelectorAll('.up');
   
  var Animation = function() {
    for(var i = 0; i < scroll.length; i++) {
    var triggerMargin = 80;
    if (window.innerHeight > scroll[i].getBoundingClientRect().top + triggerMargin) {
    scroll[i].classList.add('show');
    }
    }
    }
    window.addEventListener('scroll', Animation);
  }

window.onload=function(){

var scroll = document.querySelectorAll('.up');

var Animation = function() {

for(var i = 0; i < scroll.length; i++) {

var triggerMargin = 80;

if (window.innerHeight > scroll[i].getBoundingClientRect().top + triggerMargin) {

scroll[i].classList.add('show');

}

window.addEventListener('scroll', Animation);

}

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

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

javascript,HTML,CSSでアコーディオンメニュー作成（jQueryなし）

javascriptでアコーディオンメニュー（トグルメニュ―）を作成した記録です。 jQueryなしの素のJavascriptで記載してます。

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のリンクをヘッダーに記載して先に読み込ませる書き方をしたので記載しています。

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

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

<あわせて読みたい>