Nie ważne jak infantylnie brzmi tytuł, nie umiałem lepszego wymyślić, ale problem nie jest trywialny, nawet dosyć ciekawy.
Moja strona działa na darmowym serwerze (wcześniej friko teraz hostinger). Przeniosłem się na hostingera, bo friko dziwne rzeczy robiły przy przesyłaniu czegokolwiek między PHP a JSem, ale to nie jest związane z moim problemem. Dla podejrzenia problemu strona: www.wojciechmoska.hekko.pl
Tła na mojej stronie otwierają się długo mimo dość dużej optymalizacji tych jpgów z mojej strony. Niestety mają szerokość 1920px, więc ciężko było uzyskać wielkości mniejsze niż 150kb. Ale to nie jest powód spowalniania strony, bo jak już się załaduje to jest OK.
Problem jest z CSSowym animation. Jak widać na mojej stronie na tle latają takie białe świetliki, latają z różną prędkoscią i po krzywej, więc animacja jest duża. Na moim komputerze i wielu innych, które sprawdzałem jest w porządku i strona nie ma jakiś zwiech. Ale sprawdzałem też na kilku innych, na których strona się bardzo ścinała i dopiero kliknięcie w "wyłącz animacje" w stopce powodowało uspokojenie się strony. Wyłącz animację najzwyczajniej w świecie w JSie zatrzymuje animację.
html, body {
background: url(images/dotbig.png), url(images/dotmedium.png), url(images/dotmedium.png), url(images/dot.png), url(images/dot.png), url(images/background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
animation: AnimateDots 33s linear infinite;
animation-play-state: paused;
-webkit-animation: AnimateDots 33s linear infinite;
-webkit-animation-play-state: paused;
z-index: 0;
}
@keyframes AnimateDots{
0% {background-position: 40% 40%, 80% 15%, 15% 60%, 50% 120%, 120% 120%, center center;}
20% {background-position: 60% 70%, 60% 30%, 20% 20%, 60% 97%, 90% 90%, center center;}
40% {background-position: 100% 90%, 35% 50%, 25% -20%, 70% 80%, 60% 50%, center center;}
55% {background-position: 120% 120%, 15% 70%, -20% -20%, 85% 60%, 45% 30%, center center;}
61% {background-position: -20% 120%, 12% 80%, -20% 120%, 88% 52%, 40% 28%, center center;}
66% {background-position: -20% 0%, 0% 120%, -20% 120%, 92% 47%, 36% 26%, center center;}
72% {background-position: 0% 0%, -20% 120%, -20% 120%, 95% 45%, 25% 25%, center center;}
78% {background-position: 10% 10%, 120% 120%, 0% 120%, 97% 42%, 15% 23%, center center;}
82% {background-position: 20% 20%, 120% -20%, 5% 105%, 98% 36%, 12% 22%, center center;}
85% {background-position: 25% 25%, 110% -5%, 8% 90%, 102% 34%, 8% 22%, center center;}
92% {background-position: 30% 30%, 95% 5%, 10% 76%, 105% 33%, 0% 21%, center center;}
100% {background-position: 40% 40%, 80% 15%, 15% 60%, 120% 30%, -20% 20%, center center;}
}
//dla webkita to samo
Jak widać animacja zmienia się często. Tło składa się z aż 6 elementów, z czego aż 5 ma zmienianych pozycję co chwilę.
Moje pytania brzmią: Czy macie jakiś pomysł jak zoptymalizować to pozostawiając animację w miarę taką skomplikowaną jaka jest? Czy u Was też są jakieś problemy z szybkością działania strony. Czy np. pozostawienie w tle tylko serio tła, a animowanie kilku elementów img będzie działać lepiej? Czy korzystając z JSowych funkcji albo jQuerowego animate mogłoby to działać szybciej?
Pierwsze moje spostrzeżenie było takie, że działa to wolno może dlatego, że robię animacje na tle, a gdyby to były elementy img to by było szybciej (tak intuicyjnie), ale nie mam jak tego poprzeć, więc poprawcie mnie jak coś.
Temat w ogóle wydaje mi się ciekawy, bo zastanawiam się co by wypadło najlepiej pod względem szybkości działania animacji: CSS3 czy JS.
