Site Overlay

スクロールに合わせて要素をフワッと表示させる方法

By pafoijfae

他の人が作ったホームページを見ていて、「画面の表示に合わせて動きつけるのかっこいいなぁ。でも難しいんだろうなぁ。」と半分諦めていたのですが、残り半分の方が諦めきれず、「いや！やっぱりやりたい！」と前向きな気持ちになり、簡単にできる方法はないかなぁと探していた所、簡単にできる方法を見つけたのでここで紹介させてもらいます！！

①まずはHTMLにCLASSを追加

フワッと表示させたい要素（写真やテキスト）にscroll-upのクラスと追加します。
例としてはこんな感じ。
＜index_point_back＞にclass=”scroll-up”を追加で入れます。

<div id="index_point_back" class="scroll-up">
  <p class="point">POINT</p>
  <p class="title">歯科特殊健康診断は法律で義務付けられています</p>
  <p class="text">〈労働安全衛生法第66条第3項〉により、事業者は有害な業務で政令で定めるものに従事する労働者に対し厚生労働省令で定めるところにより歯科医師による健康診断を行わなければなりません。<br>
  ※令和４年10月１日より、歯科特殊健康診断の健康診断結果は従業員の人数にかかわらず、歯科健康診断結果報告書を所轄労働基準監督署長に提出する義務があります。</p>
</div>
②CSSに以下のコードをコピペで追加
.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
③JavaScriptに以下のコードをコピペで追加

外部ファイルから読み込んでもらってもいいですし、<head>～</head>の中にペーストしてもらってもいいです。

<script type='text/javascript'>
function scroll_effect() {
  var element = document.getElementsByClassName('scroll-up');
  if(!element) return;
                      
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;
  var showTiming = 200; // 要素を表示するタイミング
  for(var i = 0; i < element.length; i++) { 
    var elemClientRect = element[i].getBoundingClientRect(); 
    var elemY = scrollY + elemClientRect.top; 
    if(scrollY > elemY - windowH + showTiming) {
      element[i].classList.add('is-show');
    }
  }
}
window.addEventListener('scroll', scroll_effect); // スクロール時に実行
</script>

これで画面をスクロールした時に、要素が下からフワッと表示されます！なにも動きのないホームページより見栄えが良くなるのでおすすめです！

この動きを利用して作ったホームページがこちらになります！
＜京都歯科特殊健診相談センター＞

今回は下からフワッと表示でしたが、横から移動してくる方法もあるので、それはまた研究していきたいなと思います！

上にスクロール