JavaScript

【コピペOKカスタマイズ可】横棒 グラフアニメーション js

更新日:

はじめまして、ヤマブキといいます。

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

作成する横棒グラフアニメーション

はじめに

HTML

<body>
  <main>
    <section  class="graph">
      <div>グラフ20%</div>
      <div>グラフ50%</div>
      <div>グラフ90%</div>
      <div>グラフ60%</div>
      <div>グラフ30%</div>
      <div>グラフ10%</div>
    </section>
    <section class="sa">
      <div class="bar" id="i-0">ㅤ</div>
      <div class="bar" id="i-1">ㅤ</div>
      <div class="bar" id="i-2">ㅤ</div>
      <div class="bar" id="i-3">ㅤ</div>
      <div class="bar" id="i-4">ㅤ</div>
      <div class="bar" id="i-5">ㅤ</div>
    </section>
  </main>

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

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

CSS

body{
  margin: 0;
  background-color: pink;
}
main{
  display: flex;
  padding-bottom: 250px;
}
.graph{
  width: 30%;
}
.graph div{
  -webkit-text-stroke: .5px black;
  min-width: 100px;
  height: 3vw;
  min-height: 33px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  color: white;
  border: 1px solid black;
  width: 25%;
  margin: 0;
  border-radius: 10px 0 0 10px;
  margin-left:auto;
  margin-bottom: 1vw;
}

cssではまずグラフ横の文字とボックスのスタイリングをしておきます。

次に

CSS

.sa {
  width: 70%;
  opacity: 0;
  transition: all .5s ease;
}
.sa.show{
  max-width: 70%;
  width: 100%;
  animation: bar-animation 1 5s;
  opacity: 1;
  transform: none;
}
.bar{
  border-radius:0 10px 10px 0;
  min-height: 33px;
  height: 3vw;
  border: 1px solid black;
  margin-bottom: 1vw;
}
@keyframes bar-animation{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

showクラスが付いていないときはopacity:0;で非表示にし、showクラスが付いたときにopacity:1;で表示し@keyframes bar-animationでwidth:100%;(max-widthで70%)にしてくれます。

最後に

CSS

.show > #i-0{
  max-width: 20%;
  background: #FF5252;
}
.show > #i-1{
  max-width: 50%;
  background: #FF5252;
}
.show > #i-2{
  max-width: 90%;
  background: #FF5252;
}
.show > #i-3{
  max-width: 60%;
  background: #FF5252;
}
.show > #i-4{
  max-width: 30%;
  background: #FF5252;
}
.show > #i-5{
  max-width: 10%;
  background: #FF5252;
}

グラフの長さ、色を設定して完成です。

オススメしている本

他の投稿

-JavaScript

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