时间戳

首页 > 解决方案 > 滚动显示 - ScrollMagic

javascript - 滚动显示 - ScrollMagic

问题描述

我有一个技能图表，可以在文档加载时填写。我希望使用 ScrollMagic 以便在图表滚动到时填充图表。

我在 setClassToggle 函数调用中尝试了许多不同的类和伪类组合，只是想知道这是否可能。

<div id="trigger2"></div>
<div class="wrapper">
 <h4>Singing</h4>
 <div class="line line1" id="line1">60%</div>
 <h4>Dancing</h4>
 <div class="line line2" id="line2">55%</div>
 <h4>Coding</h4>
 <div class="line line3" id="line3">20%</div>
</div>

.wrapper h4 {
  color: #00adb5;
  font-size: 22px;
  font-style: italic;
  font-weight: bold;
}

.line {
  color: #222831;
  font-size: 18px;
  height: 18px;
  line-height: 18px;
  margin: 0 auto 18px;
  padding: 0 0 0 18px;
  position: relative;
}

.line:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  height: 18px;
  top: 0;
  z-index: 0;
  background: #222831;
}

.line:after {
  content: "";
  background: #d2d6d7;
  height: 18px;
  transition: 0.8s;
  display: block;
  width: 100%;
  animation: animate 1 5s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.line1:after {
  max-width: 60%;
}

.line2:after {
  max-width: 55%;
}

.line3:after {
  max-width: 20%;
}

var controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
  triggerElement: "#trigger2",
  reverse: false, // only do once
})
  .setClassToggle("#line1", ":after")
  .addIndicators()
  .addTo(controller);

任何建议都会非常感谢。

标签： javascripthtmljquerycss

解决方案

我想这就是你要找的。这是通过 vanilla JS 和 IntersectionObserver 完成的。如果您需要更多帮助，请告诉我！:)

document.addEventListener("DOMContentLoaded", function () {
    var elements = document.querySelectorAll(".line");

    // Intersection observer
    var observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.intersectionRatio > 0) {
                entry.target.classList.add("animate");
            } else {
                entry.target.classList.remove("animate");
            }
        });
    });

    elements.forEach((el) => {
        observer.observe(el);
    });
});
#trigger2 {
  min-height: 110vh;
}

.wrapper h4 {
  color: #00adb5;
  font-size: 22px;
  font-style: italic;
  font-weight: bold;
}

.line {
  color: #222831;
  font-size: 18px;
  height: 18px;
  line-height: 18px;
  margin: 0 auto 18px;
  padding: 0 0 0 18px;
  position: relative;
}

.line:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  height: 18px;
  top: 0;
  z-index: 0;
  background: #222831;
}

.line:after {
  content: "";
  background: #d2d6d7;
  height: 18px;
  transition: 0.8s;
  display: block;
  width: 100%;
  animation: animate 1 5s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.line1:after {
  max-width: 60%;
}

.line2:after {
  max-width: 55%;
}

.line3:after {
  max-width: 20%;
}

.line.animate:after {
  animation: animatedBar 2s ease-in-out;
}

@keyframes animatedBar {
  0% 
  {
    width: 0%;
  }
  100%
  {
    width: 100%;
  }
}
<div id="trigger2"></div>
<div class="wrapper">
 <h4>Singing</h4>
 <div class="line line1" id="line1">60%</div>
 <h4>Dancing</h4>
 <div class="line line2" id="line2">55%</div>
 <h4>Coding</h4>
 <div class="line line3" id="line3">20%</div>
</div>

推荐阅读