Tilda [Breezzly] Создание эксклюзивных сайтов с анимацией на Tilda Zero Block (2021)

[Алан-э-Дейл]

Автор: Breezzly
Название: Создание эксклюзивных сайтов с анимацией на Tilda Zero Block (2021)

Что узнаете на курсе
Сначала вы освоитесь в Tilda, а затем возьметесь превращать макеты из Figma в полноценные сайты и настраивать продвинутые анимации. Вас ждет практика по верстке нестандартных композиций, работа с пошаговой анимацией и адаптация дизайна под мобильные. За время курса вы выполните проект по боевому брифу с интересными композициями и анимациями, освоите систему создания сайтов на Tilda Zero Block, станете смелее в экспериментах и воплощении собственных идей!

Чему научитесь

• Выстраивать рабочий процесс и организовывать работу по созданию сайтов в Тильде
• Верстать дизайны из Figma с уникальным дизайном в Tilda Zero Block
• Работать с сеткой и делать отзывчивый дизайн с помощью Grid и Window Container
• Анимировать элементы сайта с помощью базовой и продвинутой пошаговой анимации
• Добавлять изображениям анимацию с эффектом параллакс
• Настраивать продвинутую триггерную анимацию при взаимодействии с объектами на экране
• Адаптировать дизайн под смартфоны и планшеты
• Добавлять и настраивать формы на сайте для сбора заказов

Программа курса:

Проект 1. Верстка уникального дизайна из Figma в Tilda Zero Block — командная игра Figma и Tilda
Шаг 1. Знакомство с проектом и обзор Tilda
Шаг 2. Создадим витрину промо-страницы (первый экран) по дизайну в Figma
Шаг 3. Разработаем интерактивный каталог с интересными шрифтовыми стилями
Шаг 4. Сверстаем популярные подборки по нестандартной сетке
Шаг 5. Добавим атмосферный блок с цитатой
Шаг 6. Создадим интерактивную демонстрацию с помощью Tilda ToolTip
Шаг 7. Освоим работу с панелью слоев и подготовим коллаж капсулы
Шаг 8. Разработаем блок с отзывами и настроим формы сбора контактов

Проект 2. Принципы анимации в Tilda Zero Block — от прототипов к продвинутой анимации в Тильде
Шаг 1. Знакомство с пошаговой анимацией в Tilda Zero Block, настройка анимации заголовка и фото продукта в первом экране
Шаг 2. Оркестровка анимации групп объектов с собственной траекторией с помощью таймлайна
Шаг 3. Создаем интерактивный шоурил с анимацией по наведению курсора
Шаг 4. Анимируем интерактивный каталог
Шаг 5. Анимируем мягкое появление дизайнерских коллекций при cкролле блока
Шаг 6. Анимируем эффектную заставку, открывающую первый экран сайта

Проект 3. Мобильные версии и адаптация в Zero Block для планшетов и телефонов
Шаг 1. Адаптация Zero Block под планшеты — тонкости адаптивной верстки на Тильде
Шаг 2. Адаптация Zero Block под мобильные телефоны и среда для тестирования на популярных смартфонах
Шаг 3. Адаптация меню для мобильной в Zero block — создаем «гамбургер»

Подробнее:

Скачать:

 

[btrxcdd]

Нет, не смотрите этот курс, все можно делать гораздо проще.
В фигме ее проекте все плавает относительно друг-друга по размерам.
Даже банальное выравнивание меню сверху не смогла сделать по центру, а это делается одной кнопкой.
Из этого вытекает, что дизайн в тильде уже не ровный идет.
И самое главное - на курсах Тильда Про сразу говорят, что тупо лучше наложите изображение и по нему равняйте все - она же постоянно говорит "сделаем на глаз"
В общем себя закопаете при изучении этого.

 

[aus8899]

Отсутствуют фото для GIF первого блока.

 

[Олег Коновалов]

Кто-нибудь покупал данный курс? Дайте оценку. Буду очень благодарен)

 

[heelloo]

Курс отличный. Доступно и без воды.
Но кажется что он не полный, хотя у автора количество уроков такое же.

 

[dopo7a]

Описано ну очень привлекательно - практика и новые фишки лишними не бывают!
Конечно, часто в курсах слишком раздутые видео... но объём этого курса всего 1,5Гб - беру!
Надеюсь хватит времени и сил и на него ))
Лично я сейчас изучаю курсы Гынгазова и Ширко - хорошие курсы, хотя, местами раздутые.

Кто уже скачал и изучил - делитесь результатом, впечатлением!

А если кому-то нужна реф.ссылка для бесплатного месяца в Тильде - пишите в личку (или см.мою подпись).

 

[550953]

Будьте добры https://prnt.sc/4tWLMHJXATfm ввиде файлах ссылки даются(например на фигма), прикрепите к описанию или в архив приложите.

 

[550953]

Посимвольно не очень удобно такое набирать
figma.com/file/rNzKiz2hqRFNNcKET3M 1js/Breezzly-Tilda-%7C-Capsule-Home-Decor-Start-Header?node-id=0%3A1

 

[Helloitsme]

Ребят, а есть у кого ссылочка на исходник, а то у меня не открывается

 

[kowaruss]

https://www.figma.com/file/rNzKlz2h...|-Capsule-Home-Decor-Start-Header?node-id=0:1