DOMANDA Animazioni in Viewport!

Cotrox

Utente Attivo
225
7
Salve ragazzi, è da tempo che non provo a fare qualcosa usando HTML/CSS di cui ho una minima conoscenza... oltretutto comincio con il dire che non conosco nulla di javascript.. ma mi incuriosiva capire come funzionasse l'animazione allo scroll di siti come apple... così dopo varie ricerche ho aperto un piccolo file sul PC per provare il sistema...
Le animazioni sono riuscito a inserirle dopo aver scaricato la libreria di animazioni di Daniel Eden , tuttavia non sono riuscito a far funzionare la funzione "viewport" ( o almeno credo sia questa ), -> per intenderci: l'animazione dovrebbe iniziare solo quando si usa lo scroll e l'elemento è visibile sullo schermo.

Qualcuno di voi saprebbe darmi una mano?

ECCO IL CODICE SU CUI MI STO ESERCITANDO
HTML:
<!-- INIZIO ESERCITAZIONE -->

<html>
 <head>
   <title>CTR Design</title> <!-- Nome della Pagina -->
   <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Animazioni allo Scorrere-->
   <link rel="stylesheet" href="C:\Users\peppe\Desktop\Esercitazione%20in%20HTML\animate.css-master\animate.min.css"> <!-- Collegamento con foglio dello stile CSS -->
  </head>

 <body>
  <header>HEADER</header>

  <nav>NAV</nav>

  <article>

    <section style="background-color: red; padding: 15px; border-radius: 20px">
      <p class="animated bounceInLeft"><b>SECTION OF AN ARTICLE</b>
      <br><b>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor
      <br>Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum
      <br>Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</b></p>
    </section>

    <section style="background-color: red; padding: 15px; border-radius: 20px">
      <p class="animated bounceInLeft"><b>SECTION OF AN ARTICLE</b>
      <br><b>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor
      <br>Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum
      <br>Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</b></p>
    </section>

    <section style="background-color: red; padding: 15px; border-radius: 20px">
      <p class="animated bounceInLeft"><b>SECTION OF AN ARTICLE</b>
      <br><b>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor
      <br>Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum
      <br>Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</b></p>
    </section>

    <section style="background-color: red; padding: 15px; border-radius: 20px">
      <p class="animated rotateInUpLeft"><b>SECTION OF AN ARTICLE</b>
      <br><b>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor
      <br>Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum
      <br>Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</b></p>
    </section>

    <section style="background-color: red; padding: 15px; border-radius: 20px">
      <p class="animated zoomInLeft"><b>SECTION OF AN ARTICLE</b>
      <br><b>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor
      <br>Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum
      <br>Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</b></p>
    </section>

    <section style="background-color: red; padding: 15px; border-radius: 20px">
      <p class="animated lightSpeedIn delay 12s"><b>SECTION OF AN ARTICLE</b>
      <br><b>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor
      <br>Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum
      <br>Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</b></p>
    </section>

    <section style="background-color: red; padding: 15px; border-radius: 20px">
      <p class="animated flipInX"><b>SECTION OF AN ARTICLE</b>
      <br><b>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor
      <br>Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum
      <br>Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</b></p>
    </section>

    <section style="background-color: red; padding: 15px; border-radius: 20px">
      <p class="animated fadeInRight"><b>SECTION OF AN ARTICLE</b>
      <br><b>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor
      <br>Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum
      <br>Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</b></p>
    </section>

    <section style="background-color: red; padding: 15px; border-radius: 20px">
      <p class="animated shake"><b>SECTION OF AN ARTICLE</b>
      <br><b>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor
      <br>Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum
      <br>Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</b></p>
    </section>

    <section style="background-color: red; padding: 15px; border-radius: 20px">
      <p class="animated jackInTheBox"><b>SECTION OF AN ARTICLE</b>
      <br><b>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor
      <br>Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum
      <br>Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</b></p>
    </section>

    <section>
    SECTION OF AN ARTICLE
    </section>

  </article>

  <aside>ASIDE</aside>

  <footer>FOOTER</footer>

</body>

</html>
Post unito automaticamente:

up
 
Ultima modifica:

Cotrox

Utente Attivo
225
7
Raga avrei davvero bisogno di aiuto, sono fermo perchè vorrei risolvere il problema prima di andare avanti con il codice...
 

Entra

oppure Accedi utilizzando
Discord Ufficiale Entra ora!

Discussioni Simili