Jak zbudować w pełni funkcjonalny suwak treści CSS3?

Opublikowany: 2017-02-15

Suwaki treści to świetny sposób na zwiększenie dynamiki witryny. Dodają stylu, a jeśli są używane prawidłowo, mogą stanowić różnicę między zakupem a przyciskiem Wstecz. Normalnie byłyby zbudowane za pomocą jQuery lub innej biblioteki Javascript. Jednak wraz z pojawieniem się CSS3 pokażę ci, jak zbudować taki, używając tylko CSS.

Wynik nie będzie najbardziej semantyczną rzeczą, jaką kiedykolwiek stworzono, ale mimo to będzie całkowicie funkcjonalny.

Suwak CSS3

Prosty kod HTML na początek


		

			
			

			

			

			

			

			

			
			

				

					
					

						
Strona 1

						
Lorem ipsum dolor sit amet, consectur cokolwiek blah.

					

				

				

					
					

						
Strona 2

						
Lorem ipsum dolor sit amet, consectur cokolwiek blah.

					

				

				

					
					

						
Strona 3

						
Lorem ipsum dolor sit amet, consectur cokolwiek blah.

					

				

				

					
					

						
Strona 4

						
Lorem ipsum dolor sit amet, consectur cokolwiek blah.

					

				

				

					
					

						
Strona 5

						
Lorem ipsum dolor sit amet, consectur cokolwiek blah.

					

				

				

					
					

						
Strona 6

						
Lorem ipsum dolor sit amet, consectur cokolwiek blah.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		
    
			
  • 
			
  • 
			
  • 
			
  • 
			
  • 
			
  •

To prawda, to wygląda przerażająco. Bardzo straszne. Pamiętaj, to nie będzie najbardziej semantyczna rzecz na świecie. Teraz wyjaśnię.

Mamy div „ content-slider ”, w którym znajduje się cała zawartość. Po prostu „ margin: 0 auto ” to i zapomnijmy o tym.

Następnie mamy dwie sekcje: div „ content ” i „ nav ” ul. Content div przechowuje wszystkie nasze strony, a „nav” ul umożliwia nam dostęp do różnych stron.

Teraz, bezpośrednio wewnątrz elementu div „content” zauważysz 6 zagnieżdżonych elementów div: „ content-inner-1 ” do „ content-inner-6 ”. Tych 6 divów sprawi, że cała magia zadziała, a później dokładnie wyjaśnię, jak to zrobić.

Magiczny CSS

 #suwak-treści {
rodzina czcionek: arial;
szerokość: 640px;
margines: 0 auto;
margines górny: 100px;
}

#zawartość {
przelew: ukryty;
szerokość: 640px;
wysokość: 480px;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
box-shadow: 0px 0px 50px 10px #c9c9c9;
}

#treść-wewnętrzna {
szerokość: 10000px;
wysokość: 480px;
}

.strona {
szerokość: 640px;
wysokość: 480px;
pływak: lewy;
}

Jak powiedziałem, wszystko, co zrobiliśmy z div „ content-slider ”, to wyśrodkowanie go i przesunięcie o 100 pikseli od góry strony.

Styl div „ content ” jest bardzo ważny. Ustawiamy jego „przepełnienie” na „ukryty” – dzięki temu slajdy są niewidoczne, dopóki nie zostaną wybrane.

Teraz div „ content-inner ” zawiera wszystkie strony. Z tego powodu ma szerokość 10 000 pikseli. Normalnie javascript nadałby mu odpowiednią szerokość, ale w tym przypadku nie używamy JavaScript.

Strony mają szerokość i wysokość i są przesunięte w lewo, aby były obok siebie.

Teraz mamy trochę ogólnej stylizacji. Dodamy styl „ page-info ” i „ nav ”.

 .Informacja o stronie {
wysokość: 90px;
kolor tła: rgba (99, 99, 99, 0,6);
pozycja: względna;
górny margines: 0px;
dół: 103px;
kolor: #dedede;
dopełnienie lewe: 20px;
wyściółka: 10px;
}

.strona-informacje h2 {
rozmiar czcionki: 21px;
margines-dolny: 10px;
górny margines: 0px;
kolor: #fafafa;
}

.strona-tekst {
rozmiar czcionki: 15px;
}

Jak widać, to tylko prosta stylizacja, która sprawia, że ​​informacje o stronie są półprzezroczyste, a tekst czytelny.

Następnie dodamy do przycisków ładny styl CSS3.

 .przycisk {
pływak: lewy;
tło: #bababa;
szerokość: 16px;
wysokość: 16px;
-webkit-obramowanie-promień: 8px;
-moz-border-radius: 8px;
promień obramowania: 8px;
margines lewy: 5px;
margines prawy: 5px;
}

.przycisk:najedź {
-webkit-box-shadow: wstawka 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: wstawka 0px 0px 2px 2px #d4d4d4;
box-shadow: wstawka 0px 0px 2px 2px #d4d4d4;
}

.przycisk:aktywny {
-webkit-box-shadow: wstawka 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: wstawka 0px 0px 2px 2px #7a7a7a;
box-shadow: wstawka 0px 0px 2px 2px #7a7a7a;
}

.przycisk a {
Blok wyświetlacza;
szerokość: 16px;
wysokość: 16px;
}

Zrobiliśmy kółka przycisków i daliśmy im wstawkowe cienie, aby dodać trochę słodyczy do oczu.

Na koniec dodamy do mieszanki magiczny składnik. Wcześniej jednak wyjaśnię, jak to wszystko będzie działać.

Używając :target pseudo-selector , możemy stylizować elementy znajdujące się w adresie URL. Na przykład:

 #przykład {
widoczność: ukryta;
}

#przykład:cel {
widoczność: widoczna;
}

Teraz, gdybyśmy byli pod adresem URL, takim jak „http://www.example.com/index.html #przyklad , zastosowane zostałyby powyższe style „:target”. W takim przypadku widoczny byłby div „przykład”.

Korzystając z tej koncepcji, możemy naśladować funkcję kliknięcia javascript. Jeśli użytkownik kliknie link wskazujący na „http://www.example.com/index.html#example”, wówczas style zostaną zastosowane do „example”.

W tym przypadku użyjemy „:target”, aby nasz suwak treści działał. Gdy użytkownik kliknie dowolny z sześciu przycisków w nawigacji, „wewnętrzna zawartość” przesunie się do odpowiedniej pozycji, podobnie jak w przypadku wersji JavaScript.

Oto kod:

 #content-inner-1:cel #content-inner {
-przejście na webkit: wszystkie 400 ms łatwość;
-moz-transition: wszystkie 400 ms łatwość;
-o-przejście: wszystkie 400 ms łatwość;
przejście: łatwość wszystkich 400 ms;
margines lewy: 0px;
}

#content-inner-2:cel #content-inner {
-przejście na webkit: wszystkie 400 ms łatwość;
-moz-transition: wszystkie 400 ms łatwość;
-o-przejście: wszystkie 400 ms łatwość;
przejście: łatwość wszystkich 400 ms;
margines lewy: -640px;
}

#content-inner-3:cel #content-inner {
-przejście na webkit: wszystkie 400 ms łatwość;
-moz-transition: wszystkie 400 ms łatwość;
-o-przejście: wszystkie 400 ms łatwość;
przejście: łatwość wszystkich 400 ms;
margines lewy: -1280px;
}

#content-inner-4:cel #content-inner {
-przejście na webkit: wszystkie 400 ms łatwość;
-moz-transition: wszystkie 400 ms łatwość;
-o-przejście: wszystkie 400 ms łatwość;
przejście: łatwość wszystkich 400 ms;
margines lewy: -1920px;
}

#content-inner-5:cel #content-inner {
-przejście na webkit: wszystkie 400 ms łatwość;
-moz-transition: wszystkie 400 ms łatwość;
-o-przejście: wszystkie 400 ms łatwość;
przejście: łatwość wszystkich 400 ms;
margines lewy: -2560px;
}

#content-inner-6:cel #content-inner {
-przejście na webkit: wszystkie 400 ms łatwość;
-moz-transition: wszystkie 400 ms łatwość;
-o-przejście: wszystkie 400 ms łatwość;
przejście: łatwość wszystkich 400 ms;
margines lewy: -3200px;
}

Wniosek

Mamy 6 divów „ content-inner-[number] ”, a każdy div odpowiada stronie. 6 stron to 6 divów.

Element div „content-inner” jest elementem potomnym każdego elementu div „ content-inner-[number] ”, więc gdy dowolnych 6 z tych elementów div „ content-inner-[number] ” jest :targeted , możemy nadać nazwę „ content-inner ” div odpowiednio.

Ponieważ każda strona ma szerokość 640 pikseli, po prostu ustawiamy lewy margines elementu div „ content-inner ” na wielokrotność 640.

Aby te style „ :target ” działały, musimy mieć odnośniki do nich. Stąd „ nav ” ul pod stronami.

Aby faktycznie animować „ content-inner ”, nadajemy jej zwykłe właściwości animacji CSS3, oczywiście z prefiksami dostawcy.

Cóż, masz to: w pełni funkcjonalny, choć niesemantyczny suwak treści.