Preloader Fade-Out und Inhalt verblassen

Ich bin sicher, das ist einfach zu beheben. Ich brauche, dass mein Preloader langsam ausgeblendet wird. Ich habe versucht mit CSS-Animation, aber hat nicht funktioniert. Kann mir jemand sagen, wie soll ich das in Javascript machen? Wie Sie im Beispiel sehen können, ist der Übergang sehr grob. Ich will das nicht.Preloader Fade-Out und Inhalt verblassen

<script> <!--Preloader--> 
var myVar; 

function preloader() { 
    myVar = setTimeout(showPage, 1500); 
} 

function showPage() { 
    document.getElementById("preloader").style.display = "none"; 
    document.getElementById("wrapper").style.display = "block"; 
} 
</script>

CODEPEN EXAMPLE

Quelle

2016-06-29 pHenomen

Add Änderungen in Ihren Codes folgen.

#preloader { 
    transition:1s ease; 
} 

#wrapper { 
    opacity:0;/*Remove display and hide opacity*/ 
} 

function showPage() { 
    document.getElementById("preloader").style.opacity = 0; 
    document.getElementById("wrapper").style.opacity = 1; 
}

Quelle

2016-06-29 11:08:01 frnt

Übergang doent Arbeit mit Anzeigeblock und keine ..

Verwendung

var myVar; 

function preloader() { 
    myVar = setTimeout(showPage, 1500); 
} 

function showPage() { 
    document.getElementById("preloader").style.opacity = 0; 
    document.getElementById("wrapper").style.opacity = 1; 
}

und

#preloader { 
    position: absolute; 
    z-index: 1000; 
    background-color:black; 
    width: 100vw; 
    height: 100vh; 
    color:white; 
    transition: 0.5s all linear 
}

Quelle

2016-06-29 10:56:43

Sie können nicht animieren displa y: none selbst, was Sie tun können ist die Opazität zu animieren: 0 zum Beispiel.

Sie werden Anzeige hinzufügen: Block, während Opazität noch 0. Danach fügen Opazität: 1 und animieren, dass

Quelle

2016-06-29 10:57:06

dieses Beispiel können Sie hilft.

$(function() { 
 
    $("#loader-image").fadeIn(500, function() { 
 
    $("#loader-image").fadeOut(1000, function() { 
 
     $(".loader-container").fadeOut(1000, function() { 
 
     alert("loaded!"); 
 
     }); 
 
    }); 
 
    }); 
 
});

body { 
 
    background-color: black; 
 
} 
 
.loader-container { 
 
    background-color: yellow; 
 
    height: 200px; 
 
} 
 
#loader-image { 
 
    display: none; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="loader-container"> 
 
    <img src="image.png" alt="Image" id="loader-image" /> 
 
    </div> 
 
</body>

Quelle

2016-06-29 10:58:31

Sie können einen CSS-Übergang verwenden. Ändern Ihre preloader Stile:

#preloader { 
    position: absolute; 
    z-index: 1000; 
    background-color:black; 
    width: 100vw; 
    height: 100vh; 
    color:white; 
    display: block; 
    opacity: 1; // Add opacity 
    transition: 1s opacity ease-in; // Add transition 
}

hinzufügen Stile für die versteckte Klasse:

#preloader.hidden { 
    opacity: 0; 
}

Dann, wenn Sie showPage() rufen

function showPage() { 
     // Add the newly defined hidden class to the preloader element 
     document.getElementById("preloader").classList.add('hidden'); 
}

Here ist ein funktionierendes Beispiel.

Quelle

2016-06-29 11:15:45

Preloader Fade-Out und Inhalt verblassen

Antwort

Verwandte Themen