react 光标_带有React Framer运动部分的超酷自定义光标

react 光标

I am constantly surprised and inspired by so many websites on awwwards.com, many of which frequently feature cool cursors and various effects.

我不断地被awwwards.com上的许多网站感到惊讶和启发，其中许多网站经常具有漂亮的光标和各种效果。

In these series, I’ll break down the process of making custom cursors and try to experiment with various cool visual effects based on them, all using React.js and Framer Motion.

在这些系列中，我将分解制作自定义光标的过程，并尝试使用React.js和Framer Motion尝试基于它们的各种炫酷视觉效果。

基本自定义光标 (Basic Custom Cursor)

First, let’s start by defining some basic structure and styling for our custom cursor, which will just be a black circle and be placed in a fixed position at the top: 0; left: 0; corner for now.

首先，让我们为自定义光标定义一些基本结构和样式，这将是一个黑色圆圈，并放在top: 0; left: 0;的fixed位置top: 0; left: 0; top: 0; left: 0; 现在的角落。

function App() {  return (    <div className="App">      <div className="cursor" />    </div>  )}---------------------------------.cursor {  position: fixed;  left: 0;  top: 0;  width: 32px;  height: 32px;  border-radius: 16px;  background-color: black;}

Now that we have the custom cursor let’s bring it to life with some JavaScript. First, we need to capture the mousemove events and define a listener function which will animate our cursor to a correct position.

现在有了自定义光标，让我们通过一些JavaScript使其生动起来。首先，我们需要捕获mousemove事件并定义一个侦听器函数，该函数会将光标动画化到正确的位置。

Since we’ll be using a functional component we need to define our listener in a useEffect hook.

由于我们将使用功能组件，因此需要在useEffect挂钩中定义侦听器。

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 (    ...  )}...

The return function in the useEffect removes the listener on cleanup and makes sure that we don’t add multiple event listeners for the same event. The last argument given to useEffect is an empty array [], which means we’ll be only running the function once over the component’s lifecycle, since it doesn’t depend on any props.

useEffect中的return函数会在清理时删除侦听器，并确保我们不会为同一事件添加多个事件侦听器。为useEffect提供的最后一个参数是一个空数组[] ，这意味着我们将在组件的整个生命周期中仅运行一次该函数，因为它不依赖于任何道具。

As you can see we’ve also used useState to define the initial coordinates for our cursor, which we’ll change later when we switch to using some framer-motion magic

react 光标_带有React Framer运动部分的超酷自定义光标相关推荐

react 事件处理_在React中处理事件
react 事件处理在使用React渲染RESTful服务后,我们创建了简单的UI,用于渲染从RESTful服务获取的员工列表. 作为本文的一部分,我们将扩展同一应用程序以支持添加和删除员工操作. ...
python组件的react实现_【React源码解读】- 组件的实现
前言 react使用也有一段时间了,大家对这个框架褒奖有加,但是它究竟好在哪里呢? 让我们结合它的源码,探究一二!(当前源码为react16,读者要对react有一定的了解) 回到最初根据react ...
react上下文_了解React的新上下文API
react上下文介绍 (Introduction) In a world where there are lots of different front-end frameworks, it's a ...
react安装_「React实战」三分钟搭建React开发环境
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使 ...
input禁止光标_表单中readonly的input等标签，禁止光标进入（focus）的几种方式
需求及问题描遇新是直朋能到述在做移动端页面,需要在订单页面中显示表单数据,由于UI统一,所以就依旧采用form的结构来写结构,只读数据的标签自然要加readonly="readonly&q ...
C#软件开发实例.私人订制自己的屏幕截图工具（九）使用自定义光标，QQ截图时的光标
本实例全部文章目录 (一)功能概览 (二)创建项目.注册热键.显示截图主窗口 (三)托盘图标及菜单的实现 (四)基本截图功能实现 (五)针对拖拽时闪烁卡顿现象的优化 (六)添加配置管理功能 (七)添加 ...
react 交互_如何在React中建立动画微交互
react 交互 Microinteractions guide a user through your application. They reinforce your user experienc ...
React动画实现方案之 Framer Motion，让你的页面“自己”动起来
前言相信很多前端同学都或多或少和动画打过交道.有的时候是产品想要的过度效果:有的时候是UI想要的酷炫动画.但是有没有人考虑过,是不是我们的页面上面的每一次变化,都可以像是自然而然的变化:是不是每一次 ...
构建一个react项目_您想要了解更多有关React的内容吗？让我们构建一个游戏，然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...

react 光标_带有React Framer运动部分的超酷自定义光标

基本自定义光标 (Basic Custom Cursor)

react 光标_带有React Framer运动部分的超酷自定义光标相关推荐

最新文章

热门文章