Come creare un dispositivo di scorrimento del contenuto solo CSS3 completamente funzionale

Gli slider dei contenuti sono un ottimo modo per rendere più dinamico un sito web. Aggiungono stile e, se usati correttamente, potrebbero fare la differenza tra un acquisto e un pulsante Indietro. Normalmente, sarebbero costruiti con jQuery o qualche altra libreria Javascript. Tuttavia, con l'avvento dei CSS3, ti mostrerò come costruirne uno usando solo CSS.

Il risultato non sarà la cosa più semantica mai realizzata, ma sarà comunque completamente funzionale.

Alcuni semplici HTML per cominciare

		

			
			

			

			

			

			

			

			
			

				

					
					

						
Pagina 1

						
Lorem ipsum dolor sit amet, consectur qualunque bla.

					

				

				

					
					

						
Pagina 2

						
Lorem ipsum dolor sit amet, consectur qualunque bla.

					

				

				

					
					

						
Pagina 3

						
Lorem ipsum dolor sit amet, consectur qualunque bla.

					

				

				

					
					

						
Pagina 4

						
Lorem ipsum dolor sit amet, consectur qualunque bla.

					

				

				

					
					

						
Pagina 5

						
Lorem ipsum dolor sit amet, consectur qualunque bla.

					

				

				

					
					

						
Pagina 6

						
Lorem ipsum dolor sit amet, consectur qualunque bla.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

Certo, sembra spaventoso. Molto spaventoso. Ricorda, questa non sarà la cosa più semantica del pianeta. Ora, lascia che ti spieghi.

Abbiamo un div " content-slider ", che contiene tutto il contenuto. Lo faremo semplicemente " margin: 0 auto " e ce ne dimenticheremo.

Abbiamo poi due sezioni: il “ content ” div e il “ nav ” ul. Il contenuto div è ciò che contiene tutte le nostre pagine e il "nav" ul è ciò che ci consente di accedere a diverse pagine.

Ora, proprio all'interno del div "content", noterai 6 div nidificati: da " content-inner-1 " a " content-inner-6 ". Questi 6 div faranno funzionare tutta la magia e spiegherò esattamente come in seguito.

Il magico CSS

 #content-slider {
famiglia di caratteri: arial;
larghezza: 640px;
margine: 0 automatico;
margine superiore: 100px;
}

#contenuto {
overflow: nascosto;
larghezza: 640px;
altezza: 480px;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
box-shadow: 0px 0px 50px 10px #c9c9c9;
}

#content-interior {
larghezza: 10000px;
altezza: 480px;
}

.pagina {
larghezza: 640px;
altezza: 480px;
galleggiante: sinistra;
}

Come ho detto, tutto ciò che abbiamo fatto al div " content-slider " è stato centrarlo e spostarlo di 100px dalla parte superiore della pagina.

Lo stile del div " content " è molto importante. Impostiamo il suo "overflow" su "nascosto" - Questo assicura che le diapositive siano invisibili finché non vengono selezionate.

Ora, il div " content-inner " è ciò che contiene tutte le pagine. Questo è il motivo per cui ha una larghezza di 10.000px. Normalmente, javascript gli darebbe la giusta larghezza, ma in questo caso non stiamo usando Javascript.

Le pagine hanno una larghezza e un'altezza e vengono spostate a sinistra per essere affiancate.

Ora, abbiamo uno stile generico. Daremo uno stile alla “ page-info ” e alla “ nav ”.

 .page-info {
altezza: 90px;
colore di sfondo: rgba(99, 99, 99, 0.6);
posizione: relativa;
margine superiore: 0px;
in basso: 103px;
colore: #dede;
riempimento a sinistra: 20px;
imbottitura superiore: 10px;
}

.info-pagina h2 {
dimensione del carattere: 21px;
margine inferiore: 10px;
margine superiore: 0px;
colore: #fafa;
}

.testo-pagina {
dimensione del carattere: 15px;
}

Come puoi vedere, è solo un semplice stile che rende le informazioni sulla pagina semitrasparenti e rende leggibile il testo.

Successivamente, aggiungeremo dei bei stili CSS3 ai pulsanti.

 .pulsante {
galleggiante: sinistra;
sfondo: #bababa;
larghezza: 16px;
altezza: 16px;
-webkit-raggio-bordo: 8px;
-moz-raggio-bordo: 8px;
raggio di confine: 8px;
margine sinistro: 5px;
margine-destra: 5px;
}

