gpt4 book ai didi

javascript - fullpage js 和 AOS - 不能一起工作

转载 作者:行者123 更新时间:2023-12-01 06:18:46 58 4
gpt4 key购买 nike

我正在使用fullpagejsAOS使一些 div 在滚动时从页面底部弹出(或者至少这是我想要实现的)。

不幸的是,它不起作用。

是的,我已阅读 FAQ全页的部分,是的,scrollbar 设置为 trueautoscroll 设置为 false

我的设置如下:

<div class="section" id="test">
<div class="slide">
<div class="section">
{someOtherContent}
<!-- div i want to animate is down below -->
<div data-aos="slide-up">test</div>
</div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>


$('#test').fullpage({

lazyLoading: false,
lockAnchors: true,

scrollingSpeed: 300,
fitToSection: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopHorizontal: false,
offsetSections: false,
resetSliders: false,
scrollOverflow: true,
scrollOverflowReset: true,
touchSensitivity: 0,
bigSectionsDestination: top,


keyboardScrolling: false,
animateAnchor: false,
recordHistory: true,


controlArrows: false,
verticalCentered: true,
responsiveWidth: 0,
responsiveHeight: 0,


sectionSelector: '.section',
slideSelector: '.slide',
scrollBar:true

//events
afterLoad: function (anchor, index( {
initArrowEventListener()
}

afterLoad 事件函数只是初始化我的菜单链接(基于幻灯片索引),唯一相关的部分是当我单击一个特定链接时初始化 AOS (因为我希望库仅适用于特定页面,而不适用于所有地方。

所以,我加载页面,点击导航到我想要的 slider 页面,调用该函数(控制台日志证明了这一点,以及AOS类应用于相关div),我可以看到滚动条,但是没什么,div 没有从底部弹出。

知道我在这里做错了什么吗?

曾经有this pen说明了同样的问题。点击“About”(初始化AOS的函数也被称为标题中的函数),滚动到底部,你会看到很多空白。如果您检查控制台,AOS 会在元素上初始化(应用其类),但元素永远不会向上滑动)

最佳答案

仅使用 AOS 的 css 部分,并将 aos-animate 连接到 fullpage.js 回调上。

手动添加 AOS 正文数据

<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">

添加 aos-init 类

$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });

使用 fullpage.js 回调切换 aos-animate 类

$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
$('.section [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
onSlideLeave: function(){
$('.slide [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
afterSlideLoad: function(){
$('.slide.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
},
afterLoad: function(){
$('.section.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
}});

示例 HTML

<div id="fullpage">
<div class="section" id="section0">
<div class="intro">
<div data-aos="fade-up">
<h1>fade me up!</h1>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<div data-aos="zoom-in">
<h1>zoom me in!</h1>
</div>
</div>
</div>
<div class="slide">
<div class="intro">
<div data-aos="flip-down">
<h1>flip me down!</h1>
</div>
</div>
</div>
</div>

关于javascript - fullpage js 和 AOS - 不能一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48474761/

58 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com