7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Animation

11 практических курсов по веб-анимации

Scroll to top
Read Time: 3 mins

Russian (Pусский) translation by Pembelight (you can also view the original English article)

Хорошо продуманная и со смыслом анимация действительно может улучшить опыт взаимодействия на ваших веб-сайтах и ​​в приложениях. Она может рассказать историю, помочь в навигации и многое другое.

Если вы хотите узнать, как использовать анимацию в своих проектах веб-дизайна и разработке, смотрите дальше. Мы собрали полный список из 11 курсов, которые расскажут вам, как создавать красивые анимации с помощью CSS, JavaScript и фреймворков, таких как GreenSock и Sequence.js.

1. Практическая веб-анимация

Этот первый курс может послужить отличным стартом для изучения анимации. Из 30 видео длительностью более четырех часов вы узнаете множество практических способов создания анимаций для кнопок, прайсингов и других полезных веб-элементов, используя сжатые CSS и jQuery файлы.

2. 6 Handy CSS3 Animation Projects

Иногда лучший способ приобрести новые навыки - это засукать рукава и выполнить реальные проекты. В этом коротком курсе вы создадите шесть небольших, но полезных проектов, которые используют анимацию CSS.

3. A Visual Guide to CSS Animation

Не смотря на то, что для анимаций предпочитают JavaScript и jQuery, можно также создавать потрясающие эффекты с помощью чистого CSS. В этом курсе вы узнаете, как создавать CSS анимации, основанные на свойствах перехода и преобразования.  Используя популярный инструмент визуального веб-дизайна Webflow (через бесплатный аккаунт), вы сможете увидеть, как воспроизводится анимация во время того, когда вы её создаете.

4. Introduction to Anime.js

Anime.js - небольшой, но мощный движок анимации JavaScript. В этом курсе вы узнаете основы этой библиотеки, а также создадите простой пользовательский интерфейс «Формула 1».

5. Easing in to Cubic Bezier Functions

Что такое плавный переход? Почему он нужен в веб-анимации? Как им управлять и его применять в контексте CSS? В этом супер-быстром курсе вы узнаете ответы на все эти вопросы.

6. 3D Animation With Three.js

Фреймворк Three.js - отличный способ создания 3D-графики в браузере. В этом курсе вы научитесь создавать сложные 3D-анимации с использованием этого JavaScript фреймворка.  Также обязательно зацените более ранние куры 3D on the Web With Three.js и Three.js: Beyond the Basics. Все три курса полностью ознакомят новичка с Three.js.

7. GreenSock Animation Platform: First Steps

GreenSock - это фреймворк JavaScript, которая упрощает анимацию HTML-элементов. В течение этого курса вы сделаете первые шаги к изучению этой мощной инфраструктуры.  Как только вы изучите основы HTML и CSS, достигнете базовых знаний JavaScript, у вас будет все необходимое для освоения фреймворка.

8. 3 GreenSock Projects: Practical Animation With GSAP

Этот курс основывается на предыдущем и представит три проекта, из которых вы узнаете, как создавать программные анимации в реальных проектах, используя платформу анимации GreenSock. Вы узнаете, как создать анимированный прелоудер, анимацию логотипа SVG и настраиваемый слайдер.

9. Up and Running With CSS Keyframe Animations

Вы бы хотели всего лишь за десять минут узнать об анимации, используя CSS ключевые кадры и свойства анимации? Этот быстрый кофе-брейк курс расскажет вам об этом.

10. Enhancing Animation With jQuery UI

jQuery UI - это расширение jQuery, которое упрощает создание элементов чистого пользовательского интерфейса для ваших сайтов.  Он также обеспечивает функциональность, которая расширяет возможности jQuery для анимации контента. В этом коротком курсе вы узнаете, как использовать его для улучшения анимации jQuery.

11. Introduction to Sequence.js

Sequence.js - это фреймворк CSS, который может использоваться для создания слайдеров, презентаций и других элементов с поступательным отображением контента. Он имеет все необходимые функциональные возможности; все, что вам нужно сделать, это добавить свой контент и стиль.  Этот небольшой курс научит вас основам Sequence.js и заложит основу для дальнейшего изучения всех его особеннстей и функций.

Посмотрите любой курс прямо сейчас

Вы можете изучить любой из наших курсов прямо после подписки на Envato Elements. За одну небольшую ежемесячную плату вы получаете доступ не только к этим курсам, но и к нашей растущей библиотеке более 1000 видеокурсов и ведущих электронных книг на Envato Tuts +.

Кроме того, теперь вы получаете безлимитный доступ к огромной библиотеке Envato Elements, которая состоит из 700 000+ креативных элементов. Создавайте уникальные шрифты, фотографии, графику, шаблоны и быстрее улучшайте свои проекты.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.