Queste card interattive hanno un effetto che permette di mettere in evidenza la card toccata/cliccata, spostandola sulla sinistra. Le rimanenti card vengono posizionate invece sulla destra e con un click possiamo mettere in evidenza anche una di queste. Cliccando invece sulla card in evidenza, le card tornano allo stato iniziale.
Card 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card 2
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Card 3
Sed sagittis felis vitae purus congue euismod.
Card 4
Aenean feugiat velit at ante rhoncus, non faucibus tortor facilisis.
Una funzione davvero interessante di queste card, è la possibilità di utilizzare gli ultimi post di WordPress, mostrando titolo, estratto del contenuto e immagine. Ovviamente possono essere utilizzate anche con testo personalizzato e per questo motivo in questo post è presente un tasto per verificare entrambe le funzioni.
Ovviamente è sconsigliato utilizzarlo in questo modo, difatti il codice viene ceduto senza alcuno switch, ma già pronto per funzionare con i post WordPress. Per rimuovere questa funzione e utilizzarlo soltanto con testo e immagini personalizzati, è sufficiente commentare il secondo script o eliminarlo. Pronto anche per funzionare con 2 diverse visualizzazioni delle immagini: rettangolare a grandezza contenitore o cerchio, come mostrato nell’esempio. Dunque sarà sufficiente utilizzare una delle 2 classi nel codice HTML.
Le posizioni di immagini, testi e bottoni possono essere ovviamente modificate, basta una minima conoscenza di HTML e CSS. Lo script è ideato per funzionare con 4 card, non funzionerà aggiungendone altre.
Realizzato in HTML e Javascript, funziona in qualsiasi pagina ed è compatibile con Elementor
Personalizzazione
Per visualizzare i post di WordPress è sufficiente impostare il link del proprio sito e che siano attive le REST API (attive di default)
var apiUrl = 'https://TUOSITO.it/wp-json/wp/v2/posts?per_page=4&_embed&orderby=date&order=desc';
Per cambiare colore, cambia il codice di ogni card o rimuovilo completamente se vuoi un colore unico per tutte le card
.card.card1 {
background-color: #003d80;
}
.card.card2 {
background: #003166;
}
.card.card3 {
background-color: #00254d;
}
.card.card4 {
background-color: #001833;
}
.card {
background-color: #001833; /*Se rimuovi i colori dalle singole card, verrà applicato da qui uguale per tutte*/
}
Puoi personalizzare o rimuovere gli sfondi di background dagli angoli attraverso questo codice
.card::after {
codice qui - rimuovi tutto per eliminare lo sfondo
}
.card::before {
codice qui - rimuovi tutto per eliminare lo sfondo
}
Per quanto riguarda le immagini, utilizza le seguenti classi: imm e round imm. La prima mostra l’immagine rettangolare, la seconda un’immagine rotonda – puoi personalizzarle ulteriormente tramite CSS. Tra “” di search usa invece il link dell’immagine che vuoi mostrare (se utilizzi contenuti tuoi) o lascialo vuoto se non vuoi mostrare nessuna immagine o se utilizzi lo script per mostrare i contenuti WordPress; in questo modo verrà catturata automaticamente.
...
<div class="card card1">
<div class="card-content">
<h2 class="title">Card 1</h2>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img decoding="async" src="" alt="" class="imm">
<button class="bttn">Pulsante</button>
</div>
</div>
<div class="card card2">
<div class="card-content">
<h2 class="title">Card 2</h2>
<p class="paragraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<img decoding="async" class="round imm" src="link immagine" />
</div>
</div>
...
