40代高卒者が製造業からIT転職する【フェードイン右から】

こんにちは、フローです。

今回もフェードインで遊ぼう〜、って事で書いていきたいと思います。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【フェードインのコード】

1 フェードイン右から
2 まとめ

フェードイン右から

前回は下から出てくるCSSを書きました。

今回は右から出てくるCSSを書いていきます。

では、さっそく見ていきましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>ふわっとアニメーション</title>
</head>
<body>

　<div class="card-row">
  <div class="card">
    <div class="card-content">
      <h2>タイトル1</h2>
      <p>テキスト1</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2>タイトル2</h2>
      <p>テキスト2</p>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <h2>タイトル3</h2>
      <p>テキスト3</p>
    </div>
  </div>
</div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

前回と一緒でカードデザインを3つ用意しました。

CSS

.card-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  background-color: #f5f5f5;
}

.card {
  width: 100%;
  max-width: 300px;
  margin: 0 10px 20px 10px;
  position: relative;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateX(50%);
  background-color: #FFE0B2; /* 背景色 */
  border-radius: 10px; /* 角丸 */
  box-shadow: 0px 5px 15px rgba(0,0,0,0.2); /* 影 */
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.card.show {
  height: auto;
  opacity: 1;
  transform: translateX(0%);
  transition-delay: 0.5s;
}

.card:nth-child(1) {
  transition-delay: 0.5s;
}

.card:nth-child(2) {
  transition-delay: 1s;
}

.card:nth-child(3) {
  transition-delay: 1.5s;
}

.card .card-content {
  padding: 20px;
  text-align: center;
}

.card h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #FF9800; /* タイトルの色 */
}

.card p {
  font-size: 16px;
  line-height: 1.5;
  color: #4C2600; /* テキストの色 */
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-thumb {
  background-color: #FF9800;
  border-radius: 10px;
}

@media only screen and (min-width: 768px) {
  .card-row {
    flex-direction: row;
  }
  .card {
    margin: 0 10px;
  }
}

/* iPhone など小さい画面でのカード表示アニメーション */
@media only screen and (max-width: 767px) {
  .card {
    transform: translateY(50%);
  }
  .card.show {
    height: auto;
    opacity: 1s;
    transform: translateY(0%);
    transition-delay: 0.5s;
  }
}

pc表示では横並びに3つ並んで、左から順番に右から出てきます。

レスポンシブデザインでは、縦並びに上から順番に右から出てくる設計です。

jQuery

let ticking = false;

$(window).on('scroll', function() {
  if (!ticking) {
    window.requestAnimationFrame(function() {
      let cards = $('.card');
      cards.each(function() {
        if ($(this).offset().top + 100 < $(window).height() + $(window).scrollTop()) {
          $(this).addClass('show');
        }
      });
      ticking = false;
    });
    ticking = true;
  }
});

jQueryの記述も、下から出てくるフェードインと同じになります。