ウェブサイトにアニメーションは、今では不可欠で、優れたアニメーションを実装することでユーザーの記憶へ残すことができます！
そんな必須のアニメーションの中でも、今回はスクロールに応じて線が動くアニメーションをCSSとJavaScriptを使って実装していこうと思います。
実装するアニメーションは、スクロールして要素が画面に入ったら、線を動かし要素の周りを囲うようにしていきたいと思います！
さらに記事では、CSSのtransformやtransitionを活用したアニメーションの基礎から、JavaScriptでスクロールイベントをトリガーにする方法までをシンプルに解説します。
難しそうに見える線の動かしも、方法を理解してしまえば、初心者の方でも簡単に実装できるので、ぜひ参考にしてください！
- 線を動かすアニメーションの基礎
- スクロールをトリガーにした動きの実装方法
- 簡単にカスタマイズできるアニメーションの作り方
完成イメージ
それでは、最初に完成イメージをご確認ください。
See the Pen スクロールアニメーションで線が出てくる。 by 1buk1 (@1buk1) on CodePen.
.scroll-message内にあるテキストは、適宜削除してからお使いください！
scssを使っている人は、コードを載せておきます。
こちらの方が、調整しやすいと思いますので、ぜひ使ってください。
$line-color: #ff0000;
$box-color: #d3d3d3;
$transition-time: 0.75s;
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.5;
background-color: #ffffff; /* 背景は白 */
}
.scroll-message {
text-align: center;
font-size: 1.2rem;
margin: 20px 0;
color: #333;
}
.animated-box-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 100vh auto 100px; /* 下に100pxの余白を追加 */
background: $box-color; /* ボックスを目立ちすぎない薄いグレーに変更 */
overflow: hidden;
border-radius: 10px;
.animated-box {
position: relative;
width: 100%;
height: 100%;
span {
position: absolute;
background: $line-color; /* 線の色を赤に変更 */
transition: transform $transition-time ease-in;
}
span:nth-child(1) {
top: 0;
left: 0;
height: 3px;
width: 100%;
transform: translateX(100%);
}
span:nth-child(2) {
top: 0;
right: 0;
height: 100%;
width: 3px;
transform: translateY(-100%);
}
span:nth-child(3) {
bottom: 0;
left: 0;
height: 3px;
width: 100%;
transform: translateX(-100%);
}
span:nth-child(4) {
top: 0;
left: 0;
height: 100%;
width: 3px;
transform: translateY(100%);
}
}
}
.c-anim-up .animated-box span {
transform: translate(0);
}
それでは、それぞれ解説していきます。
HTMLの構造
まず、アニメーションを表示するためのHTMLを準備します。
<div class="scroll-message">下にスクロールしてください</div>
<div class="animated-box-wrapper">
<div class="animated-box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>.animated-box-wrapperにアニメーション対象となるボックス全体のラッパーを用意します。
次にspanを活用して動かす線を表現します。
スクロールしたときに動かす線は、このspanで表現した線になるので、cssやjsは基本この要素に対して適用させていくことになります。
CSSでデザインと動きを設定
次に、ボックスと線のデザイン、そして動きを実装します。
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.5;
background-color: #ffffff; /* 背景は白 */
}
.scroll-message {
text-align: center;
font-size: 1.2rem;
margin: 20px 0;
color: #333;
}
.animated-box-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 100vh auto 100px; /* 下に余白を追加 */
background: #d3d3d3; /* ボックスは薄いグレー */
overflow: hidden;
border-radius: 10px;
}
.animated-box {
position: relative;
width: 100%;
height: 100%;
}
.animated-box span {
position: absolute;
background: #ff0000; /* 線は赤色 */
transition: transform 0.75s ease-in;
}
.animated-box span:nth-child(1) {
top: 0;
left: 0;
height: 3px;
width: 100%;
transform: translateX(100%);
}
.animated-box span:nth-child(2) {
top: 0;
right: 0;
height: 100%;
width: 3px;
transform: translateY(-100%);
}
.animated-box span:nth-child(3) {
bottom: 0;
left: 0;
height: 3px;
width: 100%;
transform: translateX(-100%);
}
.animated-box span:nth-child(4) {
top: 0;
left: 0;
height: 100%;
width: 3px;
transform: translateY(100%);
}
.c-anim-up .animated-box span {
transform: translate(0);
}線の初期位置を設定してあげます。
スクロールしてきたら、線が動くのでそれまでは、線を要素のそとに出しておきましょう。
単純に外に出すだけでは、見えてしまいますので、overflow: hidden;で線を画します。
そして、スクロールしてきたら、要素をtransform: translate(0)を適用して戻します。
これで、線が外から中に動いてきたように見えるわけです！
JavaScriptでアニメーションを発火
最後は、スクロールしたらクラスがつくようにjsを設置してあげます。
これで、準備は万端です！！！
document.addEventListener('scroll', () => {
const boxWrapper = document.querySelector('.animated-box-wrapper');
const boxTop = boxWrapper.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (boxTop < windowHeight - 100) { // 要素が見えたら発火
boxWrapper.classList.add('c-anim-up');
}
});jsは、使い慣れたjsを使ってもらっても大丈夫です。
その場合は、付与されるクラス名も変更してあげる必要があるので、cssも調整してあげてください。
応用編：線が要素の周りを囲うように表示される。
それでは、最後に応用編として線が要素の周りを囲うように表示される方法をご紹介します！
先ほどとは、違った印象です。
使い分けてみてください。
See the Pen スクロールアニメーションで線が出てくる。タイプ２ by 1buk1 (@1buk1) on CodePen.
ポイントとしては、トランジンションの動きを少し遅くして、線の動きを滑らかにしています。
その次に、線画表示させる方向を変更しています。
- 上：左から右
- 右：上から下
- 下：右から左
- 左：下から上
といった感じに、さきほどとは線の配置を変えて、クラスが付与されたときに下の位置に動かしてあげています。
scssを使っている方のために、scssでの表記も載せておきます。
調整する必要があると思いますので、scssを使っている人はこちらを使って、調整してみてください。
$line-color: #ff0000;
$box-color: #d3d3d3;
$transition-time: 1.5s;
$opacity-time: 0.5s;
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.5;
background-color: #ffffff;
}
.scroll-message {
text-align: center;
font-size: 1.2rem;
margin: 20px 0;
color: #333;
}
.animated-box-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 100vh auto 100px;
background: $box-color;
overflow: hidden;
border-radius: 10px;
}
.animated-box {
position: relative;
width: 100%;
height: 100%;
span {
position: absolute;
background: $line-color;
opacity: 0; /* 初期状態は非表示 */
transition: opacity $opacity-time ease, transform $transition-time ease; /* 滑らかな変化 */
}
/* 上部の線 - 左から右 */
.top-line {
top: 0;
left: 0;
height: 3px;
width: 100%;
transform: translateX(-100%);
transition: transform $transition-time ease, opacity $opacity-time ease;
}
/* 右側の線 - 上から下 */
.right-line {
top: 0;
right: 0;
width: 3px;
height: 100%;
transform: translateY(-100%);
transition: transform $transition-time ease, opacity $opacity-time ease;
}
/* 下部の線 - 右から左 */
.bottom-line {
bottom: 0;
right: 0;
height: 3px;
width: 100%;
transform: translateX(100%);
transition: transform $transition-time ease, opacity $opacity-time ease;
}
/* 左側の線 - 下から上 */
.left-line {
bottom: 0;
left: 0;
width: 3px;
height: 100%;
transform: translateY(100%);
transition: transform $transition-time ease, opacity $opacity-time ease;
}
}
/* スクロール後にアニメーションを発火 */
.c-anim-up {
.top-line {
opacity: 1;
transform: translateX(0);
}
.right-line {
opacity: 1;
transform: translateY(0);
}
.bottom-line {
opacity: 1;
transform: translateX(0);
}
.left-line {
opacity: 1;
transform: translateY(0);
}
/* それぞれの線が出てくるタイミング */
.top-line {
transition-delay: 0s; /* 上部は最初に動く */
}
.right-line {
transition-delay: 1.2s; /* 右部は少し遅れて動く */
}
.bottom-line {
transition-delay: 2.4s; /* 下部はその次 */
}
.left-line {
transition-delay: 3.6s; /* 左部は最後に動く */
}
}まとめ
今回紹介した「スクロールで線を動かすアニメーション」は、CSSとJavaScriptを組み合わせることで簡単に実装できる魅力的な機能です。
jsは、特別指定ではないので、使い慣れたスクロールアニメーションのjsを使ってください。