要素の範囲に入ったら色んな形で要素内の要素が順番にフェードインをJSで作成

2026年1月2日 JavaScript,範囲に入ったら要素がふわっとフェードイン

動きを実現する仕組み

Javascriptで要素の範囲に入ったら色んな形で要素内の要素が順番にフェードイン


STEP1　HTMLコード


<div class="product_design_image_group">
          <figure class="product_design_image_1 fadein-sequence fadein-up">
            <picture>
              <source media="(max-width: 769px)" srcset="images/neta_sp1.png" />
              <source media="(min-width: 770px)" srcset="images/neta1.png" />
              <img
                class="product_design_image_bg_1"
                src="images/neta1.png"
                alt="背景画像"
              />
            </picture>
          </figure>
          <figure class="product_design_image_2 fadein-sequence fadein-up">
            <picture>
              <source media="(max-width: 769px)" srcset="images/neta_sp2.png" />
              <source media="(min-width: 770px)" srcset="images/neta2.png" />
              <img
                class="product_design_image_bg_1"
                src="images/neta2.png"
                alt="背景画像"
              />
            </picture>
          </figure>
          <figure class="product_design_image_3 fadein-sequence fadein-up">
            <picture>
              <source media="(max-width: 769px)" srcset="images/neta_sp3.png" />
              <source media="(min-width: 770px)" srcset="images/neta3.png" />
              <img
                class="product_design_image_bg_1"
                src="images/neta3.png"
                alt="背景画像"
              />
            </picture>
          </figure>
          <figure class="product_design_image_4 fadein-sequence fadein-up">
            <picture>
              <source media="(max-width: 769px)" srcset="images/neta_sp4.png" />
              <source media="(min-width: 770px)" srcset="images/neta4.png" />
              <img
                class="product_design_image_bg_1"
                src="images/neta4.png"
                alt="背景画像"
              />
            </picture>
          </figure>
        </div>

CSSでコーディング


STEP2　cssコード


要素のｃｓｓ

.product_design_section {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
  padding-block: 50px;
  background-color: #faf5e7;
}

.product_design_section::before {
  content: "";
  display: block;
  width: 100%;
  height: 4rem;
  position: absolute;
  top: -20px;
  left: 0;
  background-image: url("../images/top_wave.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

.product_design_section::after {
  content: "";
  display: block;
  width: 100%;
  height: 4rem;
  position: absolute;
  bottom: -20px;
  left: 0;
  background-image: url("../images/bottom_wave.png");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  z-index: 0;
}

.product_design_inner {
  max-width: 1150px;
  width: 100%;
  margin-inline: auto;
  padding-inline: min(2.08vw, 30px);
  padding-bottom: 100px;
  text-align: center;
}

.section_title_design {
  font-size: min(4vw, 40px); /*1000pxでのvw算出*/
  font-weight: bold;
  color: var(--text-color);
  text-align: center;
  margin-bottom: min(1.39vw, 20px);
}

.section_title_design span {
  display: block;
  color: #dd742c;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.tl_sub {
  font-size: min(1.7999999999999998vw, 18px); /*1000pxでのvw算出*/
  color: var(--text-color);
  margin-top: min(3.33vw, 50px);
  margin-bottom: min(3.33vw, 50px);
  line-height: 1.8;
}

.product_design_items {
  margin: 0 auto;
  padding: 0px;
}

.product_design_item a {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  text-align: left;
  background-color: #fff;
  padding: 30px;
}

.product_design_item:not(:first-child) {
  margin-top: 50px;
}

.product_design_item img {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 400 / 300;
  border-radius: 1.5rem;
  overflow: hidden;
}

.product_design_item_title {
  font-size: 2rem;
  padding-bottom: 1.5rem;
}

.product_design_inner p {
  font-size: min(1.7999999999999998vw, 18px); /*1000pxでのvw算出*/
  color: var(--text-color);
  line-height: 1.8;
}

.product_design_item_more {
  margin-top: 20px;
  text-align: right;
}

.c_btn {
  display: inline-block;
  font-size: min(1.5vw, 15px); /*1000pxでのvw算出*/
  font-weight: 700;
  padding: 0.5625rem 5rem 0.5625rem 0;
  position: relative;
  color: var(--text-color);
}

.c_btn::after {
  content: "";
  position: absolute;
  right: 0;
  top: 48%;
  transform: translateY(-48%);
  width: 40px; /*円の大きさを調整*/
  height: 40px; /*円の大きさを調整*/
  border-radius: 50%;
  background-color: var(--gold--);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.c_btn::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent; /*三角形の大きさを調整*/
  border-bottom: 8px solid transparent; /*三角形の大きさを調整*/
  border-left: 12px solid var(--white--); /*三角形の大きさを調整*/
  z-index: 1;
  pointer-events: none;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*矢印を画像で作る時はコチラ*/
/*.c_btn::after {
  content: "";
  position: absolute;
  right: 0;
  top: 48%;
  transform: translateY(-48%);
  width: 40px; /* 画像の大きさ */
/*height: 40px; /* 画像の大きさ */
/*border-radius: 50%;
  background-image: url("../images/arrow.png"); /* 矢印画像のパス */
/*background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* 矢印画像の大きさを調整 */
/*display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}*/

/*コンテンツで矢印を作る時はコチラ*/
/*.c_btn::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 48%;
  transform: translateY(-48%);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--white--);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--gold--);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}*/

.c_btn:hover::after {
  right: -5px;
}

.c_btn:hover::before {
  right: 7px;
}

@media (hover: hover) {
  .c_btn:hover::after {
    right: -5px;
  }
  .c_btn:hover::before {
    right: 7px;
  }
}

.btn_more {
  margin-top: min(3.33vw, 50px);
  text-align: center;
  position: relative;
}

.btn_more a {
  display: inline-block;
  font-size: min(2vw, 20px); /*1000pxでのvw算出*/
  font-weight: 700;
  margin: 0 auto;
  position: relative;
}

/*矢印を画像で作る時はコチラ*/
.btn_more a::after {
  content: "";
  position: absolute;
  right: -55px;
  top: 48%;
  transform: translateY(-48%);
  width: 40px; /* 画像の大きさ */
  height: 40px; /* 画像の大きさ */
  border-radius: 50%;
  background-image: url("../images/arrow.png"); /* 矢印画像のパス */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* 矢印画像の大きさを調整 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn_more a:hover::after {
  right: -60px;
}
@media (hover: hover) {
  .btn_more a:hover::after {
    right: -60px;
  }
}

.product_design_image_group {
  width: 100%;
  max-width: 1300px; /*画像全体の最大幅*/
  height: 100%;
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}

.product_design_image_1 {
  position: absolute;
  width: min(25vw, 360px);
  top: -5%;
  left: 0%;
  z-index: 1;
}

.product_design_image_2 {
  position: absolute;
  width: min(14.93vw, 215px);
  top: 0%;
  right: 0%;
  z-index: 1;
}

.product_design_image_3 {
  position: absolute;
  width: min(25vw, 360px);
  bottom: -2%;
  left: 0%;
  z-index: 1;
}

.product_design_image_4 {
  position: absolute;
  width: min(25vw, 360px);
  bottom: -2%;
  right: 0%;
  z-index: 1;
}

フェードインの仕方のcss（これが肝）

/*=============== アイテムのふわっとアニメーションの設定 ===============*/

/* 共通 */
.fadein-sequence {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fadein-sequence.is-visible {
  opacity: 1;
  transform: none;
}

/* 下から */
.fadein-up {
  transform: translateY(40px);
}
.fadein-up.is-visible {
  transform: translateY(0);
}

/* 上から */
.fadein-down {
  transform: translateY(-40px);
}
.fadein-down.is-visible {
  transform: translateY(0);
}

/* 左から */
.fadein-right {
  transform: translateX(-40px);
}
.fadein-right.is-visible {
  transform: translateX(0);
}

/* 右から */
.fadein-left {
  transform: translateX(40px);
}
.fadein-left.is-visible {
  transform: translateX(0);
}

/*=============== アイテムのふわっとアニメーションの設定の終了 ===============*/


JSを使ってJSコード作成


STEP3　JSコード


document.addEventListener("DOMContentLoaded", function () {
  // 複数グループに対応
  const groupClassNames = [
    "product_design_image_group",
    "ft_nav ul",
    // 追加したいグループのクラス名をここに
  ];
  groupClassNames.forEach((className) => {
    const group = document.querySelector(`.${className}`);
    if (group) {
      const figures = group.querySelectorAll(".fadein-sequence");
      const groupObserver = new IntersectionObserver(
        (entries, obs) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              figures.forEach((fig, i) => {
                setTimeout(() => {
                  fig.classList.add("is-visible");
                }, i * 400); // 0.4秒ずつ遅延
              });
              obs.unobserve(entry.target);
            }
          });
        },
        { threshold: 0.2 }
      );
      groupObserver.observe(group);
    }
  });
});

上記のjsコードで、フェードアップしたいクラスの親を追加して、エフェクト効果を加えたい要素にfadein-sequenceとやりたいエフェクト効果を選ぶ。（fadein-upなど）


コチラのサイトはコチラから