РАЗРАБОТКА: Потрясающая 3D Tilt анимация на JavaScript. Полный цикл разработки 2021



Создание сайта от А до Я (комплексный курс): https://goo.gl/ankxq9
Создание интернет-магазина: https://goo.gl/7mDqYD
Фриланс для начинающих: https://goo.gl/xOPRQ0

Всем привет! Сегодня мы создадим сложную 3D Tilt анимацию — от дизайна до готового результата на JavaScript, с использованием инновационной платформы GSAP. В данном уроке мы довольно плотно поработаем с OptimizedHTML 5 и на реальном примере рассмотрим настройку, оптимизацию ресурсов и другие аспекты работы со стартером.

Страница урока: https://webdesign-master.ru/blog/javascript/javascript-3d-tilt-animation.html
Следующий урок по созданию курсора: https://youtu.be/lK5TfR2KnYs

Группа Вконтакте: https://vk.com/agragregra
Twitter: https://twitter.com/agragregra

Таймкоды:
00:00 Intro
00:27 Дополнительные материалы
00:46 Создание дизайна
07:25 Настройка проекта
14:30 HTML Вёрстка
36:05 Экспорт изображений
40:08 Вёрстка слоёв карты
51:13 JavaScript + GSAP
56:30 3D Перспектива
1:00:17 Адаптация для устройств
1:08:25 Анимация появления
1:14:45 Финал

Поставьте оценку!
[Всего: 0 Рейтинг: 0]
30 комментариев
  1. Важные дополнения!
    После обновления стартера OptimizedHTML5 следует явно определять все основные переменные проекта через let и импортировать GSAP в проект как модуль. На странице урока (ссылка в описании под видео) вы можете ознакомиться, в каком именно месте файла "app.js" следует добавить необходимые строки, посмотреть текущую реализацию и ознакомиться с остальными изменениями стартера, которые могут повлиять на прохождение данного урока. Также можно скачать готовый пример с уже внесёнными изменениями со страницы урока.
    Приятного обучения!

    Таймкоды:

    00:00 Intro

    00:27 Дополнительные материалы

    00:46 Создание дизайна

    07:25 Настройка проекта

    14:30 HTML Вёрстка
    36:05 Экспорт изображений

    40:08 Вёрстка слоёв карты

    51:13 JavaScript + GSAP
    56:30 3D Перспектива

    1:00:17 Адаптация для устройств

    1:08:25 Анимация появления

    1:14:45 Финал

  2. Вы очень хорошо верстаете, но используете Bootstrap, почему не чистый css?

  3. Всем привет, не нашел файл ссылки для скачивания. Помоги мне!!!

  4. Огромное спасибо за крутой урок! НЕ подскажите, я новичек в js, не могу подключиь модульно gsap
    выбивает ошибку в консоле:
    app.min.js:1 Uncaught ReferenceError: require is not defined
    at app.min.js:1 app.min.js:1
    Что я делаю не так?

  5. Как же круто это выглядит, о мой бог. Спасибо за труды ༼ つ ◕‿◕ ༽つ

  6. Красота, приятно смотреть 🙂

  7. Выглядит великолепно и супер стильно. Спасибо за видео! ༼ つ ◕‿◕ ༽つ

  8. Ты мне напоминаешь автора канала Левша, такой же перфекционист и мастер своего дела.

  9. можно ссылки на тему в vs?

  10. Я когда видел такие анимации, то думал что это всё сложно. Вижу значит это видео Ютубе именно по этой анимации и думаю — "нихера, 1 час, сколько же там javascript кода…" А оказалось вот что )

  11. Не занимаюсь версткой, но пристально слежу за творчеством автора! Прекрасный преподавательский подход.

  12. Ребята, подскажите тему оформления редактора

  13. Ощущения при просмотре информационного контента которым ты делишься, можно сравнить с открытием упаковки нового apple product — понимание что перед тобой качественный продукт и огромное эстетическое удовольствие.

    Спасибо тебе за твой труд!

  14. круто, дякую

  15. Ты жив)) Как же я рад) Вроде все это знаю, но тебя смотреть всегда очень итересно и приятно!

  16. А зачем ты использовал text-right, можно же класс бутстрапа space-between? В чем преимущество? А вообще твои ролики просто класс, просмотрел все 16-17 за 2016 год и начал уже верстать, единственное что у меня не получаеться, потому что жс учил сам год и уже есть коммерческий проект. дедлайны по унику горят, но нормально прорвемся)

  17. Как глоток свежего воздуха, прям захотелось сверстать ето. Большое спасибо вам. За библиотеку отдельный поклон.

  18. Мой комп не вывозит такие анимации) поэтому я их не люблю. Щас все мобилки юзают, на них работает такая анимация?

  19. Залетел поставить лайк и добавить видео в плейлист посмотреть позже.

  20. Отвал башки!

  21. Спасибо за видео, очень интересно!))

  22. 02:12 — svg на winx не вставляется перетаскиванием. Курсор перчёркнутый и ничего не происходит. Как ещё можно вставить SVG?

  23. МАЭСТРО ВЫ КАК ВСЕГДА УДИВЛЯЕТЕ…. !!! СПАСИБО ЗА НАУКУ… !!!

  24. Спасибо большое! Как всегда ультра красаучег! Качественный материал!

  25. Ух вот это я обломался, смотрел в ожидании когда будем делать курсор, а он оказывается в следующем уроке будет. Но выпуск все равно интересный подчерпнул пару годных фишек. Спасибо!

  26. Интересная штука! В браузере сафари работает оооочень медленно, как будто такой эффект слоу-мо получается, или как будто очень тяжело вести мышкой. В хроме все окей

Написать отзыв