back to top
Enter your search query...
JSGuideSnippet

Slider di Immagini per il Tuo Sito con un Fantastico Effetto Visivo

Se stai cercando un modo per rendere il tuo sito web accattivante e dinamico, uno slider di immagini con effetti sorprendenti potrebbe essere la soluzione perfetta. Questo tipo di slider non solo cattura l’attenzione degli utenti grazie alle sue animazioni fluide, ma trasforma l’esperienza di navigazione in qualcosa di visivamente emozionante. In questo articolo ti mostrerò come creare uno slider di immagini con effetti di transizione impressionanti utilizzando HTML, CSS e JavaScript, per aggiungere quel tocco di classe che farà spiccare il tuo sito.

Cos’è uno Slider di Immagini con Effetti Visivi?

Uno slider di immagini con effetti visivi è un componente interattivo che consente agli utenti di visualizzare una serie di immagini con transizioni fluide e animate. Questo tipo di slider non solo migliora l’aspetto del sito, ma offre anche un’esperienza di navigazione unica, grazie all’uso di animazioni, effetti di sfocatura e design moderni.

Gli slider con effetti visivi sono spesso utilizzati per:

  • Aumentare il coinvolgimento degli utenti, attirando la loro attenzione attraverso animazioni accattivanti.
  • Presentare contenuti visivi in modo creativo, come gallerie di immagini, portfolio di progetti o showcase di prodotti.
  • Creare un’esperienza emozionale utilizzando immagini di grande impatto combinate con descrizioni e pulsanti di chiamata all’azione (CTA).

Creare uno Slider di Immagini con Effetti Visivi

Vediamo ora come implementare uno slider di immagini dinamico e visivamente accattivante utilizzando HTML, CSS e JavaScript.

HTML per lo Slider

Il primo passo è creare il markup HTML per lo slider. Questo esempio mostra la struttura di uno slider di immagini che utilizza effetti avanzati:

<div id="main">
  <div class="container">
    <div class="slide">
      <div class="item" style="background-image: url('immagine1.jpg');">
        <div class="content">
          <div class="name">Immagine 1</div>
          <div class="desc">Questa è la descrizione per la prima immagine dello slider!</div>
          <button>CTA Slider</button>
        </div>
      </div>
      <div class="item" style="background-image: url('immagine1.jpg');">
        <div class="content">
          <div class="name">Immagine 1</div>
          <div class="desc">Questa è la descrizione per la prima immagine dello slider!</div>
          <button>CTA Slider</button>
        </div>
      </div>
      ....
    </div>
    <div class="button">
      <button class="prev" title="Previous"><i class="fa-solid fa-arrow-left"></i></button>
      <button class="next" title="Next"><i class="fa-solid fa-arrow-right"></i></button>
    </div>
  </div>
</div>
  • container: Contiene tutto lo slider, inclusi gli elementi e i pulsanti di navigazione.
  • slide: Raccoglie le varie immagini o “item” dello slider.
  • item: Ogni elemento “item” rappresenta una singola immagine, che può includere del contenuto aggiuntivo come il titolo, la descrizione e un pulsante CTA.
  • prev e next: Pulsanti per scorrere le immagini avanti e indietro.

CSS per l’Effetto Visivo

Il CSS è fondamentale per creare gli effetti visivi dello slider. In questo esempio, utilizziamo animazioni e transizioni per ottenere un effetto coinvolgente:

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
}

.item {
  width: 230px;
  height: 270px;
  position: absolute;
  top: 35%;
  transform: translate(0, -50%);
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  background-size: cover;
  display: inline-block;
  transition: 0.7s ease;
}

.slide .item:nth-child(1),
.slide .item:nth-child(2) {
  top: 0;
  left: 0;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 50px rgba(0, 0, 0, 0.8);
}

.item .content {
  position: absolute;
  top: 85%;
  left: 20px;
  max-width: 600px;
  text-align: left;
  color: #eee;
  transform: translate(0, -50%);
  display: none;
  backdrop-filter: blur(1px) saturate(180%);
  background-color: rgba(27, 34, 48, 0.75);
  border-radius: 15px;
  padding: 20px;
  animation: animate 1s ease-in-out 1 forwards;
}

.item:nth-child(2) .content {
  display: block;
}

@keyframes animate {
  from {
    opacity: 0;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
  • container: Posiziona lo slider al centro della pagina e ne gestisce la dimensione.
  • item: Ogni slide ha un design arrotondato e animazioni fluide per cambiare posizione.
  • content: Il contenuto di ogni slide ha un effetto di sfocatura e un’animazione di comparsa per renderlo più interessante.

JavaScript per l’Interattività dello Slider

Il JavaScript è essenziale per gestire il movimento delle slide, permettendo agli utenti di scorrere tra le immagini.

let next = document.querySelector(".next");
let prev = document.querySelector(".prev");

next.addEventListener('click', function() {
  let items = document.querySelectorAll('.item');
  document.querySelector('.slide').appendChild(items[0]);
});

prev.addEventListener('click', function() {
  let items = document.querySelectorAll('.item');
  document.querySelector('.slide').prepend(items[items.length - 1]);
});
  • next e prev: I pulsanti per navigare attraverso lo slider.
  • appendChild() e prepend(): Funzioni che spostano le slide per creare l’effetto continuo, dando l’impressione di uno slider infinito.

Caratteristiche Speciali dello Slider

  • Effetto Sfocatura e Animazioni: Ogni volta che una nuova immagine viene visualizzata, un effetto di sfocatura combinato con una transizione di opacità rende lo slider elegante e coinvolgente.
  • CTA Integrato: Ogni slide ha un pulsante di chiamata all’azione (CTA) che può essere personalizzato per adattarsi alle esigenze del tuo sito, come promuovere prodotti, servizi o articoli di blog.
  • Design Moderno e Personalizzabile: Con bordi arrotondati e animazioni di movimento, questo slider si adatta perfettamente ai design più moderni.

Miglioramenti e Suggerimenti per l’Uso dello Slider

  • Animazioni Fluenti: Utilizza transizioni fluide per evitare movimenti bruschi. Questo migliora l’esperienza visiva e rende il sito più piacevole.
  • Indicatori di Posizione: Puoi aggiungere indicatori puntuali per aiutare gli utenti a capire in quale slide si trovano.
  • Ottimizzazione del Caricamento: Implementa immagini ottimizzate per migliorare la velocità di caricamento e usa il lazy loading per caricare le immagini solo quando sono visibili.

Conclusione

Uno slider di immagini con effetti visivi ben progettato è una grande aggiunta al tuo sito web, capace di aumentare il coinvolgimento e rendere l’esperienza utente più memorabile. Utilizzando HTML, CSS e JavaScript, puoi creare uno slider che combina eleganza e interattività, catturando l’attenzione degli utenti e mantenendoli coinvolti.

Aggiungi un po’ di magia al tuo sito con questo fantastico slider di immagini e lascia che la tua creatività prenda il volo!

– Codice Completo –
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
        integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <div id="main">
        <div class="container">
            <div class="slide">
                <div class="item"
                    style="background-image: url('immagine1.jpg'); background-size: cover; background-position:center ;">

                    <div class="content">
                        <div class="name">Immagine 1</div>
                        <div class="desc">Questa è la descrizione per la prima immagine dello slider!
                        </div>
                        <button>CTA Slider </button>
                    </div>

                </div>
                <div class="item"
                    style="background-image: url('immagine2.jpg');">

                    <div class="content">
                        <div class="name">Immagine 2</div>
                        <div class="desc">Questa è la descrizione per la seconda immagine dello slider!
                        </div>
                        <button>CTA Slider</button>
                    </div>


                </div>
                <div class="item"
                    style="background-image: url('immagine3.jpg');">

                    <div class="content">
                        <div class="name">Immagine 3</div>
                        <div class="desc">Questa è la descrizione per la terza immagine dello slider!
                        </div>
                        <button>CTA Slider</button>
                    </div>


                </div>
                <div class="item"
                    style="background-image: url('immagine1.jpg'); background-size: cover; background-position:center ;">

                    <div class="content">
                        <div class="name">Immagine 1</div>
                        <div class="desc">Questa è la descrizione per la prima immagine dello slider!
                        </div>
                        <button>CTA Slider </button>
                    </div>

                </div>
                <div class="item"
                    style="background-image: url('immagine2.jpg');">

                    <div class="content">
                        <div class="name">Immagine 2</div>
                        <div class="desc">Questa è la descrizione per la seconda immagine dello slider!
                        </div>
                        <button>CTA Slider</button>
                    </div>


                </div>
                <div class="item"
                    style="background-image: url('immagine3.jpg');">

                    <div class="content">
                        <div class="name">Immagine 3</div>
                        <div class="desc">Questa è la descrizione per la seconda immagine dello slider!
                        </div>
                        <button>CTA Slider</button>
                    </div>


                </div>

            </div>
            <div class="button">
                <button class="prev" title="Previous"><i class="fa-solid fa-arrow-left"></i></button>
                <button class="next" title="Next"><i class="fa-solid fa-arrow-right"></i></button>
            </div>
        </div>
        <script src="script.js"></script>
</body>

<style type="text/css">
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body {
 background-color: white;  
 width: 100%;
 height: 100%;
 position: relative;
 overflow-x:hidden ;
 
}
#main{
    overflow: hidden;
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    height: 90%;
  
    
    
}

.item{
    width: 230px;
    height: 270px;
    position: absolute;
    top: 35%;
    transform: translate(0,-50%);
   
   border-top-right-radius: 50px;
   border-bottom-left-radius: 50px;
    background-size: cover;
    display: inline-block;
    transition: 0.7s ease;

 
}
.slide .item:nth-child(1),
.slide .item:nth-child(2){
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 3px 50px rgba(0, 0, 0, 0.808);
    
}


.slide .item:nth-child(3){
    left: 55%;
    
}
.slide .item:nth-child(4){
    left: calc(55% + 245px);
}
.slide .item:nth-child(5){
    left: calc(55% + 490px);
}

/* here n = 0, 1, 2, 3,... */
.slide .item:nth-child(n + 6){
    left: calc(55% + 735px);
    opacity: 0;
}

.item .content{
    position: absolute;
    top: 85%;
    left: 20px;
    max-width: 600px;
    text-align: left;
    color: #eee;
    transform: translate(0, -50%);
    font-family: system-ui;
    
    display: none;
    backdrop-filter: blur(1px) saturate(180%);
    -webkit-backdrop-filter: blur(1px) saturate(180%);
    background-color: rgba(27, 34, 48, 0.75);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    padding: 20px;
    opacity: 0;
    animation: animate 1s ease-in-out 1 forwards;
}
.item:nth-child(2) .content{
    display: block;
}


.content .name{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: bold;
    white-space: nowrap;
    margin-bottom: 15px;
    opacity: 0;
    animation: animate 1s ease-in-out 0.2s 1 forwards;
}
.content .desc{
    width: 90%;
    opacity: 0;
    animation: animate 1s ease-in-out 0.4s 1 forwards;
}
.content>button{
    padding: 10px 20px;
    margin-top: 25px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    opacity: 0;
    animation: animate 1s ease-in-out 0.6s 1 forwards;
}

@keyframes animate{
    from {
        opacity: 0;
        
        filter: blur(5px);
    }
    to {
        opacity: 1;
        
        filter: blur(0px);
    }
}
.button{
    width: 100%;
    text-align: end;
    position: absolute;
    bottom: 30px;
    right: 3%;
}
.button button{
    padding: 13px 30px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    margin: 0px 5px;
   
}
.button button i {
    font-size: 25px;
    
}
</style>


<script type="text/javascript">
  let next = document.querySelector(".next")
let prev = document.querySelector(".prev")



    


next.addEventListener('click', function(){
    let items = document.querySelectorAll('.item')
    document.querySelector('.slide').appendChild(items[0])
    console.log(items);
})
prev.addEventListener('click', function(){
    let items = document.querySelectorAll('.item')
    document.querySelector('.slide').prepend(items[items.length - 1])
})
</script>
</html>

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.

Condividi

Articoli Recenti

Categorie popolari

AltroJSCSSTipsGuide

Potrebbe interessarti:

© Copyright - CyberAlchimista
Sviluppato da Gioacchino