日別アーカイブ: 2021年8月10日

フェードイン

コメントを残す

ボタンを押したら発火するフェードインなどができるアニメーション

作成するもの

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;
  }
 }
}
}
}