javascript - JavaScript 代码不在实时服务器或本地主机上运行

问题描述

我连续几天一直在寻找这个解决方案，但我找不到为什么 Javascript 不能在实时服务器扩展或本地文件主机上正确运行的答案。我使用 Visual Studio Code，我目前正在创建一个网页并尝试在其上添加 JavaScript 动画。然而，它已经到了我决定复制其他人的 JS 动画以查看它是否适合我的地步，但它仍然没有。对于这段代码，我确保控制台中没有任何错误，并且 JS 在 Visual Studio 代码上正常工作。两者都有效，但动画无效。这是我从https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript--cms-36671获取的简单 JS 动画的代码。

注意：即使将其输入到代码片段中，它似乎也可以运行，但它永远不会在实时服务器或本地主机上运行

const scrollElements = document.querySelectorAll(".js-scroll");

const elementInView = (el, dividend = 1) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop <=
    (window.innerHeight || document.documentElement.clientHeight) / dividend
  );
};

const elementOutofView = (el) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop > (window.innerHeight || document.documentElement.clientHeight)
  );
};

const displayScrollElement = (element) => {
  element.classList.add("scrolled");
};

const hideScrollElement = (element) => {
  element.classList.remove("scrolled");
};

const handleScrollAnimation = () => {
  scrollElements.forEach((el) => {
    if (elementInView(el, 1.25)) {
      displayScrollElement(el);
    } else if (elementOutofView(el)) {
      hideScrollElement(el)
    }
  })
}

window.addEventListener("scroll", () => { 
  handleScrollAnimation();
});

<style>
    @import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather+Sans:wght@300&display=swap");

/*General styling for structure*/
body {
  margin: 0;
  font-family: "Merriweather Sans", sans-serif;
}

.container {
  max-width: 1280px;
  width: 95%;
  margin: 0 auto;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Merriweather", serif;
  height: 100vh;
}

header h2 {
  font-weight: 400;
}

.scroll-container {
  height: 100vh;
  min-height: 450px;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.scroll-container:nth-of-type(1) {
  background-color: #bdd0c4;
}
.scroll-container:nth-of-type(2) {
  background-color: #f5d2d3;
}
.scroll-container:nth-of-type(3) {
  background-color: #9ab7d3;
}
.scroll-container:nth-of-type(4) {
  background-color: #dfccf1;
}

.scroll-container:nth-of-type(even) {
  flex-direction: row-reverse;
}

.scroll-element,
.scroll-caption {
  width: 50%;
}

.scroll-element {
  min-height: 300px;
  height: 100%;
  background-color: #eaeaea;
}

.scroll-caption {
  margin: 1rem;
}

footer {
  text-align: center;
  padding: 0.5rem 0;
  background-color: #faddad;
}

footer p {
  font-size: 0.75rem;
  margin: 0.25rem 0;
  color: #221133;
}

footer a {
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width: 650px) {
  .scroll-container,
  .scroll-container:nth-of-type(even) {
    flex-direction: column;
    align-content: inherit;
  }

  .scroll-element {
    height: 100%;
  }

  .scroll-element,
  .scroll-caption {
    width: 100%;
  }
}
/**Styling scrollable elements*/

.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}

.js-scroll.scrolled {
  opacity: 1;
}

.scrolled.fade-in {
  animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
  animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out both;
}



@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<head></head>
<body>
<header class="container">
    <h1>How to Animate on Scroll With Vanilla JavaScript</h1>
    <h2>Scroll to see the effects
      <p class="animate-arrow">&darr;
      </p>
    </h2>
</header>
  <section class="scroll-container">
    <div class="scroll-element js-scroll fade-in">
  
    </div>
    <div class="scroll-caption">
      This animation fades in.
    </div>
  </section>
  <section class="scroll-container">
    <div class="scroll-element js-scroll fade-in-bottom">
  
    </div>
    <div class="scroll-caption">
      This animation slides in to the top.
    </div>
  </section>
  <section class="scroll-container">
    <div class="scroll-element js-scroll slide-left">
  
    </div>
    <div class="scroll-caption">
      This animation slides in from the left.
    </div>
  </section>
  <section class="scroll-container">
    <div class="scroll-element js-scroll slide-right">
  
    </div>
    <div class="scroll-caption">
      This animation slides in from the right.
    </div>
  </section>
  <footer>
    <p>Animation styles from <a href="https://animista.net" target="_blank">animista.net</a></p>
    <p>
      Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> &#9829;</span>
    </p>
  </footer>
  </body>

标签： javascripthtmlcssvisual-studio

javascript - JavaScript 代码不在实时服务器或本地主机上运行

问题描述

解决方案

推荐阅读