.pulsante: passa il mouse {
-webkit-box-shadow: inserto 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: inserto 0px 0px 2px 2px #d4d4d4;
box-shadow: inserto 0px 0px 2px 2px #d4d4d4;
}

.pulsante:attivo {
-webkit-box-shadow: inserto 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: inserto 0px 0px 2px 2px #7a7a7a;
box-shadow: inserto 0px 0px 2px 2px #7a7a7a;
}

.pulsante a {
blocco di visualizzazione;
larghezza: 16px;
altezza: 16px;
}

Abbiamo creato dei cerchi con i pulsanti e abbiamo inserito delle ombre esterne per aggiungere un po' di piacere per gli occhi.

Infine, aggiungeremo l'ingrediente magico al mix. Prima di ciò, tuttavia, spiegherò come funzionerà tutto questo.

Usando il CSS3 :target pseudo-selector , possiamo dare uno stile agli elementi che si trovano nell'url. Per esempio:

 #esempio {
visibilità: nascosta;
}

#esempio:obiettivo {
visibilità: visibile;
}

Ora, se fossimo in un URL come "http://www.example.com/index.html #example , verrebbero applicati gli stili ":target" sopra. In questo caso sarebbe visibile il div “esempio”.

Usando questo concetto, possiamo imitare una funzione di clic di javascript. Se l'utente fa clic su un collegamento che punta a "http://www.example.com/index.html#example", gli stili verranno applicati a "example".

In questo caso, useremo “:target” per far funzionare il nostro dispositivo di scorrimento dei contenuti. Quando l'utente fa clic su uno qualsiasi dei sei pulsanti nella navigazione, il "contenuto interno" scorrerà nella posizione appropriata, proprio come con una versione javascript.

Ecco il codice:

 #content-inner-1:target #content-inner {
-transizione webkit: tutti i 400 ms di facilità;
-moz-transizione: tutti i 400 ms facilitano;
-o-transizione: tutti i 400 ms facilitano;
transizione: tutti i 400 ms facilità;
margine sinistro: 0px;
}

#content-inner-2:target #content-inner {
-transizione webkit: tutti i 400 ms di facilità;
-moz-transizione: tutti i 400 ms facilitano;
-o-transizione: tutti i 400 ms facilitano;
transizione: tutti i 400 ms facilità;
margine sinistro: -640px;
}

#content-inner-3:target #content-inner {
-transizione webkit: tutti i 400 ms di facilità;
-moz-transizione: tutti i 400 ms facilitano;
-o-transizione: tutti i 400 ms facilitano;
transizione: tutti i 400 ms facilità;
margine sinistro: -1280px;
}

#content-inner-4:target #content-inner {
-transizione webkit: tutti i 400 ms di facilità;
-moz-transizione: tutti i 400 ms facilitano;
-o-transizione: tutti i 400 ms facilitano;
transizione: tutti i 400 ms facilità;
margine sinistro: -1920px;
}

#content-inner-5:target #content-inner {
-transizione webkit: tutti i 400 ms di facilità;
-moz-transizione: tutti i 400 ms facilitano;
-o-transizione: tutti i 400 ms facilitano;
transizione: tutti i 400 ms facilità;
margine sinistro: -2560px;
}

#content-inner-6:target #content-inner {
-transizione webkit: tutti i 400 ms di facilità;
-moz-transizione: tutti i 400 ms facilitano;
-o-transizione: tutti i 400 ms facilitano;
transizione: tutti i 400 ms facilità;
margine sinistro: -3200px;
}

Conclusione

Abbiamo 6 div " content-inner-[number] " e ogni div corrisponde a una pagina. 6 pagine sono 6 div.

Il div "content-inner" è figlio di ogni div " content-inner-[number] ", quindi quando 6 di questi div " content-inner-[number] " sono :targeted , possiamo definire lo stile " content-inner ” div di conseguenza.

Poiché ogni pagina è larga 640px, impostiamo semplicemente il margine sinistro del div " content-inner " su un multiplo di 640.

Per far funzionare questi stili " :target ", dobbiamo avere collegamenti che puntano ad essi. Quindi, l'ul " nav " sotto le pagine.

Per animare effettivamente il " content-inner ", gli diamo le solite proprietà di animazione CSS3, con i prefissi dei fornitori, ovviamente.

Bene, il gioco è fatto: un dispositivo di scorrimento dei contenuti completamente funzionale, anche se non semantico.