Jakiś czas temu chwaliłem się, że w swoim projekcie udało mi się zrobić całkiem niezłą animację – ale nie ma co ukrywać, jest bardzo prosta. Są to po prostu trójkąty (na dwóch warstwach), które poruszają się w stronę lewego górnego rogu naszego okna.
W przypadku takiego tła trzeba jasno pilnować wzoru – bez tego animacji będzie brakowało "ciągłości" i zauważycie nagłe przeskakiwanie do swojego stanu początkowego. Kiedy mamy już przygotowany obrazek (w moim przypadku dwa, bo przewiduję dwie warstwy), możemy zabrać się za umieszczenie ich w folderze i pisanie styli. U mnie wygląda to tak:
.triangles{
background-image:url('img/bg-triangle.png');
background-repeat:repeat;
-webkit-animation: 20s linear 0s normal none infinite animate2;
-moz-animation: 20s linear 0s normal none infinite animate2;
-ms-animation: 20s linear 0s normal none infinite animate2;
-o-animation: 20s linear 0s normal none infinite animate2;
animation: 20s linear 0s normal none infinite animate2;
}
.triangles2{
position:absolute;
left:0;right:0;
top:0;bottom:0;
background-image:url('img/bg-triangle2.png');
background-repeat:repeat;
-webkit-animation: 17s linear 0s normal none infinite animate;
-moz-animation: 17s linear 0s normal none infinite animate;
-ms-animation: 17s linear 0s normal none infinite animate;
-o-animation: 17s linear 0s normal none infinite animate;
animation: 17s linear 0s normal none infinite animate;
}
@-webkit-keyframes animate {
from {background-position:0 0;}
to {background-position: -400px -200px;}
}
@-webkit-keyframes animate2 {
from {background-position:0 0;}
to {background-position: -400px -200px;}
}A tak wygląda na obecnym etapie główne menu gry:
Moim zdaniem się dobrze udało. A Wy co o tym myślicie? (wybaczcie za jakość i małą ilość klatek, ale nie chciałem, żeby ten gif za dużo ważył...) <- podmienione na MP4/WebM
