Implementacja HTML5 Tak CSS3 Dało to nie tylko nowy sposób standaryzacji elementów na stronie, dając możliwość dołączania nowych elementów, które zapewniłyby większą użyteczność w tworzeniu aplikacji internetowych, ale także pozwoliło rozszerzyć ich możliwości, pozostawiając pomijając języki takie jak JavaScript za efekty i przejścia dzięki CSS3.
Oczywiście są biblioteki JavaScript które mają niesamowite efekty i sprawiają, że ich implementacja jest dość prosta, ale przez większość czasu ta funkcjonalność jest zamknięta, a możliwości modyfikacji są mocno skomplikowane.
W takich przypadkach możemy użyć CSS3 a przy odrobinie pracy możemy osiągnąć naprawdę niesamowite efekty i funkcjonalności jak karuzela, coś, co w przeszłości było możliwe tylko dzięki JavaScript.
Tworzenie naszej karuzeli
Najpierw dołączymy kod HTML do naszej karuzeli, co będzie dość proste, ponieważ będzie zawierało tylko włączenie naszego arkusza stylów, tagu wskazującego, że wszystko, co jest w jego wnętrzu, będzie treścią graficzną, taką jak zdjęcia, diagramy lub w w tym przypadku nasza karuzela:
Karuzela CSS3Ważne jest, aby podkreślić klasy, które zawarliśmy w naszym div, ponieważ to one pozwolą nam przeprowadzić manipulację w naszym cssie. Gdy to zrobimy, przejdziemy do implementacji naszego arkusza stylów, zaczynając najpierw od nadawania naszym elementom wyglądu 3D, do tego użyjemy właściwości perspektywiczny Tak przekształcać:
.cards {pozycja: bezwzględna; góra: 50%; po lewej: 50%; szerokość: 190px; wysokość: 210px; margines: 0; -perspektywa webkitu: 800px; perspektywa: 800px; -webkit-transform: przetłumacz (-50%, -50%); -ms-transform: przetłumacz (-50%, -50%); transformacja: przetłumacz (-50%, -50%); }Mając to, dodamy kilka animacji, aby nadać mu styl karuzeli działający zgodnie z regułą, którą zdefiniujemy później, zdefiniujemy również sekundy, w których chcemy, aby wykonał przejścia, i ustalamy pozycję naszych kart w ramach karuzela:
.cards__content {pozycja: bezwzględna; szerokość: 100%; wzrost: 100%; -webkit-transform-style: zachowaj-3d; styl transformacji: zachowaj-3d; -webkit-transform: translateZ (-182px) rotateY (0); transformacja: translateZ (-182px) obróćY (0); -webkit-animacja: karuzela 10s nieskończony sześcienny-bezier (1, 0,015, 0,295, 1,225) do przodu; animacja: karuzela 10s nieskończony sześcienny-bezier (1, 0,015, 0,295, 1,225) do przodu; } .cards__element {pozycja: bezwzględna; góra: 0; po lewej: 0; szerokość: 190px; wysokość: 210px; promień obramowania: 6px; }Teraz będziemy pracować na karcie osobno, używając n-te dziecko, aby umieścić inny kolor tła dla każdego z nich i obsługi przejść dla nich:
.cards__element: n-dziecko (1) {tło: # 394fd5; -webkit-transform: rotateY (0) translateZ (182px); transform: rotateY (0) translateZ (182px); } .cards__element: n-te dziecko (2) {background: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); transformacja: rotateY (120deg) translateZ (182px); } .cards__element: nth-child (3) {background: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); transformacja: rotateY (240deg) translateZ (182px); }Na koniec ustawiamy kolor tła dla ciało i dodajemy nasze reguły dla karuzeli słów, robimy to za pomocą klatki kluczowe który odpowiada za zdefiniowanie kodu animacji:
ciało {tło: #6c4949; } @ -webkit-keyframes karuzela {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transformacja: translateZ (-182px) obróćY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformacja: translateZ (-182px) obróćY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformacja: translateZ (-182px) obróćY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformacja: translateZ (-182px) obróćY (-360deg); }} @keyframes carousel {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transformacja: translateZ (-182px) obróćY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformacja: translateZ (-182px) obróćY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformacja: translateZ (-182px) obróćY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformacja: translateZ (-182px) obróćY (-360deg); }}Mając to gotowe, zobaczmy, jak wygląda nasza animowana karuzela w naszej przeglądarce:
Jak widać, jest to dość proste, ale spełnia swoją funkcjonalność i co więcej bez użycia ani jednej linijki kodu w JavaScriptPozostaje tylko wziąć przykład i trochę z nim poeksperymentować, zwiększając jego rozmiar, dodając obrazy i zmieniając styl karuzeli, co jest całkowicie możliwe ze względu na sposób, w jaki została zbudowana.
