Ефект слідування піксельного курсора з використанням Next.js та React.js

Що ви створите

Цей ефект створює серію маленьких квадратів, які слідують за курсором миші, створюючи динамічний та інтерактивний візуальний ефект.

Демо

Початок роботи

Давайте зануримося в реалізацію!

1. Ініціалізація проєкту

Почніть зі створення застосунку Next.js. Виконайте наступну команду у вашому терміналі:

npx create-next-app@latest client

2.

Налаштування макета

Для спрощення, видаліть файли за замовчуванням і створіть порожню стартову точку:

page.js

'use client';  
import styles from './page.module.css';  

export default function Home() {  
 return (  
   <div className={styles.container}>  
     <div className={styles.body}>  
       Ми спеціалізуємося на перетворенні простору в складні форми  
     </div>  
   </div>  
 );  
}

page.module.css

.container {  
  display: flex;  
  height: 100vh;  
  align-items: center;  
  justify-content: center;  
  background-color: white;  
}  

.container .body {  
  font-size: 6vw;  
  text-align: center;  
  font-weight: 700;  
  width: 70%;  
  position: relative;  
  z-index: 1;  
}

Має вийти щось подібне:

Примітка: Якщо ви не використовуєте Next.js, а працюєте з Vanilla React або будь-яким іншим клієнтським інструментом, вам не потрібно зберігати значення вікна у стані.

3.

Рендеринг блоків

Тепер, коли ми додали базовий макет, створимо серію блоків у HTML, які дозволять нам створити ефект слідування.

Збереження ширини вікна в стані

Оскільки для створення блоків потрібне значення ширини вікна, спочатку збережемо його в стані.

'use client';  

import styles from './page.module.css';  
import { useState, useEffect } from 'react';  

export default function Home() {  

 const [windowsWidth, setWindowsWidth] = useState(0);  

 useEffect(() => {  
   setWindowsWidth(window.innerWidth);  
 }, []);  

 return (  
   <div className={styles.container}>  
     <div className={styles.body}>  
       Ми спеціалізуємося на перетворенні простору в складні форми  
     </div>  
   </div>  
 );  
}

Рендеринг різних блоків

Коли ми зберегли ширину вікна у стані, можемо використати її для рендерингу блоків.

...

const [windowsWidth, setWindowsWidth] = useState(0);  

const getBlocks = () => {  
 const blockSize = windowsWidth * 0.05;  
 const nbOfBlocks = Math.ceil(window.innerHeight / blockSize);  
 return [...Array(nbOfBlocks).keys()].map((_, index) => {  
   return <div key={index} style={{ height: blockSize, width: '100%' }}></div>;  
 });  
};  

return (  
  <div className={styles.container}>  
    <div className={styles.grid}>  
      {windowsWidth > 0 &&  
        [...Array(20).keys()].map((_, index) => {  
          return (  
            <div className={styles.column} key={index}>  
              {getBlocks()}  
            </div>  
          );  
        })}  
    </div>  
  </div>  
);  

Home.module.css

.container .grid {  
  display: flex;  
  height: 100%;  
  width: 100%;  
  overflow: hidden;  
  position: absolute;  
}  

.grid .column {  
  width: 5vw;  
}  

.column div {  
  width: 100%;  
  height: 5vw;  
  border: 1px solid red;  
}  

4.

Додайте ефект слідування

Додайте інтерактивність, змінюючи кольори блоків при наведенні:

page.js

...  
const getBlocks = () => {  
 const blockSize = windowsWidth * 0.05;  
 const nbOfBlocks = Math.ceil(window.innerHeight / blockSize);  
 return [...Array(nbOfBlocks).keys()].map((_, index) => {  
   return (  
     <div  
       key={index}  
       style={{ height: blockSize, width: '100%' }}  
       onMouseOver={(e) => colorize(e.target)}  
     ></div>  
   );  
 });  
};  

const colorize = (el) => {  
 el.style.backgroundColor = 'black';  
 setTimeout(() => {  
   el.style.backgroundColor = 'transparent';  
 }, 300);  
};  
...  

5.

Додайте завершальні штрихи

Нарешті, покращимо візуальний вигляд за допомогою режимів змішування:

page.module.css

.container .body {  
 text-transform: uppercase;  
 mix-blend-mode: difference;  
 color: white;  
 pointer-events: none;  
}

Підсумок

Ось і все! Ви створили приголомшливий ефект слідування піксельного курсора.

Хочете більше таких анімацій? Відвідайте BuildFast.es, щоб дослідити всі наші анімації та підняти свої проєкти на новий рівень!

Доступ до коду

Отримайте повний код тут: www.buildfast.es

Ця безкоштовна анімація — лише початок. З BuildFast ви заощадите час і легко створюватимете візуально приголомшливі вебдосвіди.

Спробуйте BuildFast сьогодні та трансформуйте свій процес веброзробки!

Перекладено з: Pixel Cursor Trailing Effect with Next.js and React.js