Создавайте полностью анимированные виджеты с Shift.css
Веб-анимация предлагает способ привлечь внимание людей а также нарисуйте их дальше в веб-сайт. Есть много инструментов для создавать бесплатные анимации но Shift.css является одним из новейших в связке.
Это бесплатный фреймворк с открытым исходным кодом сделано для создания динамическая анимация в любом контейнере. И эти анимации не заперты в одной последовательности. Вы можете создавать собственные анимации для каждый элемент в блоке и применить эти в определенном порядке.
Сдвиг демо-страницы может показать вам намного лучше, чем я могу объяснить словами.
Вы заметите, что каждый элемент внутри контейнера отдельный элемент HTML. Будь то SVG или изображение или что-то еще, вы можете анимировать все отдельно создать свой собственный эффект анимации.
Библиотека поставляется с двумя файлами, .CSS а также .JS библиотека, и оба должны быть добавлен в заголовок документа.
Я не могу найти репозиторий GitHub для этого проекта, поэтому вам нужно скачать файлы напрямую с сайта Shift.css.
Следующим шагом является определить элемент контейнера с некоторым содержанием. Имена классов важны, поэтому каждый анимирующий элемент должен иметь класс .сдвиг элемент прикладная.
Наряду с этими классами, вы также можете добавить атрибуты данных HTML5 определить, как работает анимация. Сейчас их всего три, но их должно быть достаточно, чтобы настроить полный эффект анимации..
- данные анимация: Название анимации
- Данные задержки: Общая задержка (в секундах) до запуска анимации
- данная продолжительность: Общая длина (в секундах) анимации
Название анимации должно быть предопределенная анимация создан для библиотеки Shift. Сейчас есть 15 наименований анимации на выбор. Вы можете увидеть их в списке внизу главной страницы Shift.css.
Просто копировать вставить что вы хотите в настройке имени анимации и тебе должно быть хорошо идти! Например, если бы я хотел использовать анимацию выхода, я бы добавил Данные-анимация = "shift_exitFade" в качестве атрибута данных к любому элементу должен анимировать таким образом. Очень просто.
Мне бы очень хотелось, чтобы в этой библиотеке было больше опций в JavaScript, потому что она позволила бы разработчикам намного больше контролировать размещение и функции. Но за простой (и бесплатный) фреймворк анимации я не могу пожаловаться.
Shift.css идеально подходит для новые разработчики кто хочет создать более сложные стили анимации без написания подробного кода с нуля.
