Implementarea HTML5 Da CSS3 Nu numai că a oferit o nouă modalitate de standardizare a elementelor de pe o pagină, oferind posibilitatea de a include elemente noi care să ofere un grad mai mare de utilitate în dezvoltarea aplicațiilor web, dar a permis și extinderea posibilităților acestora, lăsând deoparte limbi precum JavaScript pentru efecte și tranziții datorită CSS3.
Evident că există biblioteci de JavaScript care au efecte incredibile și fac implementarea lor destul de simplă, dar de cele mai multe ori această funcționalitate este încapsulată și posibilitățile de modificare sunt foarte complicate.
Pentru aceste cazuri putem folosi CSS3 și cu puțină muncă putem obține efecte și funcționalități cu adevărat uimitoare, cum ar fi un carusel, ceva care în trecut era posibil doar cu JavaScript.
Crearea caruselului nostru
Mai întâi vom include codul HTML pentru caruselul nostru, care va fi destul de simplu, deoarece va include doar includerea foii noastre de stil, eticheta pentru a indica faptul că tot ce se află în interiorul său va fi conținut grafic, cum ar fi fotografii, diagrame sau în în acest caz caruselul nostru:
Carusel CSS3Este important să evidențiem clasele pe care le-am inclus în div, deoarece acestea sunt cele care ne vor permite să realizăm manipularea în CSS. Odată ce acest lucru este făcut, vom trece la implementarea foii noastre de stil, începând mai întâi dând elementelor noastre un aspect 3D, pentru aceasta vom folosi proprietatea perspectivă Da transforma:
.cards {poziție: absolută; top: 50%; stânga: 50%; lățime: 190px; înălțime: 210px; marja: 0; -webkit-perspectivă: 800px; perspectivă: 800px; -webkit-transform: traducere (-50%, -50%); -ms-transform: traduce (-50%, -50%); transformare: traducere (-50%, -50%); }Având acest lucru, vom include câteva animații pentru a-i oferi stilul carusel funcționând conform unei reguli pe care o vom defini mai târziu, vom defini, de asemenea, secundele pe care dorim să le facă tranzițiile și stabilim poziția pentru cărțile noastre în caruselul:
.cards__content {poziția: absolută; lățime: 100%; înălțime: 100%; -webkit-transform-style: conservare-3d; stil de transformare: conservare-3d; -webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (0); -webkit-animație: carusel 10s infinit cubic-bezier (1, 0,015, 0,295, 1,225) înainte; animație: carusel 10s infinit cub-bezier (1, 0,015, 0,295, 1,225) înainte; } .cards__element {poziție: absolut; sus: 0; stânga: 0; lățime: 190px; înălțime: 210px; raza frontierei: 6px; }Acum vom lucra separat pe card folosind al n-lea copil, pentru a plasa o culoare de fundal diferită pentru fiecare dintre acestea și gestionarea tranzițiilor pentru acestea:
.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); }În cele din urmă, am stabilit o culoare de fundal pentru corp și adăugăm regulile noastre pentru cuvântul carusel, facem acest lucru cu cadre cheie care este responsabil pentru definirea codului pentru animație:
corp {fundal: # 6c4949; } @ -webkit-keyframes carusel {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 carusel {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); }}Cu acest lucru gata, să vedem cum arată caruselul nostru animat în browserul nostru:
După cum putem vedea, este destul de simplu, dar își îndeplinește funcționalitatea și ceea ce este chiar mai bun fără a utiliza o singură linie de cod în JavaScriptRămâne doar ca toată lumea să ia exemplul și să experimenteze puțin cu el, mărind dimensiunea acestuia, adăugând imagini și schimbând stilul caruselului, lucru care este total posibil datorită modului în care a fost construit.
