画面に入ると横に伸びるスキルバーをJavaScriptで実装する方法【ポートフォリオに最適】

<div class="skill" data-proficiency="100"><!-- スキル全体を囲う要素。熟練度を0~100の間で記入 -->

  <div class="skill-info">
    <p class="skill-name">HTML</p><!-- 名前 -->

    <p class="skill-percentage">
      <span class="countup"></span>%<!-- 熟練度の数値をJSで動的に表示 -->
    </p>
  </div>

  <div class="skill-bar-container"><!-- スキルバーの親要素 -->
    <div class="skill-bar"></div><!-- スキルバー本体 -->
  </div>

</div>

/* スキル全体を囲うdiv */
.skill {
  margin: 30px 0; /* 上下のマージンを指定 */
}

/* スキルの情報 */
.skill-info {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* スキルの熟練度（パーセンテージ） */
.skill-percentage {
  opacity: 0; /* 初期状態では透明に */
  transition: opacity 0.6s;
}

/* スキルバーの親要素 */
.skill-bar-container {
  position: relative;
  width: 100%;
  height: 15px; /* スキルバーの高さ */
  background-color: #f3f3f3; /* スキルバーの背景色 */
  overflow: hidden;
}

/* スキルバー本体 */
.skill-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0; /* 初期状態では0 */
  background-color: #34e8d7; /* スキルバーの色 */
  transition: width 3s cubic-bezier(0.22, 1, 0.36, 1); /* スキルバーが伸びる速度を調整 */
}

  <script src="path/intersection-observer.js"></script><!-- polyfillを読み込む -->
  <script src="path/main.js"></script><!-- この中に実際のコードを書く -->
</body>
</html>

window.addEventListener('DOMContentLoaded', () => {

  // DOM要素を取得
  const skillEls = document.querySelectorAll('.skill');

  // カウントアップの設定
  const animationDuration = 2000;
  const frameDuration = 1000 / 60;
  const totalFrames = Math.round(animationDuration / frameDuration);
  const easeOut = t => t * (2 - t);
  const animateCountUp = el => {
    let frame = 0;
    const countTo = parseInt(el.innerHTML, 10);
    const counter = setInterval( () => {
      frame++;
      const progress = easeOut(frame / totalFrames);
      const currentCount = Math.round(countTo * progress);

      if (parseInt(el.innerHTML, 10) !== currentCount) {
        el.innerHTML = currentCount;
      }

      if (frame === totalFrames) {
        clearInterval(counter);
      }
    }, frameDuration);
  };

  // Intersection observerに渡すコールバック関数
  const cb = function(entries, observer) {
    entries.forEach((entry) => {
      if(entry.isIntersecting) {
        const proficiencyVal = entry.target.dataset.proficiency;
        const skillBar = entry.target.querySelector('.skill-bar');
        const percentage = entry.target.querySelector('.skill-percentage');
        const countup = entry.target.querySelector('.countup');

        skillBar.style.width = proficiencyVal + '%';
        percentage.style.opacity = 1;
        countup.textContent = proficiencyVal;
        animateCountUp(countup);

        observer.unobserve(entry.target);
      }
    });
  };

  // Intersection observerに渡すオプション
  const options = {
    rootMargin: "-50px 0px"
  };

  // IntersectionObserver初期化
  const io = new IntersectionObserver(cb, options);
  io.POLL_INTERVAL = 100; // Polyfillの設定
  skillEls.forEach(el => {
    io.observe(el);
  });

});

const skillEls = document.querySelectorAll('.skill');

const cb = function(entries, observer) {
  entries.forEach((entry) => {
    if(entry.isIntersecting) {
      const proficiencyVal = entry.target.dataset.proficiency;
      const skillBar = entry.target.querySelector('.skill-bar');
      const percentage = entry.target.querySelector('.skill-percentage');
      const countup = entry.target.querySelector('.countup');

      skillBar.style.width = proficiencyVal + '%';
      percentage.style.opacity = 1;
      countup.textContent = proficiencyVal;
      animateCountUp(countup);

      observer.unobserve(entry.target);
    }
  });
};

const proficiencyVal = entry.target.dataset.proficiency;

<div class="skill" data-proficiency="100">
<!-- 中身は省略 -->
</div>

const skillBar = entry.target.querySelector('.skill-bar');
const percentage = entry.target.querySelector('.skill-percentage');
const countup = entry.target.querySelector('.countup');

skillBar.style.width = proficiencyVal + '%';
percentage.style.opacity = 1;
countup.textContent = proficiencyVal;
animateCountUp(countup);

countup.textContent = proficiencyVal;
animateCountUp(countup);

observer.unobserve(entry.target);

const options = {
  rootMargin: "-50px 0px"
};

rootMargin: "-50px 0px"
rootMargin: "-50px 0px -50px 0px"

const io = new IntersectionObserver(cb, options);
io.POLL_INTERVAL = 100; // Polyfillの設定
skillEls.forEach(el => {
  io.observe(el);
});