はじめまして、ヤマブキといいます。
このブログでは私自身がプログラミング、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;
}