Fullpage.js中的CSS3動畫
[英]CSS3 Animation within Fullpage.js
問題描述
我正在嘗試在滾動過渡/動畫上使用CSS3'動畫，以使用fullpage.js在某些容器中工作。
滾動動畫： http ： //www.cssscript.com/demo/animate-elements-scroll-aos/
Fullpage.js： http ：//alvarotrigo.com/fullPage/
我可以自己制作動畫，但是當使用fullpage.js時，添加'data-aos =“ fade-up'來確定要進行動畫處理的內容會為應用過渡的圖像留出空間，但不會顯示任何圖像；因此，就我所知，過渡仍然可能會發生，但是在這種情況下進行過渡意味着我看不到正在播放什么。
看下面的代碼，有人能說出是否有立即顯而易見的東西？
<link rel="stylesheet" href="css/aos.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script src="js/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-out-sine'
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
sectionsColor: [],
scrollOverflow: true
});
});
</script>
</head>
<body>
</head>
<body>
<div id="fullpage">
<div class="section " data-color="black">
<img class="shadow" width="50%" src="work/del-1.jpg" alt="Deloitte" data-
aos="fade-up"></img>
</div>
<div class="section" data-color="green">
<h2>Green panel</h2>
</div>
<div class="section" data-color="blue"><h2>Blue panel</h2></div>
<div class="section" data-color="grey"><img class="shadow" width="70%"
src="work/aus-cc1.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="grey"><img class="shadow" width="70%"
src="work/aus-cc2.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="grey"><img class="shadow" width="70%"
src="work/aus-help1.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="grey"><img class="shadow" width="70%"
src="work/aus-help2.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="yellow">
<h2>Yellow panel</h2>
</div>
<div class="section" data-color="orange">
<h2>Orange panel</h2>
</div>
</div>
</body>
2 個解決方案
解決方案1
1 2017-05-10 13:14:51
我認為您需要繞過這個問題的方法是，在具有您指定的類似惰性負載的插件的特定部分上使用fp-normal-scroll類。 但是，此版本尚未公開發布，可能會引起一些問題（但我本人尚未遇到此問題）。
這就是您將能夠滾動並查看動畫和不動畫的方式。
然后，您將需要在自己的init中添加hybrid: true選項，如下所示：
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
sectionsColor: [],
scrollOverflow: true,
hybrid: true
});
});
這是此方法的演示 。
解決方案2
1 已采納 2017-05-10 17:12:35
使用fullpage.js重置CSS動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.