Cursors personalitzats frescos amb React + Framer Motion

Bloc

Cursors personalitzats frescos amb React + Framer Motion

Estic constantment sorprès i inspirat per tants llocs web awwwards.com , molts dels quals sovint presenten cursors genials i diversos efectes.

En aquestes sèries, desglossaré el procés de fabricació de cursors personalitzats i intentaré experimentar amb diversos efectes visuals interessants basats en ells, tot utilitzant React.js i Framer Motion .

Cursor personalitzat bàsic

Primer, comencem definint una estructura i un estil bàsic per al cursor personalitzat, que només serà un cercle negre i es col·locarà en un fixed posició a top: 0; left: 0; racó per ara.

function App() { return ( ) } --------------------------------- .cursor { position: fixed; left: 0; top: 0; width: 32px; height: 32px; border-radius: 16px; background-color: black; }

Ara que tenim el cursor personalitzat, donem-li vida amb una mica de JavaScript. En primer lloc, hem de capturar el mousemove esdeveniments i definir una funció d’oient que animarà el cursor a una posició correcta.

Com que farem servir un component funcional, hem de definir el nostre oient en un useEffect ganxo.

import React, { useState, useEffect } from 'react' function App() { const [cursorXY, setCursorXY] = useState({ x: -100, y: -100 }) useEffect(() => { const moveCursor = (e) => { } window.addEventListener('mousemove', moveCursor) return () => { window.removeEventListener('mousemove', moveCursor) } }, []) return ( ... ) } ...

# framer-motion #css #cursor #react #react native

medium.com

Cursors personalitzats frescos amb React + Framer Motion

En aquestes sèries, desglossaré el procés de creació de cursors personalitzats i intentaré experimentar amb diversos efectes visuals interessants basats en ells, tot amb React.js i Framer Motion.