Главная страницаКатегория cssАнимация для Веба

Анимация для Веба

Name: Анимация для Веба
Price: 12.5 USD
Rating: 5 (24 reviews)

Animation for the Web

superhi.com

★5 (всего оценок - 24)

Продолжительность

11 ч 56 мин

Категория

CSS

Количество уроков

111 Видео

Дата добавления

15 янв. 2022 г., 00:00

Язык

Английский

Дата обновления

29 апр. 2026 г., 13:46

Анимация для Веба — это практический курс, который поможет вам превратить статичные иллюстрации в живые, динамичные элементы интерфейса. Вы освоите современные инструменты и подходы, позволяющие создавать плавные, выразительные и производительные анимации для сайтов и веб‑приложений.

Что вы изучите на курсе

Программа курса построена вокруг реальных задач веб‑анимации и предоставляет сбалансированное сочетание теории и практики. Вы шаг за шагом научитесь перенимать профессиональные подходы к созданию и оптимизации графики.

Основы работы с SVG

Создание и подготовка SVG-файлов вручную.
Оптимизация векторной графики для веба.
Понимание структуры SVG: пути, группы, слои, атрибуты.

Анимация с CSS, JavaScript и GreenSock

Применение CSS-анимаций для простых и сложных эффектов.
Использование GSAP для работы с таймлайнами, последовательностями и эффектами движения.
Создание естественных анимаций с помощью замедлений (easing) и задержек.
Работа с кликовыми событиями и интерактивностью.

Работа с иллюстрациями и эффектами

Создание рисунков через код в Figma и перенос их в веб.
Использование паттернов, масок, clip‑path, фильтров и других специальных эффектов.
Построение UI-анимаций и микровзаимодействий.

Практические проекты и результаты

Каждый модуль курса содержит проект, направленный на закрепление навыков и создание реальных рабочих элементов. По завершении обучения вы сможете уверенно работать с SVG и GSAP, создавать собственные анимации и добавлять выразительные визуальные элементы в интерфейсы.

Вы сможете:

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

Идеально подходит для

