Implementace HTML5 Y CSS3 Nejenže poskytl nový způsob standardizace prvků na stránce, což umožnilo zahrnout nové prvky, které by poskytly větší míru užitečnosti při vývoji webových aplikací, ale také umožnil rozšířit jejich možnosti, takže stranou jazyky jako např JavaScript za efekty a přechody díky CSS3.
Očividně existují knihovny JavaScript které mají neuvěřitelné efekty a usnadňují jejich implementaci, ale většinou je tato funkce zapouzdřená a možnosti úprav jsou značně komplikované.
Pro tyto případy můžeme použít CSS3 a s trochou práce můžeme dosáhnout opravdu úžasných efektů a funkcí jako kolotoč, něco, co bylo v minulosti možné pouze s JavaScript.
Vytváření našeho kolotoče
Nejprve zahrneme HTML kód našeho karuselu, který bude docela jednoduchý, protože bude zahrnovat pouze zahrnutí naší šablony stylů, značky, která indikuje, že vše, co je v ní, bude grafický obsah, jako jsou fotografie, diagramy nebo v tomto případě náš kolotoč:
CSS3 kolotočJe důležité zdůraznit třídy, které jsme zahrnuli do našeho div, protože jsou to ty, které nám umožní provádět manipulaci v našem CSS. Jakmile to bude hotovo, přistoupíme k implementaci naší šablony stylů, nejprve poskytneme našim prvkům 3D vzhled, k tomu použijeme vlastnost perspektivní Y přeměnit:
.cards {pozice: absolutní; nahoře: 50%; vlevo: 50%; šířka: 190px; výška: 210px; okraj: 0; -webkit-perspective: 800px; perspektiva: 800px; -webkit-transform: translate (-50%, -50%); -ms-transform: translate (-50%, -50%); transform: translate (-50%, -50%); }Když to bude, zahrneme nějaké animace, aby karuselský styl fungoval podle pravidla, které definujeme později, definujeme také sekundy, po kterých chceme provést přechody, a nastavíme pozici pro naše karty uvnitř kolotoč:
.cards__content {pozice: absolutní; šířka: 100%; výška: 100%; -webkit-transform-style: zachovat-3d; styl transformace: zachovat-3d; -webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (0); -webkit-animace: kolotoč 10 s nekonečný kubický bezier (1, 0,015, 0,295, 1,225) dopředu; animace: kolotoč 10 s nekonečný kubický bezier (1, 0,015, 0,295, 1,225) dopředu; } .cards__element {pozice: absolutní; nahoře: 0; vlevo: 0; šířka: 190px; výška: 210px; poloměr ohraničení: 6px; }Nyní budeme na kartě pracovat samostatně pomocí n-dítě, To umístí jinou barvu pozadí pro každý z nich a zpracování přechodů pro ně:
.cards__element: nth-child (1) {background: # 394fd5; -webkit-transform: rotateY (0) translateZ (182px); transform: rotateY (0) translateZ (182px); } .cards__element: nth-child (2) {background: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); transform: rotateY (120deg) translateZ (182px); } .cards__element: nth-child (3) {background: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); transform: rotateY (240deg) translateZ (182px); }Nakonec nastavíme barvu pozadí pro tělo a přidáme naše pravidla pro slovo kolotoč, uděláme to s klíčové snímky který je zodpovědný za definování kódu pro animaci:
tělo {pozadí: # 6c4949; } @ -webkit-keyframes kolotoč {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transform: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformovat: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformovat: translateZ (-182px) rotateY (-360deg); }} @kolotoč rámů {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformovat: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformovat: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformovat: translateZ (-182px) rotateY (-360deg); }}Když je toto připravené, podívejme se, jak náš animovaný kolotoč vypadá v našem prohlížeči:
Jak vidíme, je to docela jednoduché, ale plní své funkce a co je ještě lepší bez použití jediného řádku kódu v JavaScriptZbývá jen, aby si každý vzal příklad a trochu s ním experimentoval, zvětšil jeho velikost, přidal obrázky a změnil styl kolotoče, něco, co je zcela možné díky způsobu, jakým byl postaven.
