Создание пользовательского курсора с красивой анимацией. CSS / JavaScript / GSAP. Видеоурок и материалы

Всем привет, друзья! Сегодня создадим пользовательский курсор с красивой анимацией движения и наведения. В уроке будем использовать CSS (Sass), JavaScript и платформу для создания потрясающих анимаций GSAP. Также научимся создавать сложную анимацию элементов cubic-bezier.

Результат

1. Готовый результат (демо): Смотреть
2. Исходники, дизайн, демо: Скачать с GitHub

Важные обновления!

I. «perspective: 1000px» теперь следует задавать непосредственному родителю того класса, к которому применяем GSAP («app.js», строка 36). В нашем случае непосредственным родителем блока .content является класс .card-header. Класс preserve должен находиться на каждом уровне цепочки DOM при сложной вложенной структуре сцены, начиная от класса с «perspective: 1000px» до непосредственных родителей элементов, размещённых в 3D-пространстве (см. index.html). Рекомендую скачать исходники с GitHub и ознакомиться более детально с демонстрационным проектом.

II. Теперь стартер работает с JavaScript модульно, посредством webpack и babel. Вот какие изменения следует учитывать в процессе обучения:

1. Следует явно определять все основные переменные проекта через let и импортировать GSAP в проект как модуль в "app.js", а не файлом в Gulpfile. В проекте-примере данного урока, в самом начале файла "app.js" добавьте:

   import { gsap } from 'gsap'
   let cx, cy, mouseX, mouseY, posX, posY, clientX, clientY, dx, dy, tiltx, tilty, request, radius, degree
   

2. Стартер был значительно переработан и упрощен. Было удалено дерево переменных, теперь все настройки следует выполнять непосредственно в функциях задач. Удалены лишние переменные настроек, усложняющие восприятие и работу со стартером.
3. Был удален файл ht.access, теперь содержимое для вашего .htaccess файла можно найти на странице стартера на GitHub в описании.
4. Теперь папка изображений имеет подпапку dist, куда выгружаются оптимизированные картинки, а исходники следует размещать в "images/src/".
5. Добавлена возможность инклуда html parts. Верхняя часть "index.html" была вынесена в файл "parts/header.html", а нижняя в "parts/footer.html". Весь основной код остался в "index.html" между этими инклудами. Файлы инклудятся виртуально на стороне сервера, поэтому проект необходимо собирать командой build. Готовый проект размещается в папке "dist/".
6. В Gulpfile.js добавлена переменная preprocessor, предоставляющая опциональный выбор препроцессора (sass, less, styl). Все препроцессоры и подготовленные для них настройки находятся в папке "styles/". Обратите внимание, 'sass' работает также и с синтаксисом Scss в директории "styles/sass/blocks/". Директория "blocks/" полностью подключается в основной файл и именно в этой директории следует создавать новые стили проекта с расширением *.sass или *.scss, в зависимости от того, какой синтаксис вы предпочитаете. При использовании любого другого препроцессора, новые файлы в директории "styles/{preprocessor}/blocks/" будут автоматически импортированы в файл "styles/{preprocessor}/main.*", скомпилированы и сжаты.
7. В остальном, используйте стартер как это было показано в уроках.

Сопутствующие уроки

1. Предыдущий урок по созданию 3D Tilt анимации: Изучить
2. Gulp 4 - Руководство для самых маленьких
3. OptimizedHTML 5 - Стартер для верстки сайтов (урок)
4. Настройка окружения WSL
5. Редактор кода, используемый в уроке
6. Молниеносная верстка с EMMET
7. Основы HTML верстки

Дополнительные ресурсы

1. cubic-bezier (с настройками): https://cubic-bezier.com/#.75,-1.27,.3,2.33
2. GSAP .to() Documentation: gsap.to()
3. GSAP .set() Documentation: gsap.set()