Fade transition in fullpage.js

穿精又带淫゛_ 提交于 2020-01-07 08:32:30

问题


I want to use fullpage for makeing pesonal site.How can i replace fade transition instead of slide effect for changing between to section?

Fullpage.js demo: http://alvarotrigo.com/fullPage


回答1:


you have to override the fullpage transitions with below css, Let me know if works

.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;
}

Update To add a callback to your css transition you have to bind an event to parent section like

$("yourSection").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
function(e) {

// code to execute after transition ends

});


来源:https://stackoverflow.com/questions/38002576/fade-transition-in-fullpage-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!