Łatwe tworzenie efektów kaskadowych za pomocą CascadeJS

Fantazyjne animacje to dziesiątki w internecie. Łatwiej jest tworzyć z niesamowitymi tonami biblioteki animacji.

Cascade.js jest jeszcze jedną biblioteką do dodania do listy i jest zdecydowanie wyjątkowa. Dzięki kaskadzie możesz projektować niestandardowe efekty animacji za pomocą kaskadowe litery w tekście lub elementy kaskadowe w głównym pojemniku.

Ta biblioteka ma brak zależności; działa na klasycznym JavaScript. Możesz zainstalować go poprzez npm, Bower lub pobrać kopię bezpośrednio z GitHub.

Aby CascadeJS działał, będziesz potrzebuję dwóch plików: plik CSS i plik JavaScript. Oboje są zapakowani wersje minifikowane aby zaoszczędzić kilka KB na stronie.

Każdy element Cascade zostaje podzielony na oddzielne części, które animować indywidualnie przez elementy. To są dodane dynamicznie, więc nie musisz niczego zmieniać w swoim HTML.

Ale musisz ustaw pływ() funkcjonować w twoim pliku, po wybraniu dowolnego elementu, który chcesz animować.

Możesz tak naprawdę użyj jQuery z tą biblioteką, jeśli chcesz, ale to jest nie wymagane. Jeśli więc wolisz wybierać elementy za pomocą jQuery, możesz użyć tego zamiast tego.

Tutaj jest fragment wanilii JavaScript z demo głównej strony:

Możesz przekazać pływ() element z brak parametrów, lub możesz skonfiguruj je wszystkie siebie. Trwa osiem opcjonalnych parametrów do edycji stylu animacji, czasu, czasu trwania i opcjonalnych klas CSS.

CascadeJS ma inną funkcję o nazwie fragment() co pozwala podzielić litery (lub elementy) do oddzielnych pojemników, bez ich animowania. Możesz użyć tej funkcji do kolor i poprawianie tekstu na stronie, kierując każdą pojedynczą literę słowem. Całkiem fajnie, prawda?

Wszystko próbki kodu są otwarcie dostępne na głównej stronie biblioteki, więc możesz kopiować / wklejać i majstrować samodzielnie. Ale znajdziesz także dokumentacja na stronie GitHub, jeśli szukasz wyraźniejszego sposobu na rozpoczęcie.