当部分出现在屏幕上时,AOS 动画不起作用
Posted
技术标签:
【中文标题】当部分出现在屏幕上时,AOS 动画不起作用【英文标题】:AOS animation not working when section comes on screen 【发布时间】:2021-03-16 05:35:30 【问题描述】:我正在使用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>
【问题讨论】:
【参考方案1】:在文档准备好后尝试 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)
)
);
【讨论】:
以上是关于当部分出现在屏幕上时,AOS 动画不起作用的主要内容,如果未能解决你的问题,请参考以下文章