Crea un Fantastico Effetto Accordion con Immagini per il Tuo Sito Web

Un design elegante e interattivo può fare la differenza tra un sito web comune e uno che cattura veramente l’attenzione dell’utente. Un esempio perfetto di come raggiungere questo obiettivo è l’implementazione di un effetto accordion basato su immagini. Questo tipo di effetto permette di gestire in modo intelligente una serie di immagini, fornendo un’interazione dinamica e fluida che valorizza ogni contenuto al momento giusto. In questa guida approfondita, vedremo come creare un accordion con immagini utilizzando HTML, CSS e JavaScript, per aggiungere un tocco di modernità e un’interattività accattivante al tuo sito web.

Obiettivo dell’Effetto Accordion con Immagini

L’accordion con immagini permette di mostrare una serie di immagini in un formato compatto, espandendo quella selezionata per dare maggiore risalto ai dettagli del contenuto. È un approccio intelligente per gestire lo spazio disponibile, ottimizzando l’esperienza utente su pagine di portfolio, selettori di contenuti, o semplicemente per migliorare la presentazione visiva di qualsiasi contenuto.

L’obiettivo di questo effetto è quello di rendere più interattivo e coinvolgente il modo in cui gli utenti esplorano un insieme di immagini, aggiungendo un feedback visivo che guida l’attenzione verso l’immagine di interesse. Questo permette di trasformare una semplice galleria di immagini in un componente accattivante, in grado di arricchire l’esperienza dell’utente.

Come Costruire l’Effetto Accordion: Analisi del Codice

Vediamo insieme le varie parti del codice e il loro ruolo, spiegando ogni passaggio e il perché delle scelte implementative.

Struttura HTML: Definiamo la Base dell’Accordion

La parte HTML fornisce la struttura di base per il nostro accordion. Ogni sezione dell’accordion è rappresentata da un <button> che contiene un’immagine e un contenuto descrittivo:

<section class="accordion">
  <button class="accordion-item" onClick="handleClick(this, 0)">
    <img src="1.jpg" />
    <div class="content">
      <span class="material-symbols-outlined">photo_camera</span>
      <div>
        <h2>Prima</h2>
        <p>Lorem Ipsum</p>
      </div>
    </div>
  </button>
  <!-- Altri elementi seguono con struttura simile -->
</section>
<script type="text/javascript" src="main.js"></script>

• <section class="accordion">: Questo elemento rappresenta il contenitore principale che include tutti gli elementi dell’accordion. Utilizzando un <section>, diamo semantica alla struttura, rendendo chiaro che si tratta di un gruppo omogeneo di contenuti.
• <button class="accordion-item">: Ogni item dell’accordion è un bottone che contiene un’immagine e del contenuto. L’uso di un button non è casuale: i bottoni sono naturalmente cliccabili e accessibili, migliorando l’usabilità per tutti i tipi di utenti, compresi quelli che usano tastiere per navigare.
• Contenuto interno (<div class="content">): Ogni bottone contiene un’immagine (<img>) e un’area di contenuto aggiuntivo, visibile solo quando la card è espansa. Questo contenuto include un’icona e un titolo che offre un contesto all’immagine selezionata.

JavaScript: Gestione dell’Interattività dell’Accordion

Passiamo al JavaScript che gestisce la logica di interazione per l’accordion. Vediamo in dettaglio il codice:

const items = document.querySelectorAll(".accordion-item");

const resetItems = () => {
  items.forEach((item) => item.classList.remove("active"));
};

const handleClick = (element, index) => {
  resetItems();
  element.classList.add("active");
  localStorage.setItem("accordionIndex", index);
};

resetItems();

const activeItem = items[localStorage.getItem("accordionIndex")];
if (activeItem) {
  activeItem.classList.add("active");
} else {
  items[0].classList.add("active");
}

