fullpage.js添加滑块淡入效果
我从未使用过fullpage.js。 我尝试了很多滑块过渡效果。 使用滑块效果滚动很好。 它通过滚动从左向右移动但无法添加fadeIn和fadeOut效果。
示例网站： http ： //www.mi.com/shouhuan/#clock我的代码： http ： //jewel-mahmud.com/demo-site/index.html
var slideIndex = 1, sliding = false; $(document).ready(function() { $('#fullpage').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], scrollingSpeed:1000, css3: true, onLeave: function(index, nextIndex, direction) { if(index == 2 && !sliding) { if(direction == 'down' && slideIndex 1) { sliding = true; $.fn.fullpage.moveSlideLeft(); slideIndex--; return false; } } else if(sliding) { return false; } }, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { sliding = false; } }); }); 这些页面讨论了添加淡入淡出效果：
- 使用fullpage.js幻灯片的淡入效果
- 如何在使用带有CSS和jQuery的fullPage.js的网站上滚动内容
似乎主要是使用fullpage.js幻灯片事件来触发jQuery动画。
这个jsfiddle似乎做你想要的（使用部分）。
看起来有两种方法可以做这种事情，这取决于你想要制作动画的内容。 fullpage.js内置了两种视图， .section和.slide ，幻灯片是节的子.slide ，它们有不同的回调。 这些例子使用幻灯片，但你正在使用部分，所以我认为这就是混乱的来源。转换为淡入淡出效果需要挂钩到正确的回调并应用正确的动画（部分和幻灯片之间不同）。
我正在使用一些简单而有效的东西。
onLeave: function(index, nextIndex, direction) { if( index == 2 && direction == 'down'){ $('#slide1').fadeOut(700); $('#slide2').fadeIn(700); } if( index == 3 && direction == 'down'){ $('#slide2').fadeOut(700); $('#slide3').fadeIn(700); } }, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { sliding = false; },
但问题是我滑动时无法修复滚动。 我试过先生。 但我无法调整。
取自这个答案 。 虽然远非完美，因为fullpage.js中定义的滚动速度在此处不会生效，您必须在CSS中定义它。 此外，它仅适用于部分而非水平幻灯片。
只需添加以下CSS即可覆盖fullpage.js样式。
.section { text-align: center; } .fullpage-wrapper { width: 100%!important; transform: none!important; } .fp-section { width: 100%!important; position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; z-index: 0; transition: all .7s ease-in-out; } .fp-section.active { visibility: visible; opacity: 1; z-index: 1; }
更新
现在可以通过fullpage.js扩展来完成它。