HTML5 i CSS3 powoli zaczynają być standardem na stronach internetowych. Jeszcze nie wszystkie nowe elementy zostały wdrożone w najpopularnijeszych przeglądarkach internetowych ale większość z nich już świetnie sobie z nimi radzi. Dla zobrazowania ogromnych możliwości jakie dają te dwie nowe technologie przygotowałem animowany zegar.
Do stworzenia zegara potrzebne są wskazówki i tarcza – przygotowałem do tego specjalne grafiki jednak, gdyby ktoś chciał się dłużej pobawić w HTML5 i CSS3 to można oczywiście samemu narysować sobie takie elementy.
Pierwszym etapem jest napisanie odpowiedniego html’a i dodanie styli tak, aby nasz zegar pojawił się na stronie:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Zegar – HTML5/CSS3</title>
<style type="text/css">
#clock {
background: url("/samples/html5/clock/clock-dial.png") no-repeat center center;
width: 258px;
height: 253px;
margin: 50px auto;
}
#seconds {
background: url("/samples/html5/clock/arrow1.png") no-repeat scroll center top transparent;
height: 161px;
margin-left: 124px;
margin-top: 47px;
position: absolute;
width: 10px;
}
#minutes {
background: url("/samples/html5/clock/arrow2.png") no-repeat scroll center top transparent;
height: 139px;
margin-left: 123px;
margin-top: 58px;
position: absolute;
width: 13px;
}
#hours {
background: url("/samples/html5/clock/arrow3.png") no-repeat scroll center top transparent;
height: 99px;
margin-left: 124px;
margin-top: 77px;
position: absolute;
width: 11px;
}
</style>
</head>
<body>
<h1>Zegar - HTML5/CSS3</h1>
<div id="clock">
<div id="seconds"></div>
<div id="minutes"></div>
<div id="hours"></div>
</div>
</body>
</html>
Tarcze zegara ustawiamy jako tło pierwszego div’a, a wewnątrz niego dodajemy trzy kolejne będące wskazówkami. Będziemy je obracać wokół własnej osi dlatego div’y są prawie dwukrotnie dłuższe niż obrazki przedstawiające wskazówki.
Teraz możemy przystąpić do tworzenia animacji. Składa się ona z dwóch elementów:
- Zdefiniowanie ruchu jaki ma być wykonywany.
- Przypisanie ruchu do elementu, który ma go wykonywać i określenie jego parametrów.
Chcemy aby wskazówki obracały się wokół środka tarczy zegara, więc spośród dostępnych metod wybieramy ruch obrotowy, w chwili obecnej trzeba go również zdefiniować dla poszczególnych typów przeglądarek:
@keyframes mymove
{
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
@-moz-keyframes mymove /*Firefox*/
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@-o-keyframes mymove /*Opera*/
{
from {-o-transform:rotate(0deg);}
to {-o-transform:rotate(360deg);}
}
Teraz możemy przypisać ruch do poszczególnych wskazówek – służy do tego atrybut animation, w którym wskazujemy zdefiniowany wcześniej ruch, czas trwania, jak nasza funkcja będzie postępować w czasie oraz ile razy ma się wykonać. Atrybut animation posiada jeszcz kilka innych parametrów jednak dla zachowania prostoty nie będę ich definować.
#seconds {
background: url("/samples/html5/clock/arrow1.png") no-repeat scroll center top transparent;
height: 161px;
margin-left: 124px;
margin-top: 47px;
position: absolute;
width: 10px;
animation:mymove 60s linear infinite;
-moz-animation:mymove 60s linear infinite; /*Firefox*/
-webkit-animation:mymove 60s linear infinite; /*Safari and Chrome*/
-o-animation:mymove 60s linear infinite; /*Opera*/
}
Dla pozostałych wskazówek postępujemy analogicznie. Możemy nawet wykorzystać ten sam ruch zmieniając tylko czas trwania w atrybucie animation.
Nasz zegar już chodzi przydałoby się go jednak ustawić na odpowiednią godzinę 🙂
Do tego celu skorzystałem już z funkcji PHP, wyznaczając odpowiednie wartości początkowe i końcowe dla zdefiniowanych ruchów (jeżeli chcemy zacząć od innych pozycji początkowych wskazówek to musimy powielić kod ruchu z innymi wartościami dla każdej wskazówki).
Na koniec już jako detal zmieniamy czcionkę napisu:
@font-face
{
font-family: myFont;
src: url("/samples/html5/clock/FREESCPT.TTF");
}
h1 {
text-align:center;
font-family:myFont;
font-size: 50px;
}