Всем привет, друзья! Сегодня создадим пользовательский курсор с красивой анимацией движения и наведения. В уроке будем использовать CSS (Sass), JavaScript и платформу для создания потрясающих анимаций GSAP. Также научимся создавать сложную анимацию элементов cubic-bezier.
Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Важные обновления!
Теперь стартер работает с 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.*", скомпилированы и сжаты.- В остальном, используйте стартер как это было показано в уроках.
Результат
Сопутствующие уроки
- Предыдущий урок по созданию 3D Tilt анимации: Изучить
- Gulp 4 - Руководство для самых маленьких
- OptimizedHTML 5 - Стартер для вёрстки сайтов (урок)
- Настройка окружения WSL
- Редактор кода, используемый в уроке
- Молниеносная вёрстка с EMMET
- Основы HTML вёрстки
Дополнительные ресурсы
- cubic-bezier (с настройками): https://cubic-bezier.com/#.75,-1.27,.3,2.33
- GSAP
.to()
Documentation: gsap.to() - GSAP
.set()
Documentation: gsap.set()