fullpage.js添加滑块淡入效果 [英] fullpage.js add slider fadeIn effect
问题描述
我从未使用过fullpage.js。我尝试了很多滑块过渡效果。使用滑块效果滚动很好。它通过滚动从左向右移动但无法添加fadeIn和fadeOut效果。
I never worked with fullpage.js. I tried a lot with the slider transition effect. scrolling is fine with slider effect. its move to left to right with scrolling but can't add the fadeIn and fadeOut effect.
示例网站： 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 < 3) {
sliding = true;
$.fn.fullpage.moveSlideRight();
slideIndex++;
return false;
} else if(direction == 'up' && slideIndex > 1) {
sliding = true;
$.fn.fullpage.moveSlideLeft();
slideIndex--;
return false;
}
} else if(sliding) {
return false;
}
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
sliding = false;
}
});
});
推荐答案
这些页面讨论添加淡入淡出效果：
These pages talk about adding the fade effect:
- Using fade-in effect with fullpage.js slides
- How to fade in content on page scroll on a website that uses fullPage.js with CSS and jQuery
这似乎主要是使用整页的问题。 js幻灯片事件触发jQuery动画。
It appears to be mainly a matter using the fullpage.js slide events to trigger jQuery animations.
这个jsfiddle 似乎做你想要的（使用部分）。
This jsfiddle seems to do what you want (using sections).
看起来有两种方法可以做到这一点事情，这取决于你想要动画的东西。 fullpage.js内置了两种视图， .section 和 .slide ，幻灯片是节的子节点，他们有不同的回调。这些例子使用幻灯片，但你正在使用部分，所以我认为这就是混乱的来源。转换为淡入淡出效果需要挂钩到正确的回调并应用正确的动画（部分和幻灯片之间不同）。
It looks like there's two ways to do this kind of thing and it depends on what you're trying to animate. fullpage.js has two kinds of views built into it, .section and .slide, with slides being children of sections, and they have different callbacks. The examples use slides but you're using sections so I think that's where the confusion is coming in. Converting to a fade effect requires hooking into the right callbacks and applying the correct animations (which are different between sections and slides).
这篇关于fullpage.js添加滑块淡入效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
