venerdì 21 febbraio 2025

Corso di CSS & Web Design: 8 – Effetti dinamici e animazioni

8 – Effetti dinamici e animazioni

1. Pseudo-classi CSS

Le pseudo-classi permettono di applicare stili a elementi in stati particolari o in base alla loro posizione nel DOM.

1.1 :hover

Applica stili quando il mouse passa sopra l’elemento.

button:hover {
  background-color: #4fa3f2;
  color: white;
}

1.2 :focus

Applicato quando un elemento riceve il focus, ad esempio un input.

input:focus {
  border-color: #4fa3f2;
  outline: none;
}

1.3 :nth-child()

Seleziona elementi in base alla loro posizione.

li:nth-child(odd) {
  background-color: #f2f2f2; /* elementi dispari */
}

li:nth-child(3) {
  color: red; /* terzo elemento */
}

2. Transizioni e trasformazioni

2.1 Transform

Permette di modificare la posizione, dimensione o inclinazione di un elemento.

.box:hover {
  transform: scale(1.1);       /* ingrandisce */
  transform: rotate(10deg);    /* ruota */
  transform: translateX(20px); /* sposta orizzontalmente */
}

2.2 Transition

Definisce l’animazione fluida tra due stati.

.box {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

Significato:
- 0.3s → durata della transizione
- ease → tipo di accelerazione
- Possibile: linear, ease-in, ease-out, ease-in-out

3. Animazioni con @keyframes

Permettono di creare movimenti complessi e ripetitivi.

3.1 Sintassi di base

@keyframes esempioAnimazione {
  0%   { transform: translateX(0); background-color: red; }
  50%  { transform: translateX(50px); background-color: yellow; }
  100% { transform: translateX(0); background-color: red; }
}

.elemento {
  animation: esempioAnimazione 2s infinite ease-in-out;
}

Proprietà principali:
- animation-name
- animation-duration
- animation-iteration-count (numero di ripetizioni o infinite)
- animation-timing-function (ease, linear, etc.)
- animation-delay

4. Creazione di pulsanti interattivi

Esempio Pulsante Hover

button {
  padding: 12px 25px;
  font-size: 16px;
  background-color: #4fa3f2;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  transform: scale(1.1);
  background-color: #357abd;
}

Risultato: pulsante che cresce e cambia colore al passaggio del mouse.

5. Esercizio svolto: animare un menu a comparsa

Obiettivo

Creare un menu laterale che compare e scompare con animazione fluida.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Menu Animato</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <button id="menu-btn">☰ Menu</button>
  <nav class="side-menu">
    <a href="#">Home</a>
    <a href="#">Servizi</a>
    <a href="#">Contatti</a>
  </nav>

  <script>
    const btn = document.getElementById('menu-btn');
    const menu = document.querySelector('.side-menu');
    btn.addEventListener('click', () => {
      menu.classList.toggle('active');
    });
  </script>
</body>
</html>

CSS (stile.css)

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

/* Bottone menu */
#menu-btn {
  padding: 10px 15px;
  font-size: 18px;
  cursor: pointer;
}

/* Menu laterale */
.side-menu {
  position: fixed;
  top: 0;
  left: -250px; /* nascosto fuori schermo */
  width: 250px;
  height: 100%;
  background-color: #333;
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  transition: left 0.3s ease;
}

.side-menu a {
  color: white;
  text-decoration: none;
  padding: 15px 20px;
  transition: background-color 0.3s;
}

.side-menu a:hover {
  background-color: #4fa3f2;
}

/* Menu attivo */
.side-menu.active {
  left: 0; /* compare */
}

Risultato

Bottone ☰ che attiva il menu laterale.
Menu scorre dentro e fuori con animazione fluida.
Link interattivi con effetto hover.

SILICIO E NUVOLE