ボタンを押したら発火するフェードインなどができるアニメーション
作成するもの
HTMLの記述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<linkrel="stylesheet"href="style.css">
</head>
<body>
<button onclick="document.querySelector('.appear').classList.toggle('inview');">
appear
</button>
<div class="appear right">
<div class="item"><img src="./images/image-1.jpg"></div>
<div class="item"><img src="./images/image-1.jpg"></div>
<div class="item"><img src="./images/image-1.jpg"></div>
<div class="item"><img src="./images/image-1.jpg"></div>
<div class="item"><img src="./images/image-1.jpg"></div>
<div class="item"><img src="./images/image-1.jpg"></div>
<div class="item"><img src="./images/image-1.jpg"></div>
<div class="item"><img src="./images/image-1.jpg"></div>
</div>
</body>
</html>SCSSの記述
// ココに定義する
@import 'appear';
img {
max-width: 80%;
}_appear.scssの記述
$pattern: (
"up": translateY(6px),
"down": translateY(-6px),
"left": translateX(40px),
"right": translateX(-40px)
);
@each $key, $value in $pattern {
.appear.#{$key} {
&.item {
transform: $value;
}
}
}
.appear {
&.item {
transition: all 0.8s;
// 初期状態は透明にする
opacity: 0;
}
&.inview {
&.item {
// 発火したとき透明化を解除
opacity: 1;
// 上で設定したtransformの値を初期化することでアニメーションを見せる
transform: none;
// 1から10までの遅延の設定
@for $i from 1 through 10 {
&:nth-child(#{$i}) {
transition-delay: $i * 0.1s;
}
}
}
}
}
