該当箇所にスクロールしたときに、線を左から右へ伸びるようにするための方法を紹介します。
まず該当箇所はもともとこのような感じでした。
少し動きを付けたいと思い、その個所にスクロールしたときに線が伸びるようにしたいと考えたわけです。
これが
こうなって
こうなるわけです。
今回紹介するのはあくまでも弊社サイトに実装したものとなります。線が伸びきるまで2秒の設定にしてあります。
線の色や動く速度などは、適宜変更するようにしてください。
使用しているHTML
まず以下のようなHTMLを用意しました。
この中で
この部分が線を出力するHTMLの場所であり、そこにユーザーがスクロールしたときに線が伸びる動きが発動するようにします。
使用しているCSS
使用しているCSSは以下のようなものとなります。
position: absolute;
top: 20px;
border: solid 1px #af1e23;
margin: 5px 0 0 20px;
display: inline-block;
width: 0;
}
.animate-line {
animation: lineGrow 2s ease-in-out forwards;
}
@keyframes lineGrow {
from {
width: 0;
}
to {
width: 100px;
}
}
「subtext」というクラスの中にある「line」についてまず宣言しています。
次に「animate-line」でアニメーションの動きを指定しています。「animate-line」はソースの中で使用していませんが、この後で紹介するjavascriptでanimate-lineを自動で追加するという命令を出しています。自動で追加されるため、それに対してのCSSとなります。
次に「keyframes lineGrow」ではじめは0で最後に100pxになるようにと宣言しています。
使用しているjavascript
最後にjavascriptです。以下を使用することで「特定の箇所にスクロールしたらアニメーションを動かす」といった命令を出します。
document.addEventListener('scroll', function() {
var elements = document.querySelectorAll('.subtext .line');
elements.forEach(function(element) {
var position = element.getBoundingClientRect();
if (position.top < window.innerHeight && position.bottom >= 0) {
element.classList.add('animate-line');
}
});
});
これは要するに「ユーザーが該当箇所に来たらアニメーションを適用してね。」ということを宣言しています。
実際の動作を知りたい方は、当サイトのTOPページを見てみてください。
※一応今回の施策を行う場合、サイトのバックアップをしておいた方がよいと思います。万が一トラブルが発生しても弊社では一切の責任を負うことができませんので予めご了承ください。
