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

.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: translateY(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: translateY(0%);
  transition-delay: 0.5s;
}

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

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

.card.show: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 {
    transition: transform 1.8s ease-in-out, opacity 1.8s ease-in-out;
  }
  .card.show {
    height: auto;
    opacity: 1s;
    transform: translateY(0%);
  }
}

.card-row {
display: flex;
flex-direction: column; /* カードを垂直に配置する /
justify-content: center; / 垂直方向にセンター揃えする /
align-items: center; / 水平方向にセンター揃えする /
min-height: 100vh; / 画面の高さに合わせる最小の高さを設定する /
overflow: hidden; / 画面外にはみ出たコンテンツを隠す /
background-color: #f5f5f5; / 背景色を設定する */
}

.card {
width: 100%; /* 横幅を100%に設定する /
max-width: 300px; / 最大横幅を300pxに設定する /
margin: 0 10px 20px 10px; / 上下左右の余白を設定する /
position: relative; / 相対的な位置を指定する /
overflow: hidden; / コンテンツがはみ出た場合に隠す /
height: 0; / 初期状態で高さを0に設定する /
opacity: 0; / 初期状態で透明度を0に設定する /
transform: translateY(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; / 透明度を1に設定してカードを表示する /
transform: translateY(0%); / 上に移動させて表示する /
transition-delay: 0.5s; / アニメーションの遅延時間を指定する */
}

.card.show:nth-child(1) {
transition-delay: 0.5s; /* 1つ目のカードのアニメーション遅延時間を指定する */
}

.card.show:nth-child(2) {
transition-delay: 1s; /* 2つ目のカードのアニメーション遅延時間を指定する */
}

.card.show:nth-child(3) {
transition-delay: 1.5s; /* 3つ目のカードのアニメーション遅延時間を指定する */
}

.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; /* 画面幅が768px以上の場合に、カードを水平に配置する /
}
.card {
margin: 0 10px; / 画面幅が768px以上の場合に、カード間の余白を設定する */
}
}

/* 変更：iPhone など小さい画面でのカード表示アニメーション /
@media only screen and (max-width: 767px) {
.card {
transition: transform 1.8s ease-in-out, opacity 1.8s ease-in-out; / カードのアニメーションを指定する /
}
.card.show {
height: auto; / 高さを自動に設定してカードを表示する /
opacity: 1s; / 透明度を1に設定してカードを表示する /
transform: translateY(0%); / 上に移動させて表示する */
}
}

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