I wanted when I finished this animation that I put in the code, the animation page was redirected to another page in that category, to the "index.php", that is to say, this animation appears to welcome the person, and badly ends the animation, redirects to index.php.
Note: the animation page is called start.php, do not get confused!
//CSS Text Animation
// JQUERY
$(function() {
// Will wait for everything on the page to load.
$(window).bind('load', function() {
$('.overlay, .body').addClass('loaded');
setTimeout(function() {
$('.overlay').css({'display':'none'})
}, 10000);
});
// Will remove overlay after 1min for users cannnot load properly.
setTimeout(function() {
$('.overlay, .body').addClass('loaded');
}, 60000);
});
function xavieumamor_ps_de_gato_eheh()
(function xavieumamor_ps_de_gato_eheh() {("setTimeout:location.replace('index.php')"); }, 4500);{
};@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
body {
margin:0px;
text-align:center;
color:#fff;
font-family:'Roboto';
font-size:36px;
font-weight:100;
overflow:hidden;
}
.nav>li>a {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.dropping-texts {
display: inline-block;
width: 180px;
text-align: left;
height: 36px;
vertical-align: -2px;
}
.dropping-texts > div {
font-size:0px;
opacity:0;
margin-left:-30px;
position:absolute;
font-weight:300;
box-shadow: 0px 60px 25px -20px rgba(0,0,0,0.5);
}
.dropping-texts > div:nth-child(1) {
animation: roll 5s linear infinite 0s;
}
.dropping-texts > div:nth-child(2) {
animation: roll 5s linear infinite 1s;
}
.dropping-texts > div:nth-child(3) {
animation: roll 5s linear infinite 2s;
}
.dropping-texts > div:nth-child(4) {
animation: roll2 5s linear infinite 3s;
}
@keyframes roll {
0% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(-25deg);
}
3% {
opacity:1;
transform: rotate(0deg);
}
5% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
}
20% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
transform: rotate(0deg);
}
27% {
font-size:0px;
opacity:0.5;
margin-left:20px;
margin-top:100px;
}
100% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(15deg);
}
}
@keyframes roll2 {
0% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(-25deg);
}
3% {
opacity:1;
transform: rotate(0deg);
}
5% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
}
30% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
transform: rotate(0deg);
}
37% {
font-size:1500px;
opacity:0;
margin-left:-1000px;
margin-top:-800px;
}
100% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(15deg);
}
}
@keyframes bg {
0% {background: #ff0075;}
3% {background: #0094ff;}
20% {background: #0094ff;}
23% {background: #b200ff;}
40% {background: #b200ff;}
43% {background: #8BC34A;}
60% {background: #8BC34A;}
63% {background: #F44336;}
80% {background: #F44336;}
83% {background: #F44336;}
100% {background: #F44336;}
}
/*CSS DO LOAD*/
@import url('https://fonts.googleapis.com/css?family=Zilla+Slab:400,600,700|Roboto:300,400,500,700');
* {
padding: 0;
margin: 0;
outline-width: 0;
}
.body {
overflow-y: hidden;
overflow-x: hidden;
&.loaded {
overflow-y: auto;
}
}
.centre {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.overlay {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
justify-content: center;
align-items: center;
background: #1c1c1c;
overflow: hidden;
z-index: 100000;
transition: 0.6s cubic-bezier(.77,0,.18,1);
-webkit-transition: 0.6s cubic-bezier(.77,0,.18,1);
opacity: 1;
visibility: visible;
&.loaded {
opacity: 0;
visibility: hidden;
}
p {
padding-bottom: 50px;
font-family: 'Roboto';
color: #ccc;
font-weight: 600;
letter-spacing: 3px;
}
}
.loader {
background: transparent;
width: 84px;
height: 84px;
border-top: 4px solid rgba(255, 255, 255, 0.3);
border-right: 4px solid rgba(255, 255, 255, 0.3);
border-bottom: 4px solid rgba(255, 255, 255, 0.3);
border-left: 4px solid #fff;
border-radius: 50%;
animation: spin 1s ease infinite;
}
.Skip {
background: transparent;
margin-top: 45px;
border: none;
color: #fff;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 15px 35px;
cursor: pointer;
transition: 0.3s ease;
font-weight: bold;
opacity: 0.4;
&:hover {
color: #fff;
opacity: 1;
}
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Carregando..</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/load.css">
</head>
<body onload="xavieumamor_ps_de_gato_eheh()">
<div class="overlay">
<div class="dropping-texts">
<div>Seja </div>
<div>Bem Vindo</div>
<div>à Queue Music</div>
<div>APROVEITE!</div>
</div>
</div>
</div>
<!-- Loading -->
<script src="js/index.js"></script>
</body>
</html>