- Установите React, SASS,…
- Создайте структуру папок
- Создайте домашнюю страницу и компонент курсора
- Подключите свое приложение к Unsplash API
- Найдите положение курсора и создайте окончательный эффект
1. Установите React, SASS,…
Чтобы использовать React, вам сначала нужно установить его с помощью NPM:
npx create-react-app nameOfYourProject
Установить SASS
npm install [email protected]
Установить Аксиос
npm install axios
Запустите свое приложение
cd nameOfYourProject npm start
2. Создайте структуру папок
Добавьте следующие папки в /src :
- /components (он будет содержать наш компонент Cursor)
- /pages (будет содержать нашу домашнюю страницу)
- /services (будет содержать конечные точки API)
- /styles (будет содержать стили нашего приложения)
3. Создайте домашнюю страницу и компонент курсора
Теперь нам нужно создать домашнюю страницу, поэтому добавьте Home.jsx в папку pages. Не забудьте также создать домашнюю папку в /styles и добавить в нее Home.scss.
В index.css добавьте несколько строк в тег body.
Затем добавьте Home в файл app.js.
Легко, не так ли! Создайте новую папку /cursorв /components и добавьте в нее Cursor.jsx. Добавьте компонент Cursor в Home.jsx.
4. Подключите свое приложение к Unsplash API.
Чтобы подключить ваше приложение к API Unsplash, у вас должен быть доступный ключ доступа. Нет ничего проще, перейдите на https://unsplash.com/developers и создайте учетную запись, чтобы получить свой ключ.
Вернитесь в свое приложение и создайте новый файл .env в корне вашего проекта.
Добавьте эту строку в .env :
После этого ЗАПУСТИТЕ ВАШЕ ПРИЛОЖЕНИЕ!
Создайте новый файл UnsplashApi.js в папке /services. Вы можете прочитать документацию (https://unsplash.com/documentation), чтобы получить больше информации о запросах.
Здесь мы использовали запрос на поиск фотографий по 3 параметрам:
- per_page=5 (чтобы получить только 5 фотографий)
- ориентация = портрет (чтобы убедиться, что все фотографии имеют портретную ориентацию)
- query= (для получения фотографий по определенным ключевым словам)
Вызовите API и отобразите фотографии:
5. Найдите положение курсора и создайте окончательный эффект
В порядке ! Таким образом, хитрость заключается в том, чтобы найти координаты положения курсора после каждого движения и указать значения для ваших фотографий. Для этого вы добавите события мыши onMouseMove.
Хорошо, мы передаем новое значение (cursorPosition) вашему компоненту Cursor, который содержит обновленные координаты курсора.
Наконец, добавьте новую функцию с именем imgsFollowing, которая изменит положение каждой фотографии.
Конечный результат: github
Если вам нравится, подписывайтесь на меня:
