Il progetto di oggi è divertente. Stiamo costruendo un cursore standard per le immagini CSS con una svolta: l'area dell'immagine visibile sarà divisa in quattro sezioni distinte, ciascuna con un messaggio nascosto che viene rivelato quando l'utente si posiziona su di esso.
L'effetto finale è davvero fantastico e penso che ti piacerà molto. Lungo la strada giocheremo con alcune animazioni, transizioni, contesti di posizionamento e molto altro ancora. Immergiti e inizia!
Sbirciata
Se desideri dare un'occhiata al prodotto finito prima di costruirlo, controlla il link sottostante.
demo: Clicca qui per avviare la demo dal vivo.
Puntelli a? Come rotoli?
La mia ispirazione per il tutorial di oggi viene dal sushi dove ho intenzione di cenare stasera. Mi sono fermato dal loro sito Web per le indicazioni e volevo subito vedere se potevo replicare l'effetto sulla home page. Il ristorante si chiama How Do You Roll, sentiti libero di dare un'occhiata al loro fantastico sito.
HTML
Iniziamo questo progetto! Come sempre, la prima cosa che vogliamo fare è delineare la nostra struttura HTML di base. Questo dispositivo di scorrimento comprende una grande area dell'immagine divisa in quattro colonne verticali. Di conseguenza, richiediamo un div wrapper con un cursore? classe e quattro div interne, ognuna con un? pannello? classe.
Questa è la nostra struttura di base, ma dobbiamo ridimensionarla un po 'con un po' di contenuto. Voglio che ciascun pannello funga sia da fonte di informazione sia da collegamento. Quindi l'utente dovrebbe essere in grado di passare il mouse, vedere di cosa tratta il pannello e fare clic per passare a una pagina diversa. Per fare ciò, inseriremo un h2 e un paragrafo e avvolgeremo l'intera cosa dang in un'ancora. Sembra un modo strano di usare un ancoraggio, ma è perfettamente valido in HTML5.
Ora che abbiamo una struttura generale e la formazione del pannello individuale, abbiamo messo tutto insieme e abbiamo tutto l'HTML che ci servirà per questo progetto.
Stili di partenza
Per dare il via al nostro CSS, prendiamo un po 'di roba generica. Per prima cosa ho lanciato un piccolo reset universale per farci stare tutti sulla stessa pagina. Sostituiscilo con una tecnica di ripristino o normalizzazione migliore se stai usando questo in un progetto reale.
Ho anche aggiunto una texture di sfondo e ripristinato gli stili di collegamento per il cursore, solo per buona misura.
Cursore CSS
Ora è il momento di modellare il cursore slider. In sostanza, vogliamo impostare una dimensione specifica per esso, quindi dargli un'immagine di sfondo della stessa dimensione. Quindi aggiungeremo dei margini per centrarlo, un po 'di raggio di bordo per arrotondare gli angoli e un'ombra di riquadri per allontanarlo un po' dallo sfondo.
La cosa più importante che potresti perdere in questo chunk è l'overflow: auto line. Questo è importante perché vogliamo che i nostri pannelli assumano l'effetto angolo arrotondato che applichiamo al div del cursore genitore.
Controllo avanzamento
A questo punto, dovresti avere un'immagine grande con angoli arrotondati e un'ombreggiatura insieme a un mucchio di testo brutto e disordinato, che risolviamo nel prossimo passaggio!
Panel CSS
Il nostro contenitore del cursore è nitido, ora è il momento di mettere in ordine i pannelli. Dato che il nostro contenitore è 800px per 400px, ogni pannello deve essere impostato su 200px per 400px, il che significa che ciascun pannello occuperà l'intera altezza e un quarto della larghezza. Da lì abbiamo solo bisogno di spostarli a sinistra e si allineano proprio come vogliamo.
La parte interessante qui è che ho impostato il colore e lo sfondo in trasparenza, il che rende i pannelli invisibili. Questo perché vogliamo solo che vengano visualizzati al passaggio del mouse. Lo stato predefinito dovrebbe essere nascosto.
Il passo finale qui è quello di aggiungere il CSS per una transizione in modo che i pannelli svaniscano in posizione quando l'utente si libra. Si noti che in realtà ho dichiarato due transizioni separate separate da una virgola (una per il colore e una per il colore di sfondo).
Tipografia del pannello
Quindi, è il momento di ordinare la tipografia. Certo, non l'ho fatto con i pannelli impostati come invisibili, ma invece ho dato un colore agli elementi, li ho stilizzati e poi li ho riportati indietro.
Assicurati di stile sia il paragrafo che l'h2. Ho reso l'intestazione grande, audace e spostato dall'alto verso il basso un po '. Sia l'intestazione che il paragrafo ottengono anche una larghezza impostata di 150 px, il che rende facile centrarli nello spazio nonostante l'allineamento a sinistra.
Pannello al passaggio del mouse
Quando l'utente si posiziona su uno dei nostri pannelli, voglio che diventi nuovamente visibile. Lo faccio dando allo sfondo e al testo un colore. Ho impostato lo sfondo su nero, con un po 'di trasparenza per mostrare l'immagine sottostante e il paragrafo su bianco.
Controllo avanzamento
Ora dovresti avere pannelli completamente funzionanti! Se questo è tutto ciò che stavi cercando, puoi fermarti qui, senza ulteriori lavori necessari. Anche senza il prossimo passo, è ancora un grande effetto.
Animare lo sfondo
Questo ultimo passaggio è completamente facoltativo, e tieni presente che non funzionerà affatto sui browser più vecchi, ma l'ispirazione originale per questo pezzo aveva uno slider dell'immagine sullo sfondo. Abbiamo un'immagine statica là dietro e ora torneremo indietro e l'animeremo.
Per fare ciò, dobbiamo tornare al blocco di dichiarazione del cursore e aggiungere alcune cose. Per i principianti, trasforma il tuo sfondo singolo in quattro immagini di sfondo, l'ultima è uguale alla prima, quindi tutto scorre lentamente.
Quindi, assicurarsi di impostare le immagini di sfondo in modo che non abbiano ripetizioni e copiare i valori di posizione mostrati di seguito, che allineano le immagini in una lunga riga orizzontale.
Come puoi vedere, ho anche inserito l'animazione CSS. Prima nominiamo la nostra animazione (cursore), quindi impostiamo la durata e il numero di iterazioni. Per completare l'intero progetto, è necessario definire in che modo l'animazione funzionerà con i fotogrammi chiave. Il codice per questo è confuso quindi descriviamo ogni passaggio.
- Fase uno: prima immagine di sfondo visibile
- Passaggio 2: sposta tutto a sinistra 800 px, la seconda immagine di sfondo visibile
- Passaggio 3: sposta tutto a sinistra 800 px, la terza immagine di sfondo visibile
- Passaggio quattro: sposta tutto a sinistra 800 px, la quarta immagine di sfondo visibile (che è la stessa della prima immagine)
Per dividere ciò, dobbiamo iniziare dallo 0% e terminare al 100%, il che lascia due passaggi in mezzo. La soluzione facile è fare i passaggi due e tre al 33% e al 66%. La matematica non è perfetta, ma è abbastanza vicina. Nota come le immagini si muovono ogni volta, portando in vista lo sfondo successivo.
- 0%: background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 33% background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 66%: background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 100%: background-position: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
Ora, questo da solo farà in modo che lo slideshow si muova costantemente, cosa che non vogliamo. Quello che vogliamo invece è che ogni diapositiva rimanga ferma per alcuni secondi prima di avanzare. Ciò si ottiene aggiungendo alcuni passaggi ridondanti in modo che le diapositive non avanzino fino al 10% prima del passaggio successivo.
- 0%: background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 23%: background-position: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
- 33% background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 56% background-position: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
- 66%: background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 90%: background-position: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
- 100%: background-position: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;
Ora che abbiamo elaborato l'outlined, possiamo farlo accadere con i CSS. Ciò richiede un sacco di codice per i vari browser, ma è l'unico modo in cui possiamo farcela, quindi dovremo solo conviverci.
Guardalo in azione!
Abbiamo finito! Ora è il momento di dare un ultimo sguardo alla demo.
demo: Clicca qui per avviare la demo dal vivo.
Conclusione
Spero che ti sia divertito a costruire questo simpatico slider tanto quanto me. Adoro come rappresenti un leggero ritocco su una vecchia idea. È abbastanza pratico e ti permette davvero di portare i tuoi cursori un passo avanti.
Lascia un commento qui sotto e facci sapere cosa ne pensi. Hai visto un cursore diviso in questo modo prima? Come faresti meglio?