Ho trovato una text animation che mi piace e che vorrei inserire nel mio sito, questa è la versione originale: https://codepen.io/bennettfeely/pen/lgybC
Ora, vorrei apportare una modifica per far si che dopo che la prima frase si sia dissolta ne compaia un'altra con l'effetto inverso (da una nube di fumo appare la seconda frase).
Questi sono l'HTML e il CSS modificati da me:
codice HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Smoky Text</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="a"><span>C</span><span>S</span><span>S</span><span> </span><span>S</span><span>m</span><span>o</span><span>k</span><span>y</span><span> </span><span>T</span><span>e</span><span>x</span><span>t</span><span> </span><span>E</span><span>f</span><span>f</span><span>e</span><span>c</span><span>t</span></div>
<div class="b"><span>U</span><span>m</span><span>b</span><span>r</span><span>i</span><span>a</span></div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
codice:
@import url(http://fonts.googleapis.com/css?family=Finger+Paint);
body {
background: black;
overflow: hidden;
font: 5vw/100vh "Finger Paint";
text-align: center;
color: transparent;
backface-visibility: hidden;
}
.a span {
display: inline-block;
text-shadow: 0 0 0 whitesmoke;
animation: smoky 5s 3s both;
}
.a span:nth-child(even) {
animation-name: smoky-mirror;
}
@keyframes smoky {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@keyframes smoky-mirror {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
.a span:nth-of-type(1) {
-webkit-animation-delay: 3.1s;
animation-delay: 3.1s;
}
.a span:nth-of-type(2) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
.a span:nth-of-type(3) {
-webkit-animation-delay: 3.3s;
animation-delay: 3.3s;
}
.a span:nth-of-type(4) {
-webkit-animation-delay: 3.4s;
animation-delay: 3.4s;
}
.a span:nth-of-type(5) {
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s;
}
.a span:nth-of-type(6) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
.a span:nth-of-type(7) {
-webkit-animation-delay: 3.7s;
animation-delay: 3.7s;
}
.a span:nth-of-type(8) {
-webkit-animation-delay: 3.8s;
animation-delay: 3.8s;
}
.a span:nth-of-type(9) {
-webkit-animation-delay: 3.9s;
animation-delay: 3.9s;
}
.a span:nth-of-type(10) {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.a span:nth-of-type(11) {
-webkit-animation-delay: 4.1s;
animation-delay: 4.1s;
}
.a span:nth-of-type(12) {
-webkit-animation-delay: 4.2s;
animation-delay: 4.2s;
}
.a span:nth-of-type(13) {
-webkit-animation-delay: 4.3s;
animation-delay: 4.3s;
}
.a span:nth-of-type(14) {
-webkit-animation-delay: 4.4s;
animation-delay: 4.4s;
}
.a span:nth-of-type(15) {
-webkit-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.a span:nth-of-type(16) {
-webkit-animation-delay: 4.6s;
animation-delay: 4.6s;
}
.a span:nth-of-type(17) {
-webkit-animation-delay: 4.7s;
animation-delay: 4.7s;
}
.a span:nth-of-type(18) {
-webkit-animation-delay: 4.8s;
animation-delay: 4.8s;
}
.a span:nth-of-type(19) {
-webkit-animation-delay: 4.9s;
animation-delay: 4.9s;
}
.a span:nth-of-type(20) {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.a span:nth-of-type(21) {
-webkit-animation-delay: 5.1s;
animation-delay: 5.1s;
}
.b span {
display: inline-block;
text-shadow: 0 0 0 whitesmoke;
animation: smoky 5s 8s both reverse;
}
.b span:nth-child(even) {
animation-name: smoky-mirror;
}
@keyframes smoky {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@keyframes smoky-mirror {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
.b span:nth-of-type(1) {
-webkit-animation-delay: 3.1s;
animation-delay: 3.1s;
}
.b span:nth-of-type(2) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
.b span:nth-of-type(3) {
-webkit-animation-delay: 3.3s;
animation-delay: 3.3s;
}
.b span:nth-of-type(4) {
-webkit-animation-delay: 3.4s;
animation-delay: 3.4s;
}
.b span:nth-of-type(5) {
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s;
}
.b span:nth-of-type(6) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
Ovviamente nella mia versione non succede nulla, ecco perchè scrivo qui. Dove sbaglio?
P.S. Ho notato che nel CSS di codepen c'è questo script che nella versione scaricata non ho:
codice:
@for $item from 1 through 21 {
span:nth-of-type(#{$item}){
animation-delay: #{(3 + ($item/10))}s;
}
}
Devo aggiungerlo o è un pezzo in più?