de implementatie van HTML5 Y CSS3 Het bood niet alleen een nieuwe manier om de elementen op een pagina te standaardiseren, wat de mogelijkheid bood om nieuwe elementen op te nemen die een grotere mate van bruikbaarheid zouden bieden bij de ontwikkeling van webapplicaties, maar het maakte het ook mogelijk om de mogelijkheden hiervan uit te breiden, waardoor naast talen zoals JavaScript voor effecten en overgangen dankzij CSS3.
Uiteraard zijn er bibliotheken van JavaScript die ongelooflijke effecten hebben en de implementatie ervan vrij eenvoudig maken, maar meestal is deze functionaliteit ingekapseld en zijn de modificatiemogelijkheden enorm gecompliceerd.
Voor deze gevallen kunnen we gebruik maken van CSS3 en met een beetje werk kunnen we echt geweldige effecten en functionaliteiten bereiken zoals een carrousel, iets dat in het verleden alleen mogelijk was met JavaScript.
Onze carrousel maken
Eerst zullen we de HTML-code voor onze carrousel opnemen, wat vrij eenvoudig zal zijn omdat het alleen de opname van ons stijlblad bevat, de tag om aan te geven dat alles wat erin zit grafische inhoud zal zijn, zoals foto's, diagrammen of in dit geval onze carrousel:
CSS3-carrouselHet is belangrijk om de klassen te benadrukken die we in onze div hebben opgenomen, omdat dit degenen zijn waarmee we de manipulatie in onze css kunnen uitvoeren. Zodra dit is gebeurd, gaan we over tot de implementatie van onze stylesheet, eerst door onze elementen een 3D-uiterlijk te geven, hiervoor zullen we de eigenschap gebruiken perspectief Y transformeren:
.cards {positie: absoluut; boven: 50%; links: 50%; breedte: 190px; hoogte: 210px; marge: 0; -webkit-perspectief: 800px; perspectief: 800px; -webkit-transform: vertalen (-50%, -50%). -ms-transform: vertalen (-50%, -50%). transformeren: vertalen (-50%, -50%). }Als we dit hebben, gaan we enkele animaties toevoegen om het de carrouselstijl te geven die werkt volgens een regel die we later zullen definiëren, we definiëren ook de seconden die we willen dat het de overgangen maakt, en we stellen de positie in voor onze kaarten binnen de carrousel:
.cards__content {positie: absoluut; breedte: 100%; hoogte: 100%; -webkit-transform-stijl: behouden-3d; transform-stijl: behouden-3d; -webkit-transform: translateZ (-182px) roterenY (0); transformeren: translateZ (-182px) roterenY (0); -webkit-animatie: carrousel 10s oneindig kubieke-bezier (1, 0.015, 0.295, 1.225) vooruit; animatie: carrousel 10s oneindig kubieke-bezier (1, 0.015, 0.295, 1.225) vooruit; } .cards__element {positie: absoluut; boven: 0; links: 0; breedte: 190px; hoogte: 210px; grens-radius: 6px; }Nu gaan we apart aan de kaart werken met nde-kind, dit om voor elk van deze een andere achtergrondkleur te plaatsen en de afhandeling van overgangen ervoor:
.cards__element: nth-child (1) {achtergrond: # 394fd5; -webkit-transform: roteerY (0) translateZ (182px); transformeren: roterenY (0) translateZ (182px); } .cards__element: n-de-kind (2) {achtergrond: # 39d570; -webkit-transform: roterenY (120deg) translateZ (182px); transformeren: roterenY (120deg) translateZ (182px); } .cards__element: nth-child (3) {achtergrond: # f0091f; -webkit-transform: roterenY (240deg) translateZ (182px); transformeren: roterenY (240deg) translateZ (182px); }Ten slotte stellen we een achtergrondkleur in voor de lichaam en we voegen onze regels toe voor het woord carrousel, we doen dit met keyframes die verantwoordelijk is voor het definiëren van de code voor de animatie:
lichaam {achtergrond: # 6c4949; } @ -webkit-keyframes carrousel {0%, 17,5% {-webkit-transform: translateZ (-182px) roterenY (0); transformeren: translateZ (-182px) roterenY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) roterenY (-120deg); transformeren: translateZ (-182px) roterenY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) roterenY (-240deg); transformeren: translateZ (-182px) roterenY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotatieY (-360deg); transformeren: translateZ (-182px) roterenY (-360deg); }} @keyframes carrousel {0%, 17,5% {-webkit-transform: translateZ (-182px) rotatieY (0); transformeren: translateZ (-182px) roterenY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) roterenY (-120deg); transformeren: translateZ (-182px) roterenY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) roterenY (-240deg); transformeren: translateZ (-182px) roterenY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotatieY (-360deg); transformeren: translateZ (-182px) roterenY (-360deg); }}Laten we, nu dit klaar is, eens kijken hoe onze geanimeerde carrousel eruitziet in onze browser:
Zoals we kunnen zien, is het vrij eenvoudig, maar het vervult zijn functionaliteit en wat nog beter is zonder een enkele regel code in JavaScriptHet blijft alleen voor iedereen om het voorbeeld te nemen en er een beetje mee te experimenteren, het formaat te vergroten, afbeeldingen toe te voegen en de stijl van de carrousel te veranderen, iets dat volledig mogelijk is vanwege de manier waarop het is gebouwd.
