Fade transition in fullpage.js

Question

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

Duplicate of: http://stackoverflow.com/questions/34842862/fullpage-js-add-slider-fadein-effect. — Dresden, Jun 23 '16 at 22:05
This is possible now with the fullpage.js [fading extension](http://alvarotrigo.com/fullPage/extensions/fadingEffect.html) — Alvaro, Sep 02 '16 at 17:18

M.Tanzil · Accepted Answer · 2016-06-24T18:14:28.270

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

});

edited Jun 24 '16 at 18:14

answered Jun 23 '16 at 22:10

M.Tanzil

1,987
1
12
28

Interesting approach :) – Alvaro Jun 24 '16 at 10:35
Mark answer as yes, Thanks :) – M.Tanzil Jun 24 '16 at 13:37
I was not the one who asked :D – Alvaro Jun 24 '16 at 13:41
1

@M.Tanzil It works, thanks. I need this transition start in JS callback (after all animations in section done) have any solution? – MEHRYĀR.S Jun 24 '16 at 14:03
Yeah! you can also do that, for that i will update my answer. :) – M.Tanzil Jun 24 '16 at 18:11

Fade transition in fullpage.js

1 Answers1

Linked