• Selezione degli Elementi (document.querySelectorAll): Selezioniamo tutte le card (.accordion-item) e le immagazziniamo in una variabile chiamata items. Questo ci permette di applicare delle operazioni su tutte le card, come resettarle o gestire la loro visibilità.
• Funzione resetItems(): La funzione resetItems() rimuove la classe active da tutti gli elementi dell’accordion. Questa classe viene utilizzata per determinare quale item è attualmente espanso, quindi resettare tutti gli elementi è necessario prima di attivarne uno nuovo.
• Funzione handleClick(): Quando un utente clicca su una card, handleClick() viene richiamata e fa quanto segue:
• Chiama resetItems() per chiudere tutte le card.
• Aggiunge la classe active all’elemento cliccato, espandendo la card selezionata.
• Memorizza l’indice della card attiva in Local Storage, in modo da mantenere la card attiva anche dopo un eventuale aggiornamento della pagina.
• Memorizzazione Stato con Local Storage: Usare Local Storage è una scelta strategica che garantisce che l’esperienza dell’utente sia continua anche dopo il refresh della pagina. Questo approccio è particolarmente utile in un contesto dove il mantenimento della selezione migliora l’usabilità.

CSS: Stile e Dinamismo

Il CSS contribuisce a rendere accattivante e dinamico il comportamento dell’accordion:

body {
  height: 100vh;
  margin: 0;
  display: grid;
  background: #010101;
  place-items: center;
  font-family: "Euclid Circular A", "Poppins";
}

.accordion {
  display: flex;
  cursor: pointer;
  width: 100%;
  height: 90vw;
  max-height: 600px;
  overflow: hidden;
}

.accordion-item {
  width: 10%;
  height: 100%;
  opacity: 0.5;
  transition: 0.5s;
}

.accordion-item.active {
  width: 60%;
  opacity: 1;
}

.accordion-item .content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
}

.accordion-item.active .content {
  opacity: 1;
  visibility: visible;
}

• Stile Generale del Corpo (body): La pagina è disposta al centro verticalmente e orizzontalmente. Questo rende il design semplice ed efficace, senza distrazioni.
• Contenitore dell’Accordion (.accordion): Utilizziamo display: flex per disporre le card in una fila orizzontale. In questo modo, tutte le immagini sono visibili allo stesso tempo, ma in forma compatta.
• Card dell’Accordion (.accordion-item):
• Inizialmente, le card sono strette (width: 10%) e semi-trasparenti (opacity: 0.5), per far capire visivamente che non sono attive.
• Quando una card viene cliccata ed è attiva (.accordion-item.active), la larghezza viene portata a 60%, espandendo la card selezionata per dare enfasi.
• Contenuto della Card (.content): Ogni card contiene una descrizione, inizialmente nascosta (opacity: 0; visibility: hidden). Quando la card diventa attiva, la descrizione appare con una transizione graduale, rendendo l’esperienza utente più fluida.

Conclusione: Dove e Perché Usare Questo Effetto Accordion?

L’accordion con immagini è un componente versatile che può essere utilizzato in diversi contesti:

1. Portfolio Creativi: Designer e fotografi possono usare questo effetto per mostrare progetti e foto in modo interattivo e accattivante, evidenziando un’immagine alla volta.
2. Presentazione di Prodotti: Per i siti di e-commerce, un accordion con immagini può essere utilizzato per presentare prodotti e far emergere dettagli aggiuntivi solo quando richiesto dall’utente.
3. Landing Page: Gli effetti accordion possono essere utilizzati nelle landing page per presentare contenuti dinamici, senza appesantire il layout.

L’utilizzo di un effetto accordion non solo ottimizza lo spazio della pagina, ma rende anche l’interfaccia più interattiva e moderna, migliorando l’esperienza utente. La combinazione di HTML, CSS e JavaScript crea una soluzione flessibile, leggera e altamente funzionale, ideale per chi cerca di aggiungere valore estetico e funzionale al proprio progetto web.

Ricorda, i piccoli dettagli come questi fanno la differenza tra un sito qualsiasi e un sito che lascia un’impressione duratura sui tuoi visitatori. Rendiamo il web più dinamico, un accordion alla volta! 😊

Hai trovato utile questa guida? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.