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

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

Твитнуть

Класснуть

Запинить

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

Смотреть урок на YouTube

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

Теперь стартер работает с JavaScript модульно, посредством webpack и babel. Вот какие изменения следует учитывать в процессе обучения:
Следует явно определять все основные переменные проекта через 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
Стартер был значительно переработан и упрощён. Было удалено дерево переменных, теперь все настройки следует выполнять непосредственно в функциях задач. Удалены лишние переменные настроек, усложняющие восприятие и работу со стартером.

Был удалён файл ht.access, теперь содержимое для вашего .htaccess файла можно найти на странице стартера на GitHub в описании.

Теперь папка изображений имеет подпапку dist, куда выгружаются оптимизированные картинки, а исходники следует размещать в "images/src/".

Добавлена возможность инклуда html parts. Верхняя часть "index.html" была вынесена в файл "parts/header.html", а нижняя в "parts/footer.html". Весь основной код остался в "index.html" между этими инклудами. Файлы инклудятся виртуально на стороне сервера, поэтому проект необходимо собирать командой build. Готовый проект размещается в папке "dist/".

В Gulpfile.js добавлена переменная preprocessor, предоставляющая опциональный выбор препроцессора (sass, less, styl). Все препроцессоры и подготовленные для них настройки находятся в папке "styles/". Обратите внимание, 'sass' работает также и с синтаксисом Scss в директории "styles/sass/blocks/". Директория "blocks/" полностью подключается в основной файл и именно в этой директории следует создавать новые стили проекта с расширением *.sass или *.scss, в зависимости от того, какой синтаксис вы предпочитаете. При использовании любого другого препроцессора, новые файлы в директории "styles/{preprocessor}/blocks/" будут автоматически импортированы в файл "styles/{preprocessor}/main.*", скомпилированы и сжаты.

В остальном, используйте стартер как это было показано в уроках.