このブログでは私自身がプログラミング、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);
}