0

我正在使用fullview.js插件和AOS来制作动画。当我的屏幕出现在视口上时，我必须为文本设置动画。我尝试了下面的代码，动画只在第一部分工作，但是当我滚动动画时，不能与其他部分一起工作

你能帮我解决这个问题吗？

AOS.init();
$(document).ready(function() {

  $("#fullview").fullView({
    //Navigation
    navbar: "#navbar",
    dots: true,
    dotsPosition: 'right',

    //Scrolling
    easing: 'swing',
    // backToTop: true,

    // Accessibility
    keyboardScrolling: true,

    // Callback
    onViewChange: function(currentView) {
      // console.log(currentView)
    }
  })

});
#fullview>div {
  background-color: azure;
  padding: 200px 0;
  /* opacity: 0;
            transition: 0.2s ease-in all; */
}

#fullview>div.active {
  /* opacity: 1; */
}

#fullview>div:nth-child(even) {
  background-color: #282c34;
  color: #ffffff;
}

#fullview h2 {
  margin: auto;
  width: 50%;
  text-align: center;
}

#fullview p {
  text-align: center;
  margin-top: 15px;
}

#navbar {
  position: fixed;
  width: 100%;
  padding: 20px;
}

#navbar ul {
  list-style: none;
  text-align: center;
}

#navbar li {
  display: inline-block;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid gray;
  border-radius: 5px;
}

#navbar li a {
  text-decoration: none;
  color: black;
}
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/full-view-scroll/fullview.css?v3">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<div id="navbar">
  <ul>
    <li><a href="#section1">
                    Section 1
                </a>
    </li>
    <li><a href="#section2">
                    Section 2
                </a>
    </li>
    <li><a href="#section3">
                    Section 3
                </a>
    </li>
    <li><a href="#section4">
                    Section 4
                </a>
    </li>
  </ul>
</div>

<div id="fullview">
  <div id="section1">
    <div data-aos="fade-up">
      <h2>jQuery FullView.Js Example</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
  <div id="section2">
    <div data-aos="fade-up">
      <h2>jQueryScript</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
  <div id="section3">
    <div data-aos="fade-up">
      <h2>Section 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
  <div id="section4">
    <div data-aos="fade-up">
      <h2>Section 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/full-view-scroll/fullview.js?v3"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

4

1 回答 1

0

在文档准备好后尝试 init() AOS：

$(document).ready(function() {
   
   AOS.init();
   
   $("#fullview").fullView({
     //Navigation
     navbar: "#navbar",
     dots: true,
     dotsPosition: 'right',
     //Scrolling
     easing: 'swing',
     // backToTop: true,
     // Accessibility
     keyboardScrolling: true,
     // Callback
     onViewChange: function(currentView) {
        // console.log(currentView)
     }
   })

});
于 2021-07-25T06:04:12.630 回答