Содержательная, хорошо продуманная анимация действительно может улучшить взаимодействие с пользователем на ваших веб-сайтах и в приложениях. Он может рассказать историю, помощь в навигации и многое другое.
Если вы хотите знать, как использовать анимацию в своих проектах веб-дизайна и разработки, не смотрите дальше. Мы собрали полный список из 11 курсов, которые научат вас создавать красивые анимации с помощью CSS, JavaScript и специализированных сред, таких как GreenSock и Sequence.js.
1. Практическая веб-анимация
Этот первый курс — отличная отправная точка для изучения анимации. Из 30 видеороликов продолжительностью более четырех часов вы узнаете много практических способов создания анимации для кнопок, таблиц цен и других полезных веб-элементов с использованием сжатых CSS и jQuery.
2. 6 удобных анимационных проектов CSS3
Иногда лучший способ выучить новый навык — закатать рукава и завершить реальные проекты. В этом коротком курсе вы создадите шесть небольших, но полезных проектов, использующих CSS-анимацию.
3. Визуальное руководство по CSS-анимации
Хотя JavaScript и jQuery полезны для создания анимации, также возможно создавать удивительные эффекты анимации, используя чистый CSS. В этом курсе вы узнаете, как создавать CSS-анимацию, основанную на свойствах transition и transform. А с помощью популярного инструмента визуального веб-дизайна Webflow (через бесплатную учетную запись) вы сможете видеть, как ваши анимации воспроизводятся в реальном времени по мере их создания.
4. Введение в Anime.js
Anime.js — небольшой, но мощный движок анимации JavaScript. В этом курсе вы познакомитесь с основами этой библиотеки, а также создадите простой пользовательский интерфейс «Формулы 1» с ее использованием.
5. Упрощение кубических функций Безье
Что такое смягчение? Почему это полезно в мире веб-анимации? Как вы можете контролировать это и применять его в контексте CSS? В этом супер-быстром курсе вы узнаете ответы на все эти вопросы.
6. 3D-анимация с Three.js
Фреймворк Three.js — отличный способ создания трехмерной графики в браузере. В этом курсе вы научитесь создавать сложные трехмерные анимации с использованием этой среды JavaScript. Также обязательно ознакомьтесь с более ранними курсами, 3D в Интернете с Three.js и Three.js: Beyond the Basics . Эти три курса вместе познакомят вас с Three.js с нуля.
7. Анимационная платформа GreenSock: первые шаги
GreenSock — это инфраструктура JavaScript, которая позволяет легко анимировать элементы HTML. В ходе этого курса вы сделаете первые шаги в изучении использования этой мощной среды. Если у вас есть понимание HTML и CSS, а также базовые знания JavaScript, вы будете оснащены всем, что вам нужно для выполнения.
8. 3 проекта GreenSock: практическая анимация с GSAP
Этот курс основан на предыдущем и содержит три проекта, в которых вы узнаете, как создавать программные анимации в реальных сценариях с использованием платформы анимации GreenSock. Вы узнаете, как создать анимированный предварительный загрузчик, анимацию логотипа SVG и пользовательский слайдер содержимого.
9. Запуск и работа с анимацией ключевых кадров CSS
Как бы вы хотели научиться создавать анимацию с использованием ключевого кадра CSS и свойств анимации всего за десять минут? Этот быстрый курс кофе-брейк позволит вам сделать это.
10. Улучшение анимации с помощью jQuery UI
jQuery UI — это расширение jQuery, которое позволяет легко создавать чистые элементы пользовательского интерфейса для ваших сайтов. Он также предоставляет функциональность, которая расширяет возможности jQuery для анимации контента. В этом коротком курсе вы узнаете, как использовать его для улучшения анимации jQuery.
11. Введение в Sequence.js
Sequence.js — это CSS анимационная среда, которую вы можете использовать для создания слайдеров, презентаций и других пошаговых приложений. Он имеет все необходимые встроенные функции; все, что вам нужно сделать, это добавить свой контент и стиль. Этот короткий курс научит вас основам использования Sequence.js и заложит основу для дальнейшего изучения всех его возможностей и возможностей.
Смотрите любой курс сейчас
Вы можете сразу пройти любой из наших курсов, подписавшись на Envato Elements . За небольшую ежемесячную плату вы получаете доступ не только к этим курсам, но и к нашей растущей библиотеке из более чем 1000 видеокурсов и ведущих в отрасли электронных книг по Envato Tuts +.
Кроме того, теперь вы получаете неограниченное количество скачиваний из огромной библиотеки Envato Elements, содержащей более 700 000 творческих ресурсов. Создавайте с помощью уникальных шрифтов, фотографий, графики и шаблонов и быстрее выполняйте лучшие проекты.