JavaScript

【コピペOK】スクロールで一部の背景色が延びて表示するアニメーション

投稿日:

このブログでは私自身がプログラミング、Web関係、生活していて経験した悩んだことを同じように悩んでいる人の手助けになるような情報を発信していきます。

作成する背景色アニメーション

はじめに

HTML

 <body>
    <p>本文。<span class="highlight">本文の一部を見やすくします。</span>本文。</p>

    <script>
      var scrollAnimationElm = document.querySelectorAll('.highlight');
     var scrollAnimationFunc = function() {
       for(var i = 0; i < scrollAnimationElm.length; i++) {
         var triggerMargin = 50;
         if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
           scrollAnimationElm[i].classList.add('show');
         }
       }
     }
     window.addEventListener('load', scrollAnimationFunc);
     window.addEventListener('scroll', scrollAnimationFunc);
       </script>
  </body>

jsではスクロールして、画面下から要素の幅が50pxになったら、highlightクラスにshowクラスを追加するという処理にしています。

CSS

body{
  margin:0;
}
p{
  text-align: center;
  padding-top: 1000px;
  padding-bottom: 500px;
}

まず文字などのスタイリングをしておきます。

スクロールできるように上下にpaddingをつけているだけなのでコピペする必要がない場合があります。

次に

.highlight{
  position: relative;
  display: inline-block;
}

.highlight::after{
  position: absolute;
  top:0;
  left:0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
 background: red;
  transform-origin: left top;
  transition: transform .8s;
}

highlightクラスをposition: relative;

highlight::afterにposition: absolute;top:0;left: 0;

highlightクラスにhighlight::afterを重ねておきます。

カスタマイズすることが出来るのは background : 色 ; transform-origin : 上下左右 ; transition : transform 表示速度 ; ですね。

最後に

CSS

.highlight.show::after{
  z-index: -1;
  transform: scale(1, 1);
}

z-indexが初期値だと文字が隠れてしまうので-1をして優先度を下げ、文字が見えるようにします。

スクロールしてhighlightクラスにshowクラスがついたらscale(0,1)からscale(1,1)になるので線が引かれたように動きます。

オススメしている本

他の投稿

-JavaScript

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.