CSS3 Fullpage.js 内的动画

Question

我正在尝试使用 fullpage.js.

使 CSS3 滚动 transition/animation 的动画在某些容器中工作

滚动动画： http://www.cssscript.com/demo/animate-elements-scroll-aos/

Fullpage.js: http://alvarotrigo.com/fullPage/

我可以让动画独立运行，但是当使用 fullpage.js 时，添加 'data-aos="fade-up' 以确定要制作动画的内容会为应用过渡的图像留下 space但没有图像显示；所以据我所知，过渡可能仍在发生，但在这种情况下拥有它意味着我看不到正在动画的内容哈哈。

看看下面的代码，有人能告诉我是否有什么是显而易见的吗？

<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>

Answer 1

我认为您需要绕过这个，就是在具有您指定的类似延迟加载插件的特定部分上使用 fp-normal-scroll class。 然而，这并没有公开发布，可能会引起一些问题（但我自己还没有运行进入其中）。

您可以通过这种方式滚动并查看动画内容和非动画内容。

然后，您需要将 hybrid: true 选项添加到您的初始化中：

$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
        sectionsColor: [],
        scrollOverflow: true,
        hybrid: true
    });
});

这里有一个demo这个方法。

Answer 2

您可以使用选项 scrollBar:true，这样您就可以保持自动滚动行为，但保持滚动条可见。检查 example online.

这样页面仍会触发 scroll 事件。

无论如何，我鼓励您使用 fullPage.js 回调来添加或删除类，这是更好的方法。

此外，检查 this video tutorial 使用由 fullpage.js 添加的状态类来创建 css3 动画。

CSS3 Fullpage.js 内的动画

CSS3 Animation within Fullpage.js

javascript

css

animation

fullpage.js