Gjennomføringen av HTML5 Y CSS3 Det ga ikke bare en ny måte å standardisere elementene på en side, noe som ga muligheten til å inkludere nye elementer som ville gi en større grad av nytte i utviklingen av webapplikasjoner, men det tillot også å utvide mulighetene for disse, slik at til side språk som JavaScript for effekter og overganger takket være CSS3.
Tydeligvis finnes det biblioteker av JavaScript som har utrolige effekter og gjør implementeringen ganske enkel, men mesteparten av tiden er denne funksjonaliteten innkapslet og mulighetene for endringer er svært kompliserte.
For disse tilfellene kan vi bruke CSS3 og med litt arbeid kan vi oppnå virkelig fantastiske effekter og funksjoner som en karusell, noe som tidligere bare var mulig med JavaScript.
Å lage karusellen vår
Først vil vi inkludere HTML -koden for karusellen vår, som vil være ganske enkel siden den bare vil inkludere inkluderingen av stilarket vårt, taggen for å indikere at alt som er inne i det vil være grafisk innhold, for eksempel bilder, diagrammer eller i denne saken vår karusell:
CSS3 karusellDet er viktig å markere klassene vi har inkludert i div, siden det er de som lar oss utføre manipulasjonen i css. Når dette er gjort, fortsetter vi med implementeringen av stilarket vårt, og starter først med å gi elementene våre et 3D -utseende, for dette bruker vi eiendommen perspektiv Y forvandle:
.kort {posisjon: absolutt; topp: 50%; igjen: 50%; bredde: 190px; høyde: 210px; margin: 0; -webkit-perspektiv: 800px; perspektiv: 800px; -webkit-transform: translate (-50%, -50%); -ms-transform: translate (-50%, -50%); transform: translate (-50%, -50%); }Når vi har dette, kommer vi til å inkludere noen animasjoner for å gi den karusellstilen som fungerer etter en regel som vi vil definere senere, vi definerer også sekundene vi vil at den skal gjøre overgangene, og vi angir posisjonen for kortene våre innenfor karusellen:
.cards__content {posisjon: absolutt; bredde: 100%; høyde: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (0); -webkit-animasjon: karusell 10s uendelig cubic-bezier (1, 0.015, 0.295, 1.225) fremover; animasjon: karusell 10s uendelig cubic-bezier (1, 0.015, 0.295, 1.225) fremover; } .cards__element {posisjon: absolutt; topp: 0; venstre: 0; bredde: 190px; høyde: 210px; kant-radius: 6px; }Nå skal vi jobbe med kortet separat n-barnet, dette for å plassere en annen bakgrunnsfarge for hver av disse og håndteringen av overganger for dem:
.cards__element: nth-child (1) {bakgrunn: # 394fd5; -webkit-transform: rotateY (0) translateZ (182px); transform: rotateY (0) translateZ (182px); } .cards__element: nth-child (2) {bakgrunn: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); transform: rotateY (120deg) translateZ (182px); } .cards__element: nth-child (3) {bakgrunn: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); transform: rotateY (240deg) translateZ (182px); }Til slutt satte vi en bakgrunnsfarge for kropp og vi legger til våre regler for ordet karusell, vi gjør dette med nøkkelbilder som er ansvarlig for å definere koden for animasjonen:
body {bakgrunn: # 6c4949; } @ -webkit-keyframes karusell {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 karusell {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 klart, la oss se hvordan vår animerte karusell ser ut i nettleseren vår:
Som vi kan se, er det ganske enkelt, men det oppfyller funksjonaliteten og det som er enda bedre uten å bruke en enkelt kodelinje i JavaScriptDet er bare igjen for alle å ta eksemplet og eksperimentere litt med det, øke størrelsen, legge til bilder og endre stilen på karusellen, noe som er fullt mulig på grunn av måten den ble bygget på.
