Jak zrobić licznik z animację Countdown

Cześć, w tym artykule przedstawiam jak w Webflow możesz zrobić licznik, odliczający do konkretnej daty. Poniżej przykład, jak taki element może wyglądać:

Przykład animowanego licznika Webflow
Licznik — Przykład nr 1

Kiedy taki element może Ci się przydać?

Możliwości użycia jest wiele. Przyda się on np. do pokazywania ile zostało czasu do:

Jak taki element stworzyć?

1. Wystarczy, że w ustawieniach konkretnej podstrony, w sekcji Custom Code > Before </body> tag, wstawisz poniższy kod:

2. Następnie, korzystając z elementów w zakładce Add Elements w lewym pasku, w Webflow, utwórz layout licznika w miejscu, gdzie chcesz go użyć (Przykład nr 1).

Najlepiej, żeby każdy z elementów, który ma być animowany i pokazywać czas, był blokiem Text Block.

3. Teraz każdemu z elementów animowanych nadaj odpowidenio identyfikatory:

Jak dodać id elementom w Webflow

4. Na koniec wróć do ustawień podstrony i ustaw datę w kodzie na własny termin jako wartość zmiennej deadline. Opublikuj zmiany i gotowe!

Teraz wszystko powinno działać.

Poniżej zamieszczam też filmik instruktażowy, w którym pokazałem także, jak zrobić taki licznik na dynamicznym szablonie podstron z CMS Collection:

Wróć

Podobne Code Snippets

Chcesz być na bieżąco?
ZAPISZ SIĘ DO NEWSLETTERA!

Dziękuję za zaufanie i zapisanie się na Newsletter! Został jeszcze jeden krok. Zajrzyj na swoją pocztę
i potwierdź maila. Miłego dnia :)
Oops! Something went wrong while submitting the form.