Изучите, как создавать очаровательные взаимодействия и удивительные детали с помощью магии CSS, JavaScript, SVG и Canvas. Я поделюсь со всеми своими приёмами в этом курсе!
Создавать анимации уровня «вау» для веба непросто. Я сам сталкивался с этим: видел потрясающие анимации в сети, которые казались настоящей магией - они были далеко за пределами простых CSS-переходов, которые я знал, и я не представлял, с чего начать.
С годами я выстраивал недостающие навыки шаг за шагом. Я изучил, как использовать SVG и Canvas для динамических иллюстраций, невозможных в чистом HTML. Я разобрал десятки нишевых техник, нужных для действительно крутых эффектов. Я научился проектировать анимации и взаимодействия так, чтобы они усиливали удобство пользования, а не мешали.
Теперь я хочу научить этому вас.
Whimsical Animations - это интерактивный онлайн-курс. Это не просто видеоуроки - вы будете на практике экспериментировать, решать задачи и создавать собственные удивительные анимации. Это не похож на обычные курсы (если только вы уже не проходили что-то аналогичное у меня - тогда формат знаком).
Анимации оказались куда важнее, чем может показаться на первый взгляд. Может показаться, что это чисто украшательство, но именно поэтому компании вроде Apple и Stripe уделяют этому столько внимания. В этом курсе я научу вас набору навыков, которыми владеют очень немногие веб-разработчики, но которые востребованы во многих проектах.
Если вы хоть раз задумывались, как я реализовал тот или иной эффект - велика вероятность, что мы разберём его здесь. За годы я собрал множество впечатляющих приёмов и мощных техник, и мне не терпится поделиться ими с вами!
Что касается роботов (внимание!) - возможно, вы думаете: не устареет ли это в 2025 году? Не могут ли ИИ-агенты уже делать всё за нас?
Я считаю, что хотя языковые модели и отлично справляются со многими задачами, они далеко не мастера в анимации. Они могут помочь с простыми переходами, но для тех эффектов, которые я создаю, всё ещё нужна глубокая проработка вручную. Знания и понимание остаются ключевыми.
Этот курс посвящён тому, как проектировать и реализовывать уникальные, индивидуальные анимации для веба. Это то, что ИИ вряд ли возьмёт на себя в ближайшее время.
Вот некоторые части курса
- Часть I: Particle Effects - динамические процедурные эффекты частиц, фундаментальные техники, отладки производительности, взаимодействие с React
- Часть II: The Magic of SVG - как работать с SVG: отдельные формы, линии, визуализации, эффекты с пружинами и интеграция с React
- Часть III: Advanced Interactions - Coming Soon! - более сложные взаимодействия: реакция на мышь, параллаксы, изменения маршрутов и др.
- Часть IV: Working with HTML Canvas - Coming Soon! - когда использовать Canvas вместо SVG, производительность, физика, шум и визуальные эффекты
- Бонус: Animation Design - принципы дизайна анимации: от идеи до последовательности, как не раздражать пользователя
- Бонус: Animation Challenges - дополнительные задания: воссоздание эффектов и сравнение с моими решениями
Ранняя версия курса
Это предварительная версия. Новые модули и материалы будут добавляться автором до конца 2025 - начала 2026 года.
Особенности платформы
Из-за специфики платформы и формата подачи курса воспроизвести весь контент в полной динамике невозможно. Некоторые демонстрационные примеры анимаций могут не работать в локально сохранённых HTML-файлах. Однако у вас есть полный код примеров, пояснения и видео - этого достаточно для полноценного изучения при условии, что вы понимаете процесс.
Структура курса
Каждый урок - это HTML-страница, из которой сохранены все видео и архивы (ZIP с примерами кода).
Видео с приставкой MAIN - основные.
Видео с приставкой SAMPLE - демонстрации анимаций и дополнительных пояснений автора.
Как проходить курс
В онлайн-плеере доступны только основные видео (MAIN). Для полного прохождения скачайте все материалы и следуйте порядку нумерации. Если в плеере есть пропуски в номерах уроков - значит, соответствующие материалы находятся в загруженных файлах.
✨ Желаем приятного обучения!
Early Course Version
This is an early release of the course. New modules and content will be added by the author until late 2025 - early 2026.
Platform Limitations
Due to the platform specifics and course format, it’s not possible to deliver the content in full interactivity. Some demo animations may not work in locally saved HTML files. However, you have access to the complete code examples, explanations, and videos - which is more than enough for effective learning if you follow the process.
Course Structure
Each lesson is an HTML page with all videos and ZIP archives (code examples) extracted.
Videos labeled MAIN are the primary lessons.
Videos labeled SAMPLE are additional demonstrations of animations or explanations for minor details.
How to follow the course
The online player includes only the MAIN videos. To complete the course, download the materials and follow the numbering sequence. If you see gaps between lesson numbers in the player, the missing parts are included in the downloaded files.
✨ Enjoy your learning journey!
The fundraising has been cancelled. With regional pricing activated, we are ok to go alone with it. Thank you to everyone who was ready to contribute! Please stay tuned - the course will be available soon.
Express VPN best
+ clear cache and cookies before entering the site after changing IP
So many great courses are coming out right now that my budget can’t keep up, and I really want to take this one. Access to the early version of the course will close in just 3-4 days, so let’s team up and grab it quickly. 🙌