Efekty wizualne możliwe do zaimplementowania na stronę
Każdy kafelek otwiera podstronę z działającym pokazem efektu, który możemy dodać do Twojej strony - z podanym kosztem w kilobajtach.
Wszystkie efekty
Animacja sterowana przewijaniemSzafa otwiera się, gdy przewijasz w dół, i zamyka, gdy wracasz w górę.Działa na tej stronieSkrypt 1,1 kB, 120 klatek WebP łącznie 731 KiB (ładowane przy zbliżeniu sceny).Zobacz
Ujawnianie sekcji przy przewijaniuSekcje i kafelki wjeżdżą na ekran dokładnie wtedy, gdy do nich dojedziesz.Działa na tej stronieSkrypt 0,7 kB · style 0,5 kB (po kompresji)Zobacz
Pasek postępu przewijaniaCienka linia na górze okna rośnie wraz z przewijaniem i pokazuje, ile zostało do końca.Działa na tej stronieSkrypt ok. 0,3 kB · style ok. 0,5 kB (po kompresji)Zobacz
Rozwijane odpowiedzi (akordeon)Pytania i odpowiedzi rozwijane jednym kliknięciem, bez skryptu.Działa na tej stronieSkrypt strony testu w budżecie 6 kB (po kompresji)Zobacz
Zegary wyniku szybkościOkrągłe zegary pokazują wynik strony w Google PageSpeed na telefonie i komputerze.Działa na tej stronieZobacz
Licznik liczbLiczby narastają od zera, gdy pas wchodzi w okno - dobre na „nasze liczby".Skrypt ok. 0,4 kB · style ok. 0,5 kB (po kompresji)Zobacz
Kafelki z efektem najazduKafelek unosi się, dostaje cień, a obraz w środku lekko się powiększa po najechaniu.Skrypt 0 kB · style ok. 0,6 kB (po kompresji)Zobacz
Paralaksa tła w sekcji głównejWarstwy tła przesuwają się z różną prędkością przy przewijaniu i dają głębię.Skrypt 0 kB · style ok. 0,7 kB (po kompresji)Zobacz
Celem strony jest szybkość i widoczność w Google, więc żaden efekt nie może jej spowolnić. Przy każdym podajemy, ile waży, i mierzymy go w oficjalnym narzędziu Google PageSpeed Insights. Jak sprawdzić szybkość strony