Курс ориентирован на дизайнеров, веб‑разработчиков и креаторов, которые хотят вывести свои проекты на новый уровень expressiveness и улучшить пользовательский опыт за счёт анимации. Начальные навыки HTML и CSS будут полезны, но не обязательны.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:02:01
Welcome to Seamstress
Урок 2. 00:03:47
The SuperHi Editor
Урок 3. 00:14:56
Basic structure and styling
Урок 4. 00:06:08
Laying out the page
Урок 5. 00:06:05
Adding typography using web fonts
Урок 6. 00:07:43
Adding multiple images to our site
Урок 7. 00:06:08
Adding Javascript to the site
Урок 8. 00:07:51
Setting up a slideshow
Урок 9. 00:08:19
Adding multiple slideshows
Урок 10. 00:10:30
Fade in our headers with GSAP
Урок 11. 00:09:06
Creating a carousel effect
Урок 12. 00:09:49
Tidying up our carousel
Урок 13. 00:14:28
Adding our intro slides effect
Урок 14. 00:10:26
Creating a timeline for next slides
Урок 15. 00:07:45
Mobile friendly design
Урок 16. 00:09:24
Adding hover effects to our Read More buttons
Урок 17. 00:04:49
Waiting for images to load with imagesLoaded
Урок 18. 00:04:11
Variations on GSAP
Урок 19. 00:01:22
Welcome to the project!
Урок 20. 00:09:52
Let's set up our page
Урок 21. 00:10:51
Adding a layout
Урок 22. 00:11:38
What are CSS keyframes and CSS animations?
Урок 23. 00:07:22
Adding looping and repeating animations
Урок 24. 00:04:41
How to apply easing to CSS animation
Урок 25. 00:09:05
Making an SVG image from scratch
Урок 26. 00:03:49
Applying CSS to SVG tags
Урок 27. 00:06:45
SVG viewbox and preserveAspectRatio
Урок 28. 00:04:58
Hover states with SVG
Урок 29. 00:06:29
Making our lives easier with exporting SVGs from Figma
Урок 30. 00:03:03
Fill screen and blend modes
Урок 31. 00:04:55
Using CSS animations with SVG tags
Урок 32. 00:03:03
Adding a CSS filter
Урок 33. 00:10:26
Using Javascript for fade out the header on scroll
Урок 34. 00:03:52
Adding Javascript easing
Урок 35. 00:06:46
Tying scroll events to our blobs
Урок 36. 00:05:30
Changing the blob scale per section
Урок 37. 00:02:56
Adding multiple blobs per section
Урок 38. 00:03:13
Custom CSS scrollbar
Урок 39. 00:02:02
Homework: Fade out the arrow on scroll
Урок 40. 00:01:50
Homework solution
Урок 41. 00:02:15
Welcome to 4th Kind!
Урок 42. 00:06:45
Let's set up our page
Урок 43. 00:04:17
Adding our typography and links
Урок 44. 00:02:52
Adding dark mode with a media query
Урок 45. 00:04:26
CSS Variables for themeing
Урок 46. 00:07:34
Updating our dark mode
Урок 47. 00:06:43
User-triggered dark mode
Урок 48. 00:06:55
Adding our navigation
Урок 49. 00:05:54
Toggling our navigation
Урок 50. 00:06:47
Adding raw SVGs to our site
Урок 51. 00:06:40
Adding a menu icon animation
Урок 52. 00:06:58
Dark mode toggle animation
Урок 53. 00:05:59
Adding a triple-nav animation
Урок 54. 00:08:21
Dark mode wiper effect
Урок 55. 00:14:21
Adding our central animation
Урок 56. 00:03:51
Shifting our site on menu open
Урок 57. 00:02:04
The MorphSVG plugin
Урок 58. 00:02:33
Welcome home to Home Planet
Урок 59. 00:05:49
Setting up our header
Урок 60. 00:05:25
What are SVG ids
Урок 61. 00:06:21
Eyeball movements
Урок 62. 00:04:24
Adding a hat timeline
Урок 63. 00:03:50
Moving the left and right arms
Урок 64. 00:03:12
Setting up our house animation
Урок 65. 00:05:12
Adding the raw SVG to the house
Урок 66. 00:04:33
Making the TV flicker with a timeline
Урок 67. 00:06:00
Adding links to our SVG
Урок 68. 00:10:09
Adding a label to our links
Урок 69. 00:07:19
Updating the text on hover
Урок 70. 00:01:52
Fading the other links on hover
Урок 71. 00:06:20
Setting up a story timeline
Урок 72. 00:08:22
Adding our scene
Урок 73. 00:05:56
Adding parallax to our scroll
Урок 74. 00:07:01
Combing our timelines
Урок 75. 00:08:59
Making the timeline be based on scroll
Урок 76. 00:02:30
Making the site have responsive design
Урок 77. 00:01:25
Welcome to Seal Street Photo Studio!
Урок 78. 00:11:28
Setting up our page content and style
Урок 79. 00:02:51
Sticky positioning
Урок 80. 00:14:47
What is an Intersection Observer
Урок 81. 00:07:18
Applying styling to our observer
Урок 82. 00:03:32
prefers-reduced-motion Media Query
Урок 83. 00:10:00
Scroll-jacking with CSS Scroll Snap
Урок 84. 00:09:21
Adding our captions
Урок 85. 00:05:35
CSS clip path
Урок 86. 00:02:46
Variation: Adding clip-path to CSS animation
Урок 87. 00:04:26
Adding typography and layers
Урок 88. 00:06:43
Adding a rotation layer
Урок 89. 00:09:54
Changing rotation on mousemove
Урок 90. 00:02:19
Adding a media query for reduced motiono
Урок 91. 00:09:11
Setting up our intro sequence
Урок 92. 00:05:35
Animating our inbox box
Урок 93. 00:04:18
Adding fixes and optimizations
Урок 94. 00:01:44
Welcome to Wakefast
Урок 95. 00:16:55
Setting up our page
Урок 96. 00:06:29
Starting a smooth scroll
Урок 97. 00:07:22
Moving CSS into Javascript
Урок 98. 00:05:53
Replicating a normal page scroll
Урок 99. 00:04:56
Adding a tween factor
Урок 100. 00:03:03
Adding media queries to our Javascript
Урок 101. 00:15:09
Fade in fruits
Урок 102. 00:10:32
Aspect ratios and layering images
Урок 103. 00:11:51
Adding a parallax scroll effect to our fruits
Урок 104. 00:10:53
Faking a cursor
Урок 105. 00:05:54
Tweening the cursor position
Урок 106. 00:05:12
Adding a slower trail cursor
Урок 107. 00:03:43
Adding rotation to our cursor
Урок 108. 00:06:07
Animating underlines on links
Урок 109. 00:07:23
Adding image underlines with clip-path
Урок 110. 00:04:36
Adding a media query addListener
Урок 111. 00:00:27
Thank you for taking our course!

Автор - superhi.com

superhi.com

Мы делаем онлайн-курсы, которые помогают творческим людям выделиться. Узнайте, как писать, разрабатывать и управлять проектами в нашем глобальном сообществе!

+99

Комментарии