fullpage.js 第一个加载部分 css 动画并获取当前索引
fullpage.js first load section css animate and get current index
标题可能不清楚,抱歉:(
这是代码 link
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'red'],
anchors:['firstSlide', 'secondSlide'],
scrollBar: true,
afterLoad: function(anchorLink, index){
$(this).find('.animated').each(function() { // i want to know in here, $(this) mean active section? am i wrong?
$(this).addClass('in'); // add in class to active section > animated item
});
$('.section:not(".active")').find('.animated').each(function() {
$(this).removeClass('in');
}); // each time scroll to section, remove in class at non-active section AFTER load (scroll)
},
afterRender: function(){
},
});
});
请查看 link 查看代码,谢谢,问题是在第一部分重新加载页面时,在 class 中没有添加,但在第二部分工作,如何解决这个问题? (在 link 可能看不到问题,因为每次 运行 代码都会返回到第一部分,我测试了不在 http://jsfiddle.net/ 中的代码,重新加载页面应该滚动到与 url#secondSlide 类似的东西...抱歉我不知道怎么说)
并且在afterRender部分,我想在每次重新加载页面时获取当前部分(索引),然后运行一个函数afterRender,我不知道如何获取当前索引但我尝试在 afterRender 函数中添加以下代码,事实上我真的不知道 afterRender 函数的含义...
请查看link
如果我在第二部分重新加载,第二部分 运行 afterLoad 函数和第一部分 运行 afterRender 函数当它没有 class .active 时,似乎我的代码失败了,也许不需要 randerAfter 功能? :(
我想每次重新加载页面时,当前(有.active class)部分将.in class添加到.animated,延迟1500一次,只有一次,然后每次滚动都使用afterLoad函数(立即添加 .in class),我正在考虑重新加载页面时的想法,运行 函数 add_in_class_with_delay 到当前,在 运行 之后取消绑定此函数一次,绑定 add_in_class_without_delay函数,我不知道怎么做。
有什么好方法吗?非常感谢:)
在你的情况下,你只是添加了一个 CSS class,我建议你使用 fullPage.js 添加到 [=] 的 class 11=] 元素来确定您在哪个部分/幻灯片中。
这样做:
body.fp-viewing-firstSlide .animated{
transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
visibility: visible;
opacity: 1;
}
.animated {
transform: rotate(122deg) ;
-webkit-transform: rotate(122deg) ;
opacity: 0;
-webkit-transition: all 1000ms ease;
transition: all 1000ms ease;
}
标题可能不清楚,抱歉:( 这是代码 link
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'red'],
anchors:['firstSlide', 'secondSlide'],
scrollBar: true,
afterLoad: function(anchorLink, index){
$(this).find('.animated').each(function() { // i want to know in here, $(this) mean active section? am i wrong?
$(this).addClass('in'); // add in class to active section > animated item
});
$('.section:not(".active")').find('.animated').each(function() {
$(this).removeClass('in');
}); // each time scroll to section, remove in class at non-active section AFTER load (scroll)
},
afterRender: function(){
},
});
});
请查看 link 查看代码,谢谢,问题是在第一部分重新加载页面时,在 class 中没有添加,但在第二部分工作,如何解决这个问题? (在 link 可能看不到问题,因为每次 运行 代码都会返回到第一部分,我测试了不在 http://jsfiddle.net/ 中的代码,重新加载页面应该滚动到与 url#secondSlide 类似的东西...抱歉我不知道怎么说)
并且在afterRender部分,我想在每次重新加载页面时获取当前部分(索引),然后运行一个函数afterRender,我不知道如何获取当前索引但我尝试在 afterRender 函数中添加以下代码,事实上我真的不知道 afterRender 函数的含义...
请查看link
如果我在第二部分重新加载,第二部分 运行 afterLoad 函数和第一部分 运行 afterRender 函数当它没有 class .active 时,似乎我的代码失败了,也许不需要 randerAfter 功能? :(
我想每次重新加载页面时,当前(有.active class)部分将.in class添加到.animated,延迟1500一次,只有一次,然后每次滚动都使用afterLoad函数(立即添加 .in class),我正在考虑重新加载页面时的想法,运行 函数 add_in_class_with_delay 到当前,在 运行 之后取消绑定此函数一次,绑定 add_in_class_without_delay函数,我不知道怎么做。
有什么好方法吗?非常感谢:)
在你的情况下,你只是添加了一个 CSS class,我建议你使用 fullPage.js 添加到 [=] 的 class 11=] 元素来确定您在哪个部分/幻灯片中。
这样做:
body.fp-viewing-firstSlide .animated{
transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
visibility: visible;
opacity: 1;
}
.animated {
transform: rotate(122deg) ;
-webkit-transform: rotate(122deg) ;
opacity: 0;
-webkit-transition: all 1000ms ease;
transition: all 1000ms ease;
}