左から右へ線を動かすCSSとjavascript

静岡県富士市のホームページ制作

該当箇所にスクロールしたときに、線を左から右へ伸びるようにするための方法を紹介します。

まず該当箇所はもともとこのような感じでした。

線が左から右に伸びるCSSとjavascript

少し動きを付けたいと思い、その個所にスクロールしたときに線が伸びるようにしたいと考えたわけです。

線が左から右に伸びるCSSとjavascript
これが
線が左から右に伸びるCSSとjavascript
こうなって
線が左から右に伸びるCSSとjavascript
こうなるわけです。

今回紹介するのはあくまでも弊社サイトに実装したものとなります。線が伸びきるまで2秒の設定にしてあります。

線の色や動く速度などは、適宜変更するようにしてください。

使用しているHTML

まず以下のようなHTMLを用意しました。

<h2 class="subtext">6つの強み <span class="line"></span></h2>

この中で

<span class="line"></span>

この部分が線を出力するHTMLの場所であり、そこにユーザーがスクロールしたときに線が伸びる動きが発動するようにします。

使用しているCSS

使用しているCSSは以下のようなものとなります。

.subtext .line {
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ページを見てみてください。

※一応今回の施策を行う場合、サイトのバックアップをしておいた方がよいと思います。万が一トラブルが発生しても弊社では一切の責任を負うことができませんので予めご了承ください。

静岡県でホームページ制作会社の見つけ方 気を付けるべき5つのポイント
弊社「株式会社デキタ」は、静岡県でホームページ制作会社を行っています。 制作会社の視点から、ホームページ制作会社を探すときに気をつけた方が良いと考えられるポイントを紹介したいと思います。 まず結論からいいますと、「ホームページ制作会社はどこ...
タイトルとURLをコピーしました