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:

 

[code]

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

[/code]

 

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

 

[code]
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;
}
[/code]

 

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

 

[code]
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);
}
[/code]

 

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:

 

[code]
@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;
}
[/code]

  • 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ść:

[code]

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

[/code]

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

[s_button url=”https://jsfiddle.net/DailyWeb/3j35moz4/4/” target=”blank” style=”flat” size=”9″ radius=”0″ text_shadow=”0px 0px 0px #000000″]Zobacz fiddla[/s_button]

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


Posłuchaj nas!