В этой статье я проведу вас через процесс создания пользовательского курсора для вашего React-приложения с помощью Framer motion. В конце руководства вы создадите пользовательский курсор, который будет выглядеть следующим образом:
Необходимые условия
Чтобы следовать этому руководству, вам понадобится следующее:
- Текстовый редактор
- Node.js, установленный локально на вашей машине
- Рабочие знания HTML, CSS и JavaScript
- Знание React
Полный код этого урока вы можете найти на CodeSandbox.
Давайте начнем!
Настройка проекта
Теперь давайте создадим простой проект React и установим необходимые зависимости.
Начнем с установки React:
npx create-react-app custom-cursor-app
Или вы можете использовать Yarn
yarn create react-app custom-cursor-app
Далее мы установим Framer Motion
npm install framer-motion
Или вы можете использовать Yarn
yarn add framer-motion
Начало работы
Сначала мы откроем файл App.js и удалим часть кода в нем, а затем заменим его этими несколькими строками кода
import "./App.css";
const App = () => {
return (
<div className="App">
<h1 className="title">Custom Cursor</h1>
<div className="cursor"></div>
</div>
);
};
export default App;
Далее мы импортируем все остальное, что необходимо для создания пользовательского курсора, из библиотек, которые мы установили ранее:
useState и useEffect хуки из React.
Хук motion из Framer Motion.
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
Далее откройте файл App.css, удалите из него код и поместите в него эти строки кода, это поможет нам стилизовать файл App.js
@import url("https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap");
*,
*::before,
*::after {
margin: 0;
padding: 0;
}
.App {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: aqua;
font-family: "Mochiy Pop One", sans-serif;
}
.title {
font-size: 5rem;
}
.cursor {
background-color: #111;
height: 16px;
width: 16px;
border-radius: 50%;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
}
Получение положения мыши
Чтобы получить положение мыши при запуске приложения, нам понадобятся хуки useState и useEffect, предоставляемые React.
import "./App.css";
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
const App = () => {
// state for mouse position
const [mousePosition, setMousePosition] = useState({
x: 0,
y: 0,
});
useEffect(() => {
const mouseMove = (e) => {
setMousePosition({
x: e.clientX,
y: e.clientY,
});
};
window.addEventListener("mousemove", mouseMove);
return () => {
window.removeEventListener("mousemove", mouseMove);
};
}, []);
return (
<div className="App">
<h1 className="title">Custom Cursor</h1>
<div className="cursor"></div>
</div>
);
};
export default App;
Здесь мы используем хук useState, чтобы установить состояние для положения мыши.
В хуке useEffect мы получаем текущее положение мыши с помощью объекта window.
Затем мы устанавливаем состояние x и y объекта mousePosition, используя метод clientX и clientY из объекта event.
Теперь мы можем отслеживать перемещение мыши по экрану.
Добавление анимации
Далее мы будем анимировать курсор мыши с помощью модуля движения, который мы импортировали из Framer motion.
const App = () => {
// Variant animation
const variants = {
default: {
x: mousePosition.x - 8,
y: mousePosition.y - 8,
},
};
return (
<div className="App">
<h1 className="title">
Custom Cursor
</h1>
// using the motion module to animate the cursor div element
<motion.div
className="cursor"
variants={variants}
animate="default"
></motion.div>
</div>
);
};
export default App;
Здесь мы ориентируемся на элемент курсора, создаем вариант анимации курсора и устанавливаем положение по умолчанию x и y элемента курсора с помощью состояния mousePosition, mousePosition.x для начального положения элемента курсора x и mousePosition.y для начального положения элемента курсора y.
В файле App.css элемент cursor div стилизован под ширину и высоту 16px каждый, уменьшение mousePosition.x и mousePosition.y на 8 помогает центрировать курсор мыши в элементе cursor div.
Далее, чтобы убрать родной курсор браузера, в файле App.css вставьте эту строку кода.
*,
*::before,
*::after {
cursor: none;
}
Установка режима смешивания
Чтобы установить режим mixBlendMode для пользовательского курсора, откройте файл App.js и отредактируйте код.
// Set cursor variant to change color on hover text
const [cursorVariant, setCursorVariant] = useState("default");
// Variant animation
const variants = {
// default animation (applies onMouseLeave)
default: {
x: mousePosition.x - 8,
y: mousePosition.y - 8,
},
// text animation (applies onMouseEnter)
text: {
height: 150,
width: 150,
x: mousePosition.x - 70,
y: mousePosition.y - 70,
backgroundColor: "aqua",
mixBlendMode: "difference",
},
};
// function for textLeave and textEnter
const textEnter = () => setCursorVariant("text");
const textLeave = () => setCursorVariant("default");
return (
<div className="App">
<h1 className="title" onMouseEnter={textEnter} onMouseLeave={textLeave}>
Custom Cursor
</h1>
<motion.div
className="cursor"
variants={variants}
animate={cursorVariant}
></motion.div>
</div>
);
};
Сначала мы создадим новое состояние для варианта анимации курсора с помощью хука useState.
Затем мы создадим функцию для установки варианта анимации элемента курсора на анимацию text при наведении мыши на элемент h1, и еще одну функцию для установки варианта анимации элемента курсора на default при выходе мыши из элемента h1.
Переходя к анимации варианта текста, мы устанавливаем ширину и высоту элемента курсора на 150px каждый, и уменьшаем mousePosition x и y на 70px каждый, чтобы отцентрировать курсор.
Далее мы зададим элементу курсора цвет фона aqua, поэтому, когда мышь попадает в элемент h1, цвет меняется на aqua.
Наконец, мы устанавливаем свойство mixBlendMode в difference.
Свойство mixBlendMode инвертирует цвет текста h1 в цвет aqua при наведении курсора.
Ваша полная веб-страница с пользовательским курсором должна выглядеть следующим образом:
Полный код этого руководства вы можете найти на CodeSandbox.
Заключение
Framer motion — это чрезвычайно полезная библиотека, которую можно использовать при создании анимации. Полный список утилит Framer-motion вы можете найти в разделе документации по анимации.
Спасибо, что прочитали, и удачи вам, играйте с этим и делайте некоторые настройки, чтобы получить лучший пользовательский курсор для вашей веб-страницы!
Если вам понравилось читать эту статью так же, как мне понравилось ее писать, то поставьте лайк и поделитесь ею со своими друзьями и не стесняйтесь общаться со мной в Twitter 👨💻.
