1
I wanted that when I finished this animation that I brought in the code, the animation page would be redecorated to another page in this page, to the "index.php", that is, this animation appears to welcome the person, and as soon as the animation ends, redirects to the index.php.
Note: the animation page is called inicio.php , it is not 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>
But the animation is working, just not managing to change the url after its completion?
– LeAndrade
Yes! The animation is working but when it’s over it’s not changing to another page, in this case to my index. Basically it’s a little animation welcome to the site.
– André Reis