Lezione 7

Lezione 7 – Animazioni JavaScript: Dai Vita alle Tue Pagine Web 🕺✨

Benvenuto alla Lezione 7! Ora che hai padroneggiato la manipolazione del DOM, è il momento di aggiungere un po’ di magia. Gli elementi statici sono utili, certo, ma quelli in movimento? Ecco dove inizia il vero divertimento! Trasformiamo il tuo progetto DOM_Project in un capolavoro dinamico e vivace!

Cosa Sono le Animazioni JavaScript? 🌀

Le animazioni JavaScript sono come insegnare ai tuoi elementi web a ballare. Vuoi che un pulsante faccia un piccolo salto di gioia quando qualcuno ci passa sopra? O che un popup entri scivolando come se avesse un annuncio importante? Con JavaScript puoi animare proprietà come posizione, dimensione, colore e molto altro.

Pensa a questo come a dare alla tua pagina web una personalità unica: frizzante, divertente e indimenticabile.

Prepariamo il Progetto 🛠️

Utilizziamo il tuo progetto DOM_Project esistente.

Naviga nella tua cartella del progetto:
```
cd DOM_Project
```

Crea o aggiorna il file index.html: Usa il seguente codice come base per il tuo file index.html:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animazioni JavaScript</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }
        #box {
            width: 100px;
            height: 100px;
            background-color: teal;
            margin: 50px auto;
            position: relative;
        }
        button {
            padding: 10px 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Parco Giochi delle Animazioni JavaScript 🎢</h1>
    <div id="box"></div>
    <button id="move-btn">Muovilo!</button>
    <button id="bounce-btn">Rimbalza!</button>
    <button id="fade-btn">Dissolvi!</button>
    <script src="script.js"></script>
</body>
</html>

Aggiungi il file script.js: Crea o aggiorna il file script.js con il seguente codice:

const box = document.getElementById("box");
const moveBtn = document.getElementById("move-btn");
const bounceBtn = document.getElementById("bounce-btn");
const fadeBtn = document.getElementById("fade-btn");

// Muovi il box
moveBtn.addEventListener("click", () => {
    let position = 0;
    const interval = setInterval(() => {
        if (position >= 300) {
            clearInterval(interval);
        } else {
            position++;
            box.style.left = position + "px";
        }
    }, 5);
});

// Fai rimbalzare il box
bounceBtn.addEventListener("click", () => {
    let position = 0;
    let direction = 1;
    const interval = setInterval(() => {
        if (position >= 300 || position <= 0) {
            direction *= -1;
        }
        position += direction * 5;
        box.style.top = position + "px";
    }, 20);
});

// Dissolvi il box
fadeBtn.addEventListener("click", () => {
    let opacity = 1;
    const interval = setInterval(() => {
        if (opacity <= 0) {
            clearInterval(interval);
            box.style.display = "none";
        } else {
            opacity -= 0.05;
            box.style.opacity = opacity;
        }
    }, 50);
});

Testiamo le Tue Animazioni 🧪

Servi il tuo progetto con Caddy:
```
caddy file-server --listen :8080
```
Apri il browser e vai su http://localhost:8080.
Interagisci con i pulsanti:
- Muovilo!: Guarda il box scivolare verso destra come se fosse in missione segreta.
- Rimbalza!: Divertiti mentre rimbalza come se fosse su un trampolino.
- Dissolvi!: Saluta il box mentre scompare drammaticamente.

Ricarica con Ctrl + F5 🔄

A volte i browser sono un po’ troppo affezionati alla cache. Usa Ctrl + F5 per forzare il caricamento delle ultime modifiche.

E Adesso?

Ottimo lavoro! Hai aggiunto un po’ di brio alla tua pagina web con le animazioni. Nella prossima lezione esploreremo librerie JavaScript avanzate come GSAP, per creare animazioni ancora più fluide e incredibili.

Ci vediamo in Lezione 8 – Animazioni Avanzate: Movimenti Eleganti con le Librerie JavaScript!

Ora vai e anima le tue pagine web come un professionista. Ma ricorda: con un grande potere di animazione arriva una grande responsabilità (non trasformare il tuo sito in un luna park)! 🎨✨

JavaScript Animazioni Sviluppo Web