Search code examples
jqueryhtmlcssfadefullpage.js

HTML-CSS: Strange fade in at load

I have a live preview here on my hosting. This demo is actually just a full page slider but when I add these lines of code, which makes it turn into a more like fade page 'slider'. I get all the other text quickly faded out on load which is annoying any work around?

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

  • Sounds like you need to give the transition to the content too.

    So if you just have an h1.

    Something like this:

    .fp-section h1 {
  transition: all .7s ease-in-out;
  opacity: 0;
}
.fp-section.active h1 {
  opacity: 1;
}