Webpage with a preload animation using JavaScript setTimeoutCSS Ticker AnimationMicrosoft logo animationShow...
SQL Server table with 4,000,000 rows is 40GB
I see your BIDMAS and raise you a BADMIS
How was Carlo's plan supposed to work?
Can board a plane to Cameroon without a Cameroonian visa?
Guitar beginner - What does this card show?
Why are some Mac apps not available on AppStore?
What are the advantages and disadvantages of Preprints.org compared with arXiv?
How would a village use its river that it shares with another village downstream?
What is this dollar sign ($) icon in my Menu Bar?
Are scroll bars dead in 2019?
Calculate time difference between two dates
Are there take-over requests from autopilots?
Creating a Master Image to roll out to 30 new Machines Licensing Issues
Should I use my toaster oven for slow roasting?
Two different colors in an Illustrator stroke / line
What happens when a caster loses concentration on a banished creature?
Are there any space probes or landers which regained communication after being lost?
My favorite color is blue what is your favorite color?
Is there a standard terminology for female equivalents of terms such as 'Kingdom' and if so, what are the most common terms?
Is English tonal for some words, like "permit"?
Is the space of Radon measures a Polish space or at least separable?
SCOTUS - Can Congress overrule Marbury v. Madison by statute?
Expected value until a success?
Why would thermal imaging be used to locate the Chandrayaan-2 lander?
Webpage with a preload animation using JavaScript setTimeout
CSS Ticker AnimationMicrosoft logo animationShow and hide posts using setTimeoutCSS animation via JavaScriptCoffee webpage with laggy animationRibbon animation code too repetitive“Star Field” Animation with JavaScript and Sass-CSS
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}
7
$begingroup$
I am working on a website with an animation that runs at the beginning before the content of the homepage becomes visible.
I've looked at some examples of preloaders and now use that code with some setTimeout to implement the desired effect.
The effect works the way it should but I think the code it's a bit messy. is there be a better way to write that?
It would be great if someone had a suggestion.
Here is the code and and a working HTML in which everything is bind together:
The javascript
setTimeout(function () {
function run() {
var wrp = document.getElementById("i-w");
var swp = document.getElementById("pink");
wrp.className += "loaded";
swp.classList.add('fd');}
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener(
'DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
var swp = document.getElementById("pink");
swp.classList.remove('fd');
}, 3000);
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>itr test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
background:yellow;
}
#i-w {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform .4s ease-in-out;
transition: transform .4s ease-in-out;
will-change: transform;
}
#i-w.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
}
#i-w .itr {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#i-w {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform .7s cubic-bezier(.96, 0, .07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform .1s cubic-bezier(.96, 0, .07, 1);
}
.hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.itr-hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: fd-i 1.3s .6s cubic-bezier(.86,0,.07,1) forwards, trlt-i 1.5s 1s cubic-bezier(.23, 1, .32, 1) forwards, trlt-o .5s 2.9s cubic-bezier(.23, 1, .32, 1) forwards, fd-o .4s 3s ease forwards;
}
@keyframes trlt-i {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes trlt-o {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes fd-i {
0% {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fd-o {
0% {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
</style>
<script>
setTimeout(function () {
function run() {
var wrp = document.getElementById("i-w");
var swp = document.getElementById("pink");
wrp.className += "loaded";
swp.classList.add('fd');
}
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener(
'DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
var swp = document.getElementById("pink");
swp.classList.remove('fd');
}, 3000);
</script>
</head>
<body>
<div id="i-w">
<div class="itr">
<div class="itr-hdg">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="pink">
<h1 class="hdg">hello</h1>
</div>
</body>
</html>javascript html css dom animation
edited 6 hours ago
200_success
136k21 gold badges175 silver badges444 bronze badges
asked 11 hours ago
mm_blnmm_bln
361 bronze badge
New contributor
mm_bln is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
7
$begingroup$
I am working on a website with an animation that runs at the beginning before the content of the homepage becomes visible.
I've looked at some examples of preloaders and now use that code with some setTimeout to implement the desired effect.
The effect works the way it should but I think the code it's a bit messy. is there be a better way to write that?
It would be great if someone had a suggestion.
Here is the code and and a working HTML in which everything is bind together:
The javascript
setTimeout(function () {
function run() {
var wrp = document.getElementById("i-w");
var swp = document.getElementById("pink");
wrp.className += "loaded";
swp.classList.add('fd');}
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener(
'DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
var swp = document.getElementById("pink");
swp.classList.remove('fd');
}, 3000);
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>itr test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
background:yellow;
}
#i-w {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform .4s ease-in-out;
transition: transform .4s ease-in-out;
will-change: transform;
}
#i-w.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
}
#i-w .itr {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#i-w {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform .7s cubic-bezier(.96, 0, .07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform .1s cubic-bezier(.96, 0, .07, 1);
}
.hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.itr-hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: fd-i 1.3s .6s cubic-bezier(.86,0,.07,1) forwards, trlt-i 1.5s 1s cubic-bezier(.23, 1, .32, 1) forwards, trlt-o .5s 2.9s cubic-bezier(.23, 1, .32, 1) forwards, fd-o .4s 3s ease forwards;
}
@keyframes trlt-i {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes trlt-o {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes fd-i {
0% {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fd-o {
0% {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
</style>
<script>
setTimeout(function () {
function run() {
var wrp = document.getElementById("i-w");
var swp = document.getElementById("pink");
wrp.className += "loaded";
swp.classList.add('fd');
}
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener(
'DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
var swp = document.getElementById("pink");
swp.classList.remove('fd');
}, 3000);
</script>
</head>
<body>
<div id="i-w">
<div class="itr">
<div class="itr-hdg">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="pink">
<h1 class="hdg">hello</h1>
</div>
</body>
</html>javascript html css dom animation
edited 6 hours ago
200_success
136k21 gold badges175 silver badges444 bronze badges
asked 11 hours ago
mm_blnmm_bln
361 bronze badge
New contributor
mm_bln is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
7
7
7
$begingroup$
I am working on a website with an animation that runs at the beginning before the content of the homepage becomes visible.
I've looked at some examples of preloaders and now use that code with some setTimeout to implement the desired effect.
The effect works the way it should but I think the code it's a bit messy. is there be a better way to write that?
It would be great if someone had a suggestion.
Here is the code and and a working HTML in which everything is bind together:
The javascript
setTimeout(function () {
function run() {
var wrp = document.getElementById("i-w");
var swp = document.getElementById("pink");
wrp.className += "loaded";
swp.classList.add('fd');}
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener(
'DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
var swp = document.getElementById("pink");
swp.classList.remove('fd');
}, 3000);
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>itr test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
background:yellow;
}
#i-w {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform .4s ease-in-out;
transition: transform .4s ease-in-out;
will-change: transform;
}
#i-w.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
}
#i-w .itr {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#i-w {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform .7s cubic-bezier(.96, 0, .07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform .1s cubic-bezier(.96, 0, .07, 1);
}
.hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.itr-hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: fd-i 1.3s .6s cubic-bezier(.86,0,.07,1) forwards, trlt-i 1.5s 1s cubic-bezier(.23, 1, .32, 1) forwards, trlt-o .5s 2.9s cubic-bezier(.23, 1, .32, 1) forwards, fd-o .4s 3s ease forwards;
}
@keyframes trlt-i {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes trlt-o {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes fd-i {
0% {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fd-o {
0% {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
</style>
<script>
setTimeout(function () {
function run() {
var wrp = document.getElementById("i-w");
var swp = document.getElementById("pink");
wrp.className += "loaded";
swp.classList.add('fd');
}
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener(
'DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
var swp = document.getElementById("pink");
swp.classList.remove('fd');
}, 3000);
</script>
</head>
<body>
<div id="i-w">
<div class="itr">
<div class="itr-hdg">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="pink">
<h1 class="hdg">hello</h1>
</div>
</body>
</html>javascript html css dom animation
edited 6 hours ago
200_success
136k21 gold badges175 silver badges444 bronze badges
asked 11 hours ago
mm_blnmm_bln
361 bronze badge
New contributor
mm_bln is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
I am working on a website with an animation that runs at the beginning before the content of the homepage becomes visible.
I've looked at some examples of preloaders and now use that code with some setTimeout to implement the desired effect.
The effect works the way it should but I think the code it's a bit messy. is there be a better way to write that?
It would be great if someone had a suggestion.
Here is the code and and a working HTML in which everything is bind together:
The javascript
setTimeout(function () {
function run() {
var wrp = document.getElementById("i-w");
var swp = document.getElementById("pink");
wrp.className += "loaded";
swp.classList.add('fd');}
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener(
'DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
var swp = document.getElementById("pink");
swp.classList.remove('fd');
}, 3000);
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>itr test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
background:yellow;
}
#i-w {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform .4s ease-in-out;
transition: transform .4s ease-in-out;
will-change: transform;
}
#i-w.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
}
#i-w .itr {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#i-w {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform .7s cubic-bezier(.96, 0, .07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform .1s cubic-bezier(.96, 0, .07, 1);
}
.hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.itr-hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: fd-i 1.3s .6s cubic-bezier(.86,0,.07,1) forwards, trlt-i 1.5s 1s cubic-bezier(.23, 1, .32, 1) forwards, trlt-o .5s 2.9s cubic-bezier(.23, 1, .32, 1) forwards, fd-o .4s 3s ease forwards;
}
@keyframes trlt-i {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes trlt-o {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes fd-i {
0% {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fd-o {
0% {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
</style>
<script>
setTimeout(function () {
function run() {
var wrp = document.getElementById("i-w");
var swp = document.getElementById("pink");
wrp.className += "loaded";
swp.classList.add('fd');
}
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener(
'DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
var swp = document.getElementById("pink");
swp.classList.remove('fd');
}, 3000);
</script>
</head>
<body>
<div id="i-w">
<div class="itr">
<div class="itr-hdg">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="pink">
<h1 class="hdg">hello</h1>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>itr test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
background:yellow;
}
#i-w {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform .4s ease-in-out;
transition: transform .4s ease-in-out;
will-change: transform;
}
#i-w.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
}
#i-w .itr {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#i-w {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform .7s cubic-bezier(.96, 0, .07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform .1s cubic-bezier(.96, 0, .07, 1);
}
.hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.itr-hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: fd-i 1.3s .6s cubic-bezier(.86,0,.07,1) forwards, trlt-i 1.5s 1s cubic-bezier(.23, 1, .32, 1) forwards, trlt-o .5s 2.9s cubic-bezier(.23, 1, .32, 1) forwards, fd-o .4s 3s ease forwards;
}
@keyframes trlt-i {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes trlt-o {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes fd-i {
0% {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fd-o {
0% {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
</style>
<script>
setTimeout(function () {
function run() {
var wrp = document.getElementById("i-w");
var swp = document.getElementById("pink");
wrp.className += "loaded";
swp.classList.add('fd');
}
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener(
'DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
var swp = document.getElementById("pink");
swp.classList.remove('fd');
}, 3000);
</script>
</head>
<body>
<div id="i-w">
<div class="itr">
<div class="itr-hdg">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="pink">
<h1 class="hdg">hello</h1>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>itr test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
background:yellow;
}
#i-w {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform .4s ease-in-out;
transition: transform .4s ease-in-out;
will-change: transform;
}
#i-w.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(.96, 0, .07, 1), visibility 0s 1.9s;
}
#i-w .itr {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#i-w {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform .7s cubic-bezier(.96, 0, .07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform .1s cubic-bezier(.96, 0, .07, 1);
}
.hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.itr-hdg {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: fd-i 1.3s .6s cubic-bezier(.86,0,.07,1) forwards, trlt-i 1.5s 1s cubic-bezier(.23, 1, .32, 1) forwards, trlt-o .5s 2.9s cubic-bezier(.23, 1, .32, 1) forwards, fd-o .4s 3s ease forwards;
}
@keyframes trlt-i {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes trlt-o {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes fd-i {
0% {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fd-o {
0% {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
</style>
<script>
setTimeout(function () {
function run() {
var wrp = document.getElementById("i-w");
var swp = document.getElementById("pink");
wrp.className += "loaded";
swp.classList.add('fd');
}
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener(
'DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
var swp = document.getElementById("pink");
swp.classList.remove('fd');
}, 3000);
</script>
</head>
<body>
<div id="i-w">
<div class="itr">
<div class="itr-hdg">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="pink">
<h1 class="hdg">hello</h1>
</div>
</body>
</html>javascript html css dom animation
javascript html css dom animation
edited 6 hours ago
200_success
136k21 gold badges175 silver badges444 bronze badges
asked 11 hours ago
mm_blnmm_bln
361 bronze badge
New contributor
mm_bln is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 6 hours ago
200_success
136k21 gold badges175 silver badges444 bronze badges
asked 11 hours ago
mm_blnmm_bln
361 bronze badge
New contributor
mm_bln is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 6 hours ago
200_success
136k21 gold badges175 silver badges444 bronze badges
edited 6 hours ago
200_success
136k21 gold badges175 silver badges444 bronze badges
edited 6 hours ago
200_success
136k21 gold badges175 silver badges444 bronze badges
136k21 gold badges175 silver badges444 bronze badges
asked 11 hours ago
mm_blnmm_bln
361 bronze badge
New contributor
mm_bln is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 11 hours ago
mm_blnmm_bln
361 bronze badge
asked 11 hours ago
mm_blnmm_bln
361 bronze badge
361 bronze badge
New contributor
mm_bln is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
mm_bln is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
3
$begingroup$
I would make the following recommendations to clean it up for future maintainability and readability:
- Clean up and remove the anonymous functions.
- They aren't really needed here and just create extra clutter, decreasing readability.
- Remove the additional
setTimeoutcall and just call to show when you're done loading. - Use more meaningful names.
- It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
- Using more meaningful names helps readability, and thus improves maintainability.
- Ensure you're only creating
CSS classesonce.
- You had two instances of
#i-wthat could be one instead.
- You had two instances of
- Remove the usage of events unless needed.
- I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
- A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
- A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
- Do not redefine variables.
- You'll notice that I removed one variable (
wrp) because it was only used once. - Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
- I wouldn't create it globally unless you need to, and in this case, I don't think you do since your only variables are
wrpandswpwhich are both used by the pre-loader only.
- You'll notice that I removed one variable (
Other than that, it's visually appealing, and a great implementation! Keep up the good work!
// Begin loading our stuff from DB, files, etc.
function beginLoading() {
// Perform some kinds of loading tasks.
for (var i = 0; i < 65535; i++)
i++;
// Check the DOM before updating.
checkDOMForLoadingCompleted();
}
// Since we're done loading, we want to make sure the DOM is too.
function checkDOMForLoadingCompleted() {
if (document.readyState != 'loading')
loadingCompleted();
else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', loadingCompleted);
else
document.attachEvent('onreadystatechange', onReadyStateChange);
}
function onReadyStateChange() {
if (document.readyState == 'complete')
loadingCompleted();
}
// Loading has completed on our side and the DOM's so we can complete the pre-loader's life cycle.
function loadingCompleted() {
document.getElementById("pre-loader").classList.add("loaded");
var loadedContent = document.getElementById("loaded-content");
loadedContent.classList.add("fd");
showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
loadedContent.classList.remove("fd");
}
// This is to simulate starting a loading process.
// Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
setTimeout(beginLoading, 2650);
}body {
margin: 0;
padding: 0;
background: yellow;
}
.pre-loader {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
will-change: transform;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.pre-loader.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.intro-heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes to-transform-tss {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes to-visible {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes to-hidden {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}<div id="pre-loader" class="pre-loader">
<div class="intro-wrapper">
<div class="intro-heading">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="loaded-content">
<h1 class="heading">hello</h1>
</div>answered 10 hours ago
PerpetualJPerpetualJ
2599 bronze badges
$endgroup$
1
$begingroup$
Thank you for taking the time to describe your changes and recommendations in such detail. I'll take a closer look at that in the next few days, and if I have any questions, I'd like to come back to that. Thanks again for your support!
$endgroup$
– mm_bln
4 hours ago
add a comment |
0
$begingroup$
Define your variables at the top of your script outside of the setTimeout. That way, you only need to define every variable once. Also, you can make them const, since they won't change.
The same goes for the run() function. Declare it outside of the setTimeout. You just want to call it inside the setTimeout. I hope this is helpful for you.
const wrp = document.getElementById("i-w");
const swp = document.getElementById("pink");
function run() {
wrp.className += "loaded";
swp.classList.add('fd');
}
setTimeout(function () {
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
swp.classList.remove('fd');
}, 3000);
answered 10 hours ago
Dennis FinkDennis Fink
3138 bronze badges
$endgroup$
$begingroup$
Thanks for the advice and the clarification.
$endgroup$
– mm_bln
4 hours ago
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
mm_bln is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f227722%2fwebpage-with-a-preload-animation-using-javascript-settimeout%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
$begingroup$
I would make the following recommendations to clean it up for future maintainability and readability:
- Clean up and remove the anonymous functions.
- They aren't really needed here and just create extra clutter, decreasing readability.
- Remove the additional
setTimeoutcall and just call to show when you're done loading. - Use more meaningful names.
- It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
- Using more meaningful names helps readability, and thus improves maintainability.
- Ensure you're only creating
CSS classesonce.
- You had two instances of
#i-wthat could be one instead.
- You had two instances of
- Remove the usage of events unless needed.
- I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
- A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
- A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
- Do not redefine variables.
- You'll notice that I removed one variable (
wrp) because it was only used once. - Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
- I wouldn't create it globally unless you need to, and in this case, I don't think you do since your only variables are
wrpandswpwhich are both used by the pre-loader only.
- You'll notice that I removed one variable (
Other than that, it's visually appealing, and a great implementation! Keep up the good work!
// Begin loading our stuff from DB, files, etc.
function beginLoading() {
// Perform some kinds of loading tasks.
for (var i = 0; i < 65535; i++)
i++;
// Check the DOM before updating.
checkDOMForLoadingCompleted();
}
// Since we're done loading, we want to make sure the DOM is too.
function checkDOMForLoadingCompleted() {
if (document.readyState != 'loading')
loadingCompleted();
else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', loadingCompleted);
else
document.attachEvent('onreadystatechange', onReadyStateChange);
}
function onReadyStateChange() {
if (document.readyState == 'complete')
loadingCompleted();
}
// Loading has completed on our side and the DOM's so we can complete the pre-loader's life cycle.
function loadingCompleted() {
document.getElementById("pre-loader").classList.add("loaded");
var loadedContent = document.getElementById("loaded-content");
loadedContent.classList.add("fd");
showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
loadedContent.classList.remove("fd");
}
// This is to simulate starting a loading process.
// Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
setTimeout(beginLoading, 2650);
}body {
margin: 0;
padding: 0;
background: yellow;
}
.pre-loader {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
will-change: transform;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.pre-loader.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.intro-heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes to-transform-tss {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes to-visible {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes to-hidden {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}<div id="pre-loader" class="pre-loader">
<div class="intro-wrapper">
<div class="intro-heading">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="loaded-content">
<h1 class="heading">hello</h1>
</div>answered 10 hours ago
PerpetualJPerpetualJ
2599 bronze badges
$endgroup$
1
$begingroup$
Thank you for taking the time to describe your changes and recommendations in such detail. I'll take a closer look at that in the next few days, and if I have any questions, I'd like to come back to that. Thanks again for your support!
$endgroup$
– mm_bln
4 hours ago
add a comment |
3
$begingroup$
I would make the following recommendations to clean it up for future maintainability and readability:
- Clean up and remove the anonymous functions.
- They aren't really needed here and just create extra clutter, decreasing readability.
- Remove the additional
setTimeoutcall and just call to show when you're done loading. - Use more meaningful names.
- It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
- Using more meaningful names helps readability, and thus improves maintainability.
- Ensure you're only creating
CSS classesonce.
- You had two instances of
#i-wthat could be one instead.
- You had two instances of
- Remove the usage of events unless needed.
- I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
- A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
- A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
- Do not redefine variables.
- You'll notice that I removed one variable (
wrp) because it was only used once. - Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
- I wouldn't create it globally unless you need to, and in this case, I don't think you do since your only variables are
wrpandswpwhich are both used by the pre-loader only.
- You'll notice that I removed one variable (
Other than that, it's visually appealing, and a great implementation! Keep up the good work!
// Begin loading our stuff from DB, files, etc.
function beginLoading() {
// Perform some kinds of loading tasks.
for (var i = 0; i < 65535; i++)
i++;
// Check the DOM before updating.
checkDOMForLoadingCompleted();
}
// Since we're done loading, we want to make sure the DOM is too.
function checkDOMForLoadingCompleted() {
if (document.readyState != 'loading')
loadingCompleted();
else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', loadingCompleted);
else
document.attachEvent('onreadystatechange', onReadyStateChange);
}
function onReadyStateChange() {
if (document.readyState == 'complete')
loadingCompleted();
}
// Loading has completed on our side and the DOM's so we can complete the pre-loader's life cycle.
function loadingCompleted() {
document.getElementById("pre-loader").classList.add("loaded");
var loadedContent = document.getElementById("loaded-content");
loadedContent.classList.add("fd");
showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
loadedContent.classList.remove("fd");
}
// This is to simulate starting a loading process.
// Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
setTimeout(beginLoading, 2650);
}body {
margin: 0;
padding: 0;
background: yellow;
}
.pre-loader {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
will-change: transform;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.pre-loader.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.intro-heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes to-transform-tss {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes to-visible {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes to-hidden {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}<div id="pre-loader" class="pre-loader">
<div class="intro-wrapper">
<div class="intro-heading">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="loaded-content">
<h1 class="heading">hello</h1>
</div>answered 10 hours ago
PerpetualJPerpetualJ
2599 bronze badges
$endgroup$
1
$begingroup$
Thank you for taking the time to describe your changes and recommendations in such detail. I'll take a closer look at that in the next few days, and if I have any questions, I'd like to come back to that. Thanks again for your support!
$endgroup$
– mm_bln
4 hours ago
add a comment |
3
3
3
$begingroup$
I would make the following recommendations to clean it up for future maintainability and readability:
- Clean up and remove the anonymous functions.
- They aren't really needed here and just create extra clutter, decreasing readability.
- Remove the additional
setTimeoutcall and just call to show when you're done loading. - Use more meaningful names.
- It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
- Using more meaningful names helps readability, and thus improves maintainability.
- Ensure you're only creating
CSS classesonce.
- You had two instances of
#i-wthat could be one instead.
- You had two instances of
- Remove the usage of events unless needed.
- I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
- A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
- A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
- Do not redefine variables.
- You'll notice that I removed one variable (
wrp) because it was only used once. - Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
- I wouldn't create it globally unless you need to, and in this case, I don't think you do since your only variables are
wrpandswpwhich are both used by the pre-loader only.
- You'll notice that I removed one variable (
Other than that, it's visually appealing, and a great implementation! Keep up the good work!
// Begin loading our stuff from DB, files, etc.
function beginLoading() {
// Perform some kinds of loading tasks.
for (var i = 0; i < 65535; i++)
i++;
// Check the DOM before updating.
checkDOMForLoadingCompleted();
}
// Since we're done loading, we want to make sure the DOM is too.
function checkDOMForLoadingCompleted() {
if (document.readyState != 'loading')
loadingCompleted();
else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', loadingCompleted);
else
document.attachEvent('onreadystatechange', onReadyStateChange);
}
function onReadyStateChange() {
if (document.readyState == 'complete')
loadingCompleted();
}
// Loading has completed on our side and the DOM's so we can complete the pre-loader's life cycle.
function loadingCompleted() {
document.getElementById("pre-loader").classList.add("loaded");
var loadedContent = document.getElementById("loaded-content");
loadedContent.classList.add("fd");
showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
loadedContent.classList.remove("fd");
}
// This is to simulate starting a loading process.
// Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
setTimeout(beginLoading, 2650);
}body {
margin: 0;
padding: 0;
background: yellow;
}
.pre-loader {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
will-change: transform;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.pre-loader.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.intro-heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes to-transform-tss {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes to-visible {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes to-hidden {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}<div id="pre-loader" class="pre-loader">
<div class="intro-wrapper">
<div class="intro-heading">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="loaded-content">
<h1 class="heading">hello</h1>
</div>answered 10 hours ago
PerpetualJPerpetualJ
2599 bronze badges
$endgroup$
I would make the following recommendations to clean it up for future maintainability and readability:
- Clean up and remove the anonymous functions.
- They aren't really needed here and just create extra clutter, decreasing readability.
- Remove the additional
setTimeoutcall and just call to show when you're done loading. - Use more meaningful names.
- It was hard to understand what your code was doing, what each element was, and it took me some time to clean it up due to that.
- Using more meaningful names helps readability, and thus improves maintainability.
- Ensure you're only creating
CSS classesonce.
- You had two instances of
#i-wthat could be one instead.
- You had two instances of
- Remove the usage of events unless needed.
- I wouldn't rely on the DOM events unless you're only focused on the page content and visuals.
- A reusable loader would begin loading and then show that it's loading until it's done loading, not when the DOM is done.
- A good additive to this is to include the event check once you're done loading just in case you finish before the DOM does.
- Do not redefine variables.
- You'll notice that I removed one variable (
wrp) because it was only used once. - Also, if you're going to need a variable later, you can pass it to the next function, or you can create it globally at the top of the function that created it for later access.
- I wouldn't create it globally unless you need to, and in this case, I don't think you do since your only variables are
wrpandswpwhich are both used by the pre-loader only.
- You'll notice that I removed one variable (
Other than that, it's visually appealing, and a great implementation! Keep up the good work!
// Begin loading our stuff from DB, files, etc.
function beginLoading() {
// Perform some kinds of loading tasks.
for (var i = 0; i < 65535; i++)
i++;
// Check the DOM before updating.
checkDOMForLoadingCompleted();
}
// Since we're done loading, we want to make sure the DOM is too.
function checkDOMForLoadingCompleted() {
if (document.readyState != 'loading')
loadingCompleted();
else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', loadingCompleted);
else
document.attachEvent('onreadystatechange', onReadyStateChange);
}
function onReadyStateChange() {
if (document.readyState == 'complete')
loadingCompleted();
}
// Loading has completed on our side and the DOM's so we can complete the pre-loader's life cycle.
function loadingCompleted() {
document.getElementById("pre-loader").classList.add("loaded");
var loadedContent = document.getElementById("loaded-content");
loadedContent.classList.add("fd");
showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
loadedContent.classList.remove("fd");
}
// This is to simulate starting a loading process.
// Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
setTimeout(beginLoading, 2650);
}body {
margin: 0;
padding: 0;
background: yellow;
}
.pre-loader {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
will-change: transform;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.pre-loader.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.intro-heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes to-transform-tss {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes to-visible {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes to-hidden {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}<div id="pre-loader" class="pre-loader">
<div class="intro-wrapper">
<div class="intro-heading">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="loaded-content">
<h1 class="heading">hello</h1>
</div>// Begin loading our stuff from DB, files, etc.
function beginLoading() {
// Perform some kinds of loading tasks.
for (var i = 0; i < 65535; i++)
i++;
// Check the DOM before updating.
checkDOMForLoadingCompleted();
}
// Since we're done loading, we want to make sure the DOM is too.
function checkDOMForLoadingCompleted() {
if (document.readyState != 'loading')
loadingCompleted();
else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', loadingCompleted);
else
document.attachEvent('onreadystatechange', onReadyStateChange);
}
function onReadyStateChange() {
if (document.readyState == 'complete')
loadingCompleted();
}
// Loading has completed on our side and the DOM's so we can complete the pre-loader's life cycle.
function loadingCompleted() {
document.getElementById("pre-loader").classList.add("loaded");
var loadedContent = document.getElementById("loaded-content");
loadedContent.classList.add("fd");
showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
loadedContent.classList.remove("fd");
}
// This is to simulate starting a loading process.
// Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
setTimeout(beginLoading, 2650);
}body {
margin: 0;
padding: 0;
background: yellow;
}
.pre-loader {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
will-change: transform;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.pre-loader.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.intro-heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes to-transform-tss {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes to-visible {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes to-hidden {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}<div id="pre-loader" class="pre-loader">
<div class="intro-wrapper">
<div class="intro-heading">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="loaded-content">
<h1 class="heading">hello</h1>
</div>// Begin loading our stuff from DB, files, etc.
function beginLoading() {
// Perform some kinds of loading tasks.
for (var i = 0; i < 65535; i++)
i++;
// Check the DOM before updating.
checkDOMForLoadingCompleted();
}
// Since we're done loading, we want to make sure the DOM is too.
function checkDOMForLoadingCompleted() {
if (document.readyState != 'loading')
loadingCompleted();
else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', loadingCompleted);
else
document.attachEvent('onreadystatechange', onReadyStateChange);
}
function onReadyStateChange() {
if (document.readyState == 'complete')
loadingCompleted();
}
// Loading has completed on our side and the DOM's so we can complete the pre-loader's life cycle.
function loadingCompleted() {
document.getElementById("pre-loader").classList.add("loaded");
var loadedContent = document.getElementById("loaded-content");
loadedContent.classList.add("fd");
showLoadedContent(loadedContent);
}
function showLoadedContent(loadedContent) {
loadedContent.classList.remove("fd");
}
// This is to simulate starting a loading process.
// Instead of using setTimeout, just call the begin loading function to start your loading process.
//beginLoading();
callBeginLoadingOnTimeout();
function callBeginLoadingOnTimeout() {
setTimeout(beginLoading, 2650);
}body {
margin: 0;
padding: 0;
background: yellow;
}
.pre-loader {
z-index: 9999;
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
will-change: transform;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.pre-loader.loaded {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
transition: transform 1.3s cubic-bezier(0.96, 0, 0.07, 1), visibility 0s 1.9s;
}
.pre-loader .intro-wrapper {
z-index: 100000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #0f0a05;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
background: pink;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
transform: translateY(0);
transition: transform 0.7s cubic-bezier(0.96, 0, 0.07, 1);
will-change: transform;
}
.container.fd {
transform: translateY(100%);
transition: transform 0.1s cubic-bezier(0.96, 0, 0.07, 1);
}
.heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: #000;
font-size: 18vw;
}
.intro-heading {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
color: green;
font-size: 8vw;
opacity: 1;
visibility: hidden;
will-change: transform;
transform: translate3d(0, 150%, 0) skewY(18deg) scale(1);
animation: to-visible 1.3s 0.6s cubic-bezier(0.86, 0, 0.07, 1) forwards,
to-zero-translation-z 1.5s 1s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-transform-tss 0.5s 2.9s cubic-bezier(0.23, 1, 0.32, 1) forwards,
to-hidden 0.4s 3s ease forwards;
}
@keyframes to-zero-translation-z {
to {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
}
@keyframes to-transform-tss {
from {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
-webkit-transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
transform: translate3d(0, -150%, 0) skewY(0deg) scale(1);
}
}
@keyframes to-visible {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes to-hidden {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}<div id="pre-loader" class="pre-loader">
<div class="intro-wrapper">
<div class="intro-heading">
<h1>⬆ intro ⬆</h1>
</div>
</div>
</div>
<div class="container" id="loaded-content">
<h1 class="heading">hello</h1>
</div>answered 10 hours ago
PerpetualJPerpetualJ
2599 bronze badges
edited 9 hours ago
answered 10 hours ago
PerpetualJPerpetualJ
2599 bronze badges
answered 10 hours ago
PerpetualJPerpetualJ
2599 bronze badges
answered 10 hours ago
PerpetualJPerpetualJ
2599 bronze badges
2599 bronze badges
1
$begingroup$
Thank you for taking the time to describe your changes and recommendations in such detail. I'll take a closer look at that in the next few days, and if I have any questions, I'd like to come back to that. Thanks again for your support!
$endgroup$
– mm_bln
4 hours ago
add a comment |
1
$begingroup$
Thank you for taking the time to describe your changes and recommendations in such detail. I'll take a closer look at that in the next few days, and if I have any questions, I'd like to come back to that. Thanks again for your support!
$endgroup$
– mm_bln
4 hours ago
1
1
$begingroup$
Thank you for taking the time to describe your changes and recommendations in such detail. I'll take a closer look at that in the next few days, and if I have any questions, I'd like to come back to that. Thanks again for your support!
$endgroup$
– mm_bln
4 hours ago
$begingroup$
Thank you for taking the time to describe your changes and recommendations in such detail. I'll take a closer look at that in the next few days, and if I have any questions, I'd like to come back to that. Thanks again for your support!
$endgroup$
– mm_bln
4 hours ago
add a comment |
0
$begingroup$
Define your variables at the top of your script outside of the setTimeout. That way, you only need to define every variable once. Also, you can make them const, since they won't change.
The same goes for the run() function. Declare it outside of the setTimeout. You just want to call it inside the setTimeout. I hope this is helpful for you.
const wrp = document.getElementById("i-w");
const swp = document.getElementById("pink");
function run() {
wrp.className += "loaded";
swp.classList.add('fd');
}
setTimeout(function () {
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
swp.classList.remove('fd');
}, 3000);
answered 10 hours ago
Dennis FinkDennis Fink
3138 bronze badges
$endgroup$
$begingroup$
Thanks for the advice and the clarification.
$endgroup$
– mm_bln
4 hours ago
add a comment |
0
$begingroup$
Define your variables at the top of your script outside of the setTimeout. That way, you only need to define every variable once. Also, you can make them const, since they won't change.
The same goes for the run() function. Declare it outside of the setTimeout. You just want to call it inside the setTimeout. I hope this is helpful for you.
const wrp = document.getElementById("i-w");
const swp = document.getElementById("pink");
function run() {
wrp.className += "loaded";
swp.classList.add('fd');
}
setTimeout(function () {
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
swp.classList.remove('fd');
}, 3000);
answered 10 hours ago
Dennis FinkDennis Fink
3138 bronze badges
$endgroup$
$begingroup$
Thanks for the advice and the clarification.
$endgroup$
– mm_bln
4 hours ago
add a comment |
0
0
0
$begingroup$
Define your variables at the top of your script outside of the setTimeout. That way, you only need to define every variable once. Also, you can make them const, since they won't change.
The same goes for the run() function. Declare it outside of the setTimeout. You just want to call it inside the setTimeout. I hope this is helpful for you.
const wrp = document.getElementById("i-w");
const swp = document.getElementById("pink");
function run() {
wrp.className += "loaded";
swp.classList.add('fd');
}
setTimeout(function () {
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
swp.classList.remove('fd');
}, 3000);
answered 10 hours ago
Dennis FinkDennis Fink
3138 bronze badges
$endgroup$
Define your variables at the top of your script outside of the setTimeout. That way, you only need to define every variable once. Also, you can make them const, since they won't change.
The same goes for the run() function. Declare it outside of the setTimeout. You just want to call it inside the setTimeout. I hope this is helpful for you.
const wrp = document.getElementById("i-w");
const swp = document.getElementById("pink");
function run() {
wrp.className += "loaded";
swp.classList.add('fd');
}
setTimeout(function () {
if (document.readyState != 'loading') run();
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') run();
});
}, 2650);
setTimeout(function () {
swp.classList.remove('fd');
}, 3000);
answered 10 hours ago
Dennis FinkDennis Fink
3138 bronze badges
answered 10 hours ago
Dennis FinkDennis Fink
3138 bronze badges
answered 10 hours ago
Dennis FinkDennis Fink
3138 bronze badges
answered 10 hours ago
Dennis FinkDennis Fink
3138 bronze badges
3138 bronze badges
$begingroup$
Thanks for the advice and the clarification.
$endgroup$
– mm_bln
4 hours ago
add a comment |
$begingroup$
Thanks for the advice and the clarification.
$endgroup$
– mm_bln
4 hours ago
$begingroup$
Thanks for the advice and the clarification.
$endgroup$
– mm_bln
4 hours ago
$begingroup$
Thanks for the advice and the clarification.
$endgroup$
– mm_bln
4 hours ago
add a comment |
mm_bln is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
mm_bln is a new contributor. Be nice, and check out our Code of Conduct.
mm_bln is a new contributor. Be nice, and check out our Code of Conduct.
mm_bln is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f227722%2fwebpage-with-a-preload-animation-using-javascript-settimeout%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
