我正在使用fullpage.js它的超级基本功能:让我的网站上的每个部分都是视口的全高,并在从一个部分滚动到一个部分时锁定滚动。
而不是从第1部分滑动到第2部分,我想通过使第1部分的背景更大并将其淡化来为第1部分的背景设置动画,然后淡入第2部分。基本上,这将是此幻灯片的自定义转换。
该插件有一个事件实例OnLeave,允许在用户滚过某个幻灯片时执行某些操作:
onLeave: function(index, nextIndex, direction){ var leavingSection = $(this); //after leaving section 2 if(index == 1 && direction =='down'){ $('.section1').animate({ backgroundSize: '150%' }, 1000); do another css animation } else if(index == 1 && direction == 'up'){ alert("Going to section 1!"); } }虽然事件很有效,但我不知道如何添加延迟,因此动画可以在页面滚动到下一部分之前完成。 另外,如前所述,我想淡出到下一部分而不是向下滑动(如果这是可能的话)。
非常感谢任何指导。
I'm using fullpage.js for it's super basic functions: make each section on my site full height of viewport and to lock the scroll when scrolling from section to section.
Instead of sliding from section 1 to section 2, I want to animate the background of section 1 by making it larger and fading it out, then fading into section 2. Basically, this would be a custom transition for this slide.
The plugin has an event instance OnLeave which allows to execute something when user scrolls past a certain slide:
onLeave: function(index, nextIndex, direction){ var leavingSection = $(this); //after leaving section 2 if(index == 1 && direction =='down'){ $('.section1').animate({ backgroundSize: '150%' }, 1000); do another css animation } else if(index == 1 && direction == 'up'){ alert("Going to section 1!"); } }Although the event works great, I don't know how to add a delay so the animation can finish before the page scrolls to next section. Also, as mentioned before, I would like to fade to the next section rather than slide down (if that's a possibility).
Any guidance is greatly appreciated.
最满意答案
更新
看看这个主题 。 您可以在回调中使用取消移动功能来阻止scoll并执行您自己的操作。
或者,您也可以使用$.fn.fullpage.setAllowScrolling(false)来阻止fullPage.js滚动,然后使用您自己的mousewheel或touch处理程序,您可以创建可以触发自己的操作。
请查看在fullPage.js问题论坛上处理的相关主题 。
我想说目前还没有正确的办法。
Update
Take a look at this topic. You can use the cancel move feature in a callback to prevent the scoll and do your own actions.
Or, you can also use $.fn.fullpage.setAllowScrolling(false) to prevent fullPage.js to scroll and then using your own mousewheel or touch handlers you can create you can trigger your own actions.
Please take a look at this related topic treated on fullPage.js issues forum.
I would say there's no proper way to do it at the moment.
更多推荐
发布评论