Preloader fade out and content fade in
Question
I'm sure this is easy fix. I need that my preloader fade out slowly. I tried with css animation but didn't work. Can somebody tell me how should i do that in javascript ? As you can see in example, the transition is very rough. I don't want that.
<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>
5 answers
solution1
2 ACCPTED 2016-06-29 11:08:01
Add following changes into your codes.
#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;
}
solution2
1 2016-06-29 10:56:43
transition doent work with display block and none..
use
var myVar;
function preloader() {
myVar = setTimeout(showPage, 1500);
}
function showPage() {
document.getElementById("preloader").style.opacity = 0;
document.getElementById("wrapper").style.opacity = 1;
}
and
#preloader {
position: absolute;
z-index: 1000;
background-color:black;
width: 100vw;
height: 100vh;
color:white;
transition: 0.5s all linear
}
solution3
1 2016-06-29 10:57:06
You can't animate display: none itself, what you can do is animate opacity: 0 for example.
You'll add display: block, while opacity is still 0. After that add opacity: 1 and animate that
solution4
1 2016-06-29 10:58:31
Try this example may helps you.
$(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>
solution5
1 2016-06-29 11:15:45
You can use a CSS transition. Change your preloader styles to:
#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
}
Add styles for the hidden class:
#preloader.hidden {
opacity: 0;
}
Then when you call showPage()
function showPage() {
// Add the newly defined hidden class to the preloader element
document.getElementById("preloader").classList.add('hidden');
}
Here is a working example.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.