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

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

動きを実現する仕組み

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


STEP1　HTMLコード


<section class="product_design_section">
        <div class="product_design_inner">
          <h2 class="section_title_design fadein-effect fadein-right">
            <span>PRODUCT</span>商品ラインアップ
          </h2>
          <p class="tl_sub fadein-effect fadein-up">
            北海道十勝の自然の恵みをより身近に感じられる商品を販売しています。
          </p>
          <ul class="product_design_items">
            <li class="product_design_item fadein-effect fadein-up">
              <a href="#">
                <img src="images/pr.png" alt="製品画像" />
                <div class="product_design_item_title_wrapper">
                  <h3 class="product_design_item_title">製品名が入ります</h3>
                  <p class="product_design_item_text">
                    ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
                  </p>
                  <div class="product_design_item_more">
                    <span class="c_btn">詳しく見る</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="product_design_item fadein-effect fadein-up">
              <a href="#">
                <img src="images/pr.png" alt="製品画像" />
                <div class="product_design_item_title_wrapper">
                  <h3 class="product_design_item_title">製品名が入ります</h3>
                  <p class="product_design_item_text">
                    ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
                  </p>
                  <div class="product_design_item_more">
                    <span class="c_btn">詳しく見る</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="product_design_item fadein-effect fadein-up">
              <a href="#">
                <img src="images/pr.png" alt="製品画像" />
                <div class="product_design_item_title_wrapper">
                  <h3 class="product_design_item_title">製品名が入ります</h3>
                  <p class="product_design_item_text">
                    ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
                  </p>
                  <div class="product_design_item_more">
                    <span class="c_btn">詳しく見る</span>
                  </div>
                </div>
              </a>
            </li>
          </ul>
          <div class="btn_more fadein-effect fadein-up">
            <a href="#">商品ラインアップ一覧</a>
          </div>
        </div>
        <div class="product_design_image_group">
          <figure class="product_design_image_1 fadein-effect 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-effect 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-effect 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-effect 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>
      </section>

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-effect {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fadein-effect.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 () {
  // 複数グループ内の.fadein-effectのみを対象
  const groupClassNames = [
    "product_design_inner",
    "product_design_items",
    "btn_more",
    "recomend_product_inner",
    // 追加したいグループのクラス名をここに
  ];
  let groupFigures = [];
  groupClassNames.forEach((className) => {
    const group = document.querySelector(`.${className}`);
    if (group) {
      groupFigures = groupFigures.concat(
        Array.from(group.querySelectorAll(".fadein-effect"))
      );
    }
  });

  const observer = new IntersectionObserver(
    (entries, obs) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          obs.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.2 }
  );
  groupFigures.forEach((item) => observer.observe(item));
});

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


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