Twórz w pełni animowane widżety za pomocą Shift.css

Animacja internetowa oferuje sposób przyciągnąć uwagę ludzi i pociągnij je dalej na stronie internetowej. Istnieje wiele narzędzi do tego tworzyć bezpłatne animacje ale Shift.css jest jednym z najnowszych w tej grupie.

To jest darmowa platforma open source stworzony do tworzenia dynamiczne animacje w dowolnym kontenerze. I te animacje nie są zablokowane w jednej sekwencji. W rzeczywistości możesz tworzyć własne animacje każdy element w bloku i zastosuj je w określonej kolejności.

The Przesunięcie strony demonstracyjnej może pokazać ci znacznie lepiej niż mogę to wyjaśnić słowami.

Jedną z rzeczy, które zauważysz, jest to, że każdy element wewnątrz kontenera jest oddzielny element HTML. Niezależnie od tego, czy jest to SVG, obraz czy cokolwiek innego, możesz animować wszystko oddzielnie stwórz swój własny efekt animacji.

Biblioteka zawiera dwa pliki, a .css i .js biblioteka i obie muszą być dodane do głowicy dokumentu.

Nie mogę znaleźć żadnego repozytorium GitHub dla tego projektu, więc musisz pobierz pliki bezpośrednio ze strony Shift.css.

Następnym krokiem jest zdefiniuj element kontenera z pewną zawartością. Nazwy klas są ważne, więc każdy element animacji musi mieć klasę .element zmiany stosowany.

Wraz z tymi zajęciami możesz również dodaj atrybuty danych HTML5 określić, jak działa animacja. W tej chwili są tylko trzy, ale powinny wystarczyć do dostosowania pełnego efektu animacji.

1. animacja danych: Nazwa animacji
2. opóźnienie danych: Całkowite opóźnienie (w sekundach) przed rozpoczęciem animacji
3. czas trwania danych: Całkowita długość (w sekundach) animacji

Nazwa animacji musi być predefiniowana animacja stworzony dla biblioteki Shift. W tej chwili są 15 nazw animacji do wyboru. Możesz je zobaczyć na dole strony głównej Shift.css.

Właśnie kopiuj wklej cokolwiek chcesz do ustawienia nazwy animacji i powinieneś być dobry, aby iść! Na przykład, jeśli chciałbym użyć animacji wyjścia fade, dodam data-animation = "shift_exitFade" jako atrybut danych do dowolnego elementu powinien tak animować. Bułka z masłem.

Chciałbym, aby ta biblioteka zawierała więcej opcji w JavaScript, ponieważ pozwoliłaby programistom na większą kontrolę nad miejscem i funkcjami. Ale dla prostej (i darmowej) struktury animacji nie mogę narzekać.

Shift.css jest idealny dla nowsi programiści którzy chcą tworzyć bardziej złożone style animacji bez pisania pełnego kodu od podstaw.