DIY #6 Karuzela w CSS | DailyWeb.pl

DIY #6 Karuzela w CSS

Opublikowano 3 lata temu - 3


Długo nie było nic z serii DIY czyli zabaw głównie z CSSem. Dziś chciałbym wam pokazać jak można stworzyć karuzelę wyłącznie przy użyciu wspomnianego CSSa. Nie jest to rozwiązanie najbardziej optymalne i wiem, że istnieje pierdyliard gotowych skryptów świetnie się skalujących etc. ale nie o to chodzi :) Artykuł można potraktować jako prezentację podstawowych możliwości  animacji w CSSie. Zapraszam.

 

Na początek idea:

Trzy elementy, które się przewijają. Dwa skrajne z tyłu mniejsze i półprzezroczyste, a środkowy większy i bez przezroczystości, ot podstawowa karuzela:

1

Następnie element1 przechodzi na miejsce element2, element2 na element3 a element3 na element1. It's simple :)

Karuzelę opieram na strukturze:

 


<ul>
    <li><h2>element1</h2></li>
    <li><h2>element2</h2></li>
    <li><h2>element3</h2></li>
</ul>

 

Bazowo wszystkie elementy będą takie same, 2 skrajne zmniejszymy a środkowy zostanie w oryginale (ale można oczywiście zrobić na odwrót).

 

ul{
    margin:0px auto;
    padding:0px;
    list-style-type:none;
    position:relative;
    width:600px;
    margin-top:110px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
li{
    position:absolute;
    text-align:center;
}
h2{
    width:200px;
    margin:5px 0px;
    font-size: 3em;
    text-align: center;
}

 

Do stylowania konkretnych elementów listy użyję selektora :nth-child():

 

li:nth-child(1) {
    opacity:0.6;
    left:0px;
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    transform:scale(0.5);
}
li:nth-child(2) {
    opacity:1;
    left:200px;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    transform:scale(1);
}
li:nth-child(3) {
    opacity:0.6;
    left:400px;
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    transform:scale(0.5);
}

 

Mamy już przygotowany wygląd elementów, teraz dopisujemy animacje przejścia elementów pomiędzy punktami, którą opisałem powyżej. Nazwijmy sobie je: carousel1, carousel2, carousel3. Po jednej dla każdego elementu listy:

 

@keyframes carousel1{
0% {
    left:0px;
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
 }
33% {
    left:200px;
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1);
    opacity:1;
 }
66% {
    left:400px;
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
    opacity:0.6;
 }
100% {
    left:0px;
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
    opacity:0.6;
 }
  • 0% oraz 100% - pozycja wyjściowa element1
  • 33% - pozycja środkowa + powrót do normalnej skali, aktualnie mamy tam element2 ale w tym samym czasie jego animacja nam go przesunie
  • 66% - pozycja prawa + ponowne zmniejszenie skali

Analogicznie tworzymy animacje przejścia dla dwóch pozostałych elementów. Będą się różniły kolejnościami ponieważ pozycje wyjściowe są też inne:

carousel2:

  • 0% oraz 100% - zaczynamy od left: 200 oraz scale(1)
  • 33% - left: 400, scale (0.5)
  • 66% - left: 0, scale (0.5)

carousel3:

  • 0%,100% - left: 400, scale(0.5)
  • 33% - left: 0, scale(0.5)
  • 66% - left: 200, scale(1)

 

Należy pamiętać, aby animację powtórzyć takżę z prefixem webkita: @-webkit-keyframes.

 

Następnie dopisujemy do elementów listy linijki odpalające nam poszczególne animacje, które będą trwały 10 sekund i będą powtarzana w nieskończoność:


animation: carousel1 10s infinite;
-webkit-animation: carousel1 10s infinite;

Działające rozwiązanie możecie zobaczyć na jsfiddle.

Zobacz fiddla

O czym chcielibyście przeczytać w następnej odsłonie ?

 

Zapraszam również na wcześniejsze części:

DIY #5 - Tworzymy logo Androida w CSS3

DIY #4 - Jak samemu zrobić logo Chrome w CSS3

DIY#3 - Elementy menu zawsze wyjustowane na całej szerokości kontenera

DIY#2.5 – Custom checkbox i radio button – tylko CSS

DIY#2 – Custom checkbox i radio button – na obrazkach

DIY#1 – Selektor plików