javascript - 我的滚动显示对 java 脚本的影响不起作用如何修复它？

问题描述

我目前正在为我的投资组合网站工作，不知何故我的滚动显示动画突然不起作用，我只是编辑了一些东西然后我不知道发生了什么。

/*===== SCROLL REVEAL ANIMATION =====*/
const sr = ScrollReveal({
  origin: 'top',
  distance: '80px',
  duration: 2000,
  reset: true
});

/*SCROLL HOME*/
sr.reveal('.home__title', {});
sr.reveal('.button', {
  delay: 200
});
sr.reveal('.button1') {
delay: 300
});
sr.reveal('.button3') {
delay: 400
});
sr.reveal('.home__social-icon', {
  interval: 200
});

/*SCROLL ABOUT*/
sr.reveal('.about__img', {});
sr.reveal('.about__subtitle', {
  delay: 400
});
sr.reveal('.about__text', {
  delay: 400
});

/*SCROLL SKILLS*/
sr.reveal('.skills__subtitle', {});
sr.reveal('.skills__text', {});
sr.reveal('.skills__data', {
  interval: 200
});
sr.reveal('.skills__img', {
  delay: 600
});

/*SCROLL WORK*/
sr.reveal('.work__img', {
  interval: 200
});

/*SCROLL CONTACT*/
sr.reveal('.social__input', {
  interval: 200
});

<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>

<title>Portfolio</title>
<!--===== HEADER =====-->
<header class="l-header">
  <nav class="nav bd-grid">
    <div>
      <a href="#" class="nav__logo">Caleb</a>


    </div>

    <div class="nav__menu" id="nav-menu">
      <ul class="nav__list">
        <li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>
        <li class="nav__item"><a href="#about" class="nav__link">About</a></li>
        <li class="nav__item"><a href="#skills" class="nav__link">Grade</a></li>
        <li class="nav__item"><a href="#work" class="nav__link">Subjects</a></li>
        <li class="nav__item"><a href="#social" class="nav__link">Social</a></li>
      </ul>
    </div>

    <div class="nav__toggle" id="nav-toggle">
      <i class='bx bx-menu'></i>
    </div>
  </nav>
</header>

<main class="l-main">
  <!--===== HOME =====-->
  <section class="home bd-grid" id="home">
    <div class="home__data">
      <h1 style="text-align: center;" class="home__title"><br>Welcome,<br> <span class="home__title-color">10-Sapphire</span></h1>




      <a target="_blank" href="My Favorite Poems.docx" class="button">Online Regulations
                        <p id="settings-note">*Download here</p></a>


      <a target="_blank" href="My Favorite Poems.docx" class="button1">Online Regulations
                        <p id="settings-note">*Download here</p></a>

      <a target="_blank" href="My Favorite Poems.docx" class="button3">Online Regulations
                        <p id="settings-note">*Download here</p></a>

    </div>


    <div class="home__social">
      <a style="position:absolute; left: 19%;" target="_blank" href="https://www.facebook.com/groups/747714555769692/" class="home__social-icon"><i class='bx bxl-facebook'></i></a>
      <a style="position:absolute; left: 48%;" target="_blank" href="https://classroom.google.com/u/2/c/MTE2NTUyMzQxMDIz" class="home__social-icon"><i class='bx bxl-google' ></i></a>
      <a style="position:absolute; right: 14%;" target="_blank" href="https://twitter.com/olivarezxc?s=09" class="home__social-icon"><i class='bx bxl-twitter' ></i></a>

    </div>

  </section>

  <!--===== ABOUT =====-->
  <section class="about section " id="about">
    <h2 class="section-title">About</h2>

    <div class="about__container bd-grid">
      <div class="about__img">
        <img src="assets/img/me.jpg" alt="">
      </div>

      <div>
        <h2 class="about__subtitle">I'am Caleb</h2>
        <p class="about__text"> (you want to say)</p>
      </div>
    </div>
  </section>

  <!--===== SKILLS =====-->
  <section class="skills section" id="skills">
    <h2 class="section-title">Grades</h2>

    <div class="skills__container bd-grid">
      <div>
        <h2 class="skills__subtitle">Grading System</h2>
        <p class="skills__text">This is the percentage of your incoming grades.</p>
        <div class="skills__data">
          <div class="skills__names">
            <i class='bx bxl-html5 skills__icon'></i>
            <span class="skills__name">ATTENDANCE</span>
          </div>
          <div class="skills__bar skills__attendance">

          </div>
          <div>
            <span class="skills__percentage">30%</span>
          </div>
        </div>
        <div class="skills__data">
          <div class="skills__names">
            <i class='bx bxl-css3 skills__icon'></i>
            <span class="skills__name">QUIZ</span>
          </div>
          <div class="skills__bar skills__quiz">

          </div>
          <div>
            <span class="skills__percentage">20%</span>
          </div>
        </div>
        <div class="skills__data">
          <div class="skills__names">
            <i class='bx bxl-javascript skills__icon'></i>
            <span class="skills__name">MODULE</span>
          </div>
          <div class="skills__bar skills__module">

          </div>
          <div>
            <span class="skills__percentage">25%</span>
          </div>
        </div>
        <div class="skills__data">
          <div class="skills__names">
            <i class='bx bxs-paint skills__icon'></i>
            <span class="skills__part">PARTICIPATION</span>
          </div>
          <div class="skills__bar skills__total">

          </div>
          <div>
            <span class="skills__percentage">25%</span>
          </div>
        </div>
      </div>


      <div>
        <img src="assets/img/work3.jpg" alt="" class="skills__img">
      </div>






    </div>
  </section>

  <!--===== WORK =====-->
  <section class="work section" id="work">
    <h2 class="section-title">Subjects</h2>

    <div class="work__container bd-grid">
      <div class="work__img">
        <a href="inside.html"><img src="assets/img/work1.jpg"> </a>

      </div>
      <div class="work__img">
        <a href="inside.html"> <img src="assets/img/lab-dash.jpg"> </a>
      </div>
      <div class="work__img">
        <a href="inside.html"> <img src="assets/img/snake.png"></a>
      </div>
      <div class="work__img">
        <a href="inside.html"> <img src="assets/img/dash.jpg"></a>
      </div>
      <div class="work__img">
        <a href="inside.html"> <img src="assets/img/pdf-report.jpg"></a>
      </div>
      <div class="work__img">
        <a href="inside.html"> <img src="assets/img/sample-form.jpg"></a>
      </div>
    </div>
  </section>

</main>



<!--===== FOOTER =====-->
<footer class="footer">
  <p class="footer__title" id="social">Social</p>
  <div class="footer__social">
    <a href="#" class="footer__icon"><i class='bx bxl-facebook' ></i></a>
    <a href="#" class="footer__icon"><i class='bx bxl-google' ></i></a>
    <a href="#" class="footer__icon"><i class='bx bxl-twitter' ></i></a>



  </div>
  <p>&#169; 2020 copyright all right reserved</p>


</footer>

标签： javascripthtmlcss

javascript - 我的滚动显示对 java 脚本的影响不起作用如何修复它？

问题描述

解决方案

推荐阅读