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ć:

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:

• końca lub rozpoczęcia danego Webinaru / wydarzenia
• do końca sprzedaży kursu
• do końca zniżki na Twoje produkty.

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:

• js-clock-days (dla elementu, który pokazuje dni),
• js-clock-hours (dla elementu, który pokazuje godziny),
• js-clock-minutes (dla elementu, który pokazuje minuty),
• js-clock-seconds (dla elementu, który pokazuje sekundy).

‍

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:

‍