Implementeringen af HTML5 Y CSS3 Det gav ikke kun en ny måde at standardisere elementerne på en side, hvilket gav mulighed for at inkludere nye elementer, der ville give en større grad af nytte i udviklingen af webapplikationer, men det gav også mulighed for at udvide mulighederne for disse, hvilket efterlod til side sprog som f.eks JavaScript for effekter og overgange takket være CSS3.
Der er naturligvis biblioteker af JavaScript som har utrolige effekter og gør deres implementering ganske enkel, men for det meste er denne funktionalitet indkapslet, og mulighederne for ændringer er meget komplicerede.
Til disse tilfælde kan vi bruge CSS3 og med lidt arbejde kan vi opnå virkelig fantastiske effekter og funktioner som en karrusel, noget som tidligere kun var muligt med JavaScript.
Oprettelse af vores karrusel
Først vil vi inkludere HTML -koden til vores karrusel, hvilket vil være ganske enkelt, da det kun vil inkludere inkluderingen af vores typografiark, mærket for at angive, at alt, hvad der er inde i det, vil være grafisk indhold, såsom fotos, diagrammer eller i denne sag vores karrusel:
CSS3 karruselDet er vigtigt at fremhæve de klasser, som vi har inkluderet i vores div, da det er dem, der tillader os at udføre manipulationen i vores css. Når dette er gjort, går vi videre til implementeringen af vores stylesheet, først med at give vores elementer et 3D -udseende, til dette vil vi bruge ejendommen perspektiv Y forvandle:
.kort {position: absolut; top: 50%; tilbage: 50%; bredde: 190px; højde: 210px; margen: 0; -webkit-perspektiv: 800px; perspektiv: 800px; -webkit-transform: oversæt (-50%, -50%); -ms-transform: translate (-50%, -50%); transform: translate (-50%, -50%); }Når vi har dette, vil vi inkludere nogle animationer for at give det karruselstil, der fungerer efter en regel, som vi vil definere senere, vi definerer også de sekunder, vi vil have det til at foretage overgangene, og vi angiver positionen for vores kort inden for karrusellen:
.cards__content {position: absolut; bredde: 100%; højde: 100%; -webkit-transform-style: preserv-3d; transform-style: preserve-3d; -webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (0); -webkit-animation: karrusel 10s uendelig cubic-bezier (1, 0.015, 0.295, 1.225) fremad; animation: karrusel 10s uendelig cubic-bezier (1, 0.015, 0.295, 1.225) fremad; } .cards__element {position: absolut; top: 0; venstre: 0; bredde: 190px; højde: 210px; grænse-radius: 6px; }Nu vil vi arbejde på kortet separat ved hjælp af nth-barn, dette for at placere en anden baggrundsfarve for hver af disse og håndteringen af overgange for dem:
.cards__element: nth-barn (1) {baggrund: # 394fd5; -webkit-transform: rotateY (0) translateZ (182px); transform: rotateY (0) translateZ (182px); } .cards__element: nth-barn (2) {baggrund: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); transform: rotateY (120deg) translateZ (182px); } .cards__element: nth-child (3) {baggrund: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); transform: rotateY (240deg) translateZ (182px); }Endelig satte vi en baggrundsfarve til legeme og vi tilføjer vores regler for ordet karrusel, vi gør dette med nøglerammer som er ansvarlig for at definere koden til animationen:
krop {baggrund: # 6c4949; } @ -webkit-keyframes karrusel {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); transform: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transform: translateZ (-182px) rotateY (-360deg); }} @keyframes karrusel {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); transform: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transform: translateZ (-182px) rotateY (-360deg); }}Med dette klar, lad os se, hvordan vores animerede karrusel ser ud i vores browser:
Som vi kan se, er det ret simpelt, men det opfylder dets funktionalitet, og hvad er endnu bedre uden at bruge en enkelt kodelinje i JavaScriptDet er kun tilbage for alle at tage eksemplet og eksperimentere lidt med det, øge dets størrelse, tilføje billeder og ændre karrusellens stil, noget der er helt muligt på grund af den måde, det blev bygget på.
