Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Modificare animazione testo

  1. #1

    Modificare animazione testo

    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>&nbsp;</span><span>S</span><span>m</span><span>o</span><span>k</span><span>y</span><span>&nbsp;</span><span>T</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</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ù?
    Ultima modifica di Utonto Tonto; 26-01-2018 a 12:03
    Devo pensarci...

  2. #2
    Risolto!

    Ci ho messo due giorni ma ce l'ho fatta da solo.
    Devo pensarci...

  3. #3
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,609
    facci sapere come

  4. #4
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    facci sapere come
    In realtà era più semplice di quel che sembrava solo che lo snippet originale è fatto un pò male secondo me e quindi ho impiegato un pò a capirlo.

    L'HTML e il CSS modificato per il mio sito:

    codice HTML:
    <header>
            <div class="h1a">
                <span>I</span><span>t</span><span>a</span><span>l</span><span>i</span><span>a</span><span>&nbsp;</span><span>&amp;</span><span>&nbsp;</span><span>d</span><span>&nbsp;</span><span>&#39;</span><span>I</span><span>n</span><span>t</span><span>o</span><span>r</span><span>n</span><span>i</span>
            </div>
            <div class="h1b">
                <span>U</span><span>m</span><span>b</span><span>r</span><span>i</span><span>a</span>
            </div>
        </header>

    codice:
    header {
        position: relative;
        height: 400px;
        background-image: url(../images/header.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        box-shadow: 2px 2px 5px gray;
    }
    
        /*-- Start header animation --*/
        
    .h1a, .h1b {
        position: relative;
        text-align: center;
        backface-visibility: hidden;
    }
    
    .h1a span {
        display: inline-block;
        position: relative;
        top: 50px;
        font-size: 200px;
        font-weight: bold;
        color: gold;
        text-shadow: 1px 1px 10px gray;
        animation: smoky 5s 3s both;
    }
    
    .h1b span {
        display: inline-block;
        position: relative;
        bottom: 150px;
        font-size: 200px;
        font-weight: bold;
        color: gold;
        text-shadow: 1px 1px 10px gray;
        animation: smoky 5s 3s both reverse;
    }
    
    .h1a span:nth-child(even), .h1b span:nth-child(even) {
        animation-name: smoky-mirror;
    }
    
    @keyframes smoky {
      60% {
        text-shadow: 0 0 40px gray;
      }
      to {
        transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
        text-shadow: 0 0 20px gray;
        opacity: 0;
      }
    }
    
    @keyframes smoky-mirror {
      60% {
        text-shadow: 0 0 40px gray;
      }
      to {
        transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
        text-shadow: 0 0 20px gray;
        opacity: 0;
      }
    }
    
    .h1a span:nth-of-type(1) {
      animation-delay: 3.1s;
    }
    
    .h1a span:nth-of-type(2) {
      animation-delay: 3.2s;
    }
    
    .h1a span:nth-of-type(3) {
      animation-delay: 3.3s;
    }
    
    .h1a span:nth-of-type(4) {
      animation-delay: 3.4s;
    }
    
    .h1a span:nth-of-type(5) {
      animation-delay: 3.5s;
    }
    
    .h1a span:nth-of-type(6) {
      animation-delay: 3.6s;
    }
    
    .h1a span:nth-of-type(7) {
      animation-delay: 3.7s;
    }
    
    .h1a span:nth-of-type(8) {
      animation-delay: 3.8s;
    }
    
    .h1a span:nth-of-type(9) {
      animation-delay: 3.9s;
    }
    
    .h1a span:nth-of-type(10) {
      animation-delay: 4s;
    }
    
    .h1a span:nth-of-type(11) {
      animation-delay: 4.1s;
    }
    
    .h1a span:nth-of-type(12) {
      animation-delay: 4.2s;
    }
    
    .h1a span:nth-of-type(13) {
      animation-delay: 4.3s;
    }
    
    .h1a span:nth-of-type(14) {
      animation-delay: 4.4s;
    }
    
    .h1a span:nth-of-type(15) {
      animation-delay: 4.5s;
    }
    
    .h1a span:nth-of-type(16) {
      animation-delay: 4.6s;
    }
    
    .h1a span:nth-of-type(17) {
      animation-delay: 4.7s;
    }
    
    .h1a span:nth-of-type(18) {
      animation-delay: 4.8s;
    }
    
    .h1a span:nth-of-type(19) {
      animation-delay: 4.9s;
    }
    
    .h1b span:nth-of-type(1) {
      animation-delay: 3.1s;
    }
    
    .h1b span:nth-of-type(2) {
      animation-delay: 3.2s;
    }
    
    .h1b span:nth-of-type(3) {
      animation-delay: 3.3s;
    }
    
    .h1b span:nth-of-type(4) {
      animation-delay: 3.4s;
    }
    
    .h1b span:nth-of-type(5) {
      animation-delay: 3.5s;
    }
    
    .h1b span:nth-of-type(6) {
      animation-delay: 3.6s;
    }
    
        /*-- End header animation --*/
    Devo pensarci...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.