Набор курсоров

Mason «Dipper» Pines

gravity fallsУстановлено 385 раз

Mason Dipper Pines cursor pack for Chrome - themed custom default pointer and matching hand hover. Chrome cursor fan art.

В расширение

This Mason "Dipper" Pines cursor is a perfect addition to any Gravity Falls fan's browser. Dipper is the show's main protagonist, a curious and adventurous boy who uncovers the mysterious secrets of the town of Gravity Falls. With this cursor, you'll always have Dipper by your side as you surf the web. The hand-drawn design captures Dipper's iconic hat and journal, making it a subtle yet recognizable addition to your browsing experience. Join Dipper on his adventures with this fun and functional cursor!

Курсор

Скачайте файл или скопируйте код для сайта, React, JavaScript или Roblox.

Скачать курсор для Windows (.cur)Скачать курсор для Roblox

CSSJavaScriptReactRoblox

Вставьте этот CSS в стили. Координаты hotspot уже указаны.

.custom-cursor {
  cursor: url('https://cute-cursor.com/cdn/packs/10646/arrow.png') 3 3, auto;
}

.custom-cursor {
  cursor: url('https://cute-cursor.com/cdn/packs/10646/arrow.png') 3 3, auto;
}

Вставьте этот JavaScript, чтобы применить курсор с правильным hotspot.

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/10646/arrow.png';
const HOTSPOT_X = 3;
const HOTSPOT_Y = 3;
const CURSOR_FALLBACK = 'auto';

const cursorValue = `url('${CURSOR_URL}') ${HOTSPOT_X} ${HOTSPOT_Y}, ${CURSOR_FALLBACK}`;

// Apply to the whole page
document.body.style.cursor = cursorValue;

// Or apply to a specific element
// const target = document.querySelector('.my-element');
// if (target) target.style.cursor = cursorValue;

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/10646/arrow.png';
const HOTSPOT_X = 3;
const HOTSPOT_Y = 3;
const CURSOR_FALLBACK = 'auto';

const cursorValue = `url('${CURSOR_URL}') ${HOTSPOT_X} ${HOTSPOT_Y}, ${CURSOR_FALLBACK}`;

// Apply to the whole page
document.body.style.cursor = cursorValue;

// Or apply to a specific element
// const target = document.querySelector('.my-element');
// if (target) target.style.cursor = cursorValue;

Скопируйте React-компонент и оберните им нужный контент.

import React from 'react';

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/10646/arrow.png';
const HOTSPOT_X = 3;
const HOTSPOT_Y = 3;
const CURSOR_FALLBACK = 'auto';

export default function CustomCursor({ children, className = '', as: Tag = 'div', style = {}, ...props }) {
  const cursorStyle = {
    cursor: `url('${CURSOR_URL}') ${HOTSPOT_X} ${HOTSPOT_Y}, ${CURSOR_FALLBACK}`,
    ...style,
  };

  return (
    <Tag className={className} style={cursorStyle} {...props}>
      {children}
    </Tag>
  );
}

// Usage:
// <CustomCursor>Your content</CustomCursor>

import React from 'react';

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/10646/arrow.png';
const HOTSPOT_X = 3;
const HOTSPOT_Y = 3;
const CURSOR_FALLBACK = 'auto';

export default function CustomCursor({ children, className = '', as: Tag = 'div', style = {}, ...props }) {
  const cursorStyle = {
    cursor: `url('${CURSOR_URL}') ${HOTSPOT_X} ${HOTSPOT_Y}, ${CURSOR_FALLBACK}`,
    ...style,
  };

  return (
    <Tag className={className} style={cursorStyle} {...props}>
      {children}
    </Tag>
  );
}

// Usage:
// <CustomCursor>Your content</CustomCursor>

Загрузите изображение в Roblox, замените YOUR_ASSET_ID и вставьте LocalScript.

-- Roblox custom cursor
-- Image URL: https://cute-cursor.com/cdn/packs/10646/arrow.png
-- Hotspot: 3, 3
-- Size: 128x128
-- 1. Upload the image to Roblox and copy rbxassetid
-- 2. Replace YOUR_ASSET_ID below
-- 3. Put this LocalScript in StarterPlayer > StarterPlayerScripts

local UserInputService = game:GetService("UserInputService")
local RunService = game:GetService("RunService")
local Players = game:GetService("Players")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local HOTSPOT_X = 3
local HOTSPOT_Y = 3
local CURSOR_WIDTH = 128
local CURSOR_HEIGHT = 128

local screenGui = Instance.new("ScreenGui")
screenGui.Name = "CustomCursorGui"
screenGui.ResetOnSpawn = false
screenGui.IgnoreGuiInset = true
screenGui.DisplayOrder = 999999
screenGui.Parent = playerGui

local cursor = Instance.new("ImageLabel")
cursor.Name = "CustomCursor"
cursor.BackgroundTransparency = 1
cursor.Size = UDim2.fromOffset(CURSOR_WIDTH, CURSOR_HEIGHT)
cursor.Image = "rbxassetid://YOUR_ASSET_ID"
cursor.ZIndex = 999999
cursor.Parent = screenGui

UserInputService.MouseIconEnabled = false

RunService.RenderStepped:Connect(function()
    local mouseLocation = UserInputService:GetMouseLocation()
    cursor.Position = UDim2.fromOffset(mouseLocation.X - HOTSPOT_X, mouseLocation.Y - HOTSPOT_Y)
end)

-- Roblox custom cursor
-- Image URL: https://cute-cursor.com/cdn/packs/10646/arrow.png
-- Hotspot: 3, 3
-- Size: 128x128
-- 1. Upload the image to Roblox and copy rbxassetid
-- 2. Replace YOUR_ASSET_ID below
-- 3. Put this LocalScript in StarterPlayer > StarterPlayerScripts

local UserInputService = game:GetService("UserInputService")
local RunService = game:GetService("RunService")
local Players = game:GetService("Players")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local HOTSPOT_X = 3
local HOTSPOT_Y = 3
local CURSOR_WIDTH = 128
local CURSOR_HEIGHT = 128

local screenGui = Instance.new("ScreenGui")
screenGui.Name = "CustomCursorGui"
screenGui.ResetOnSpawn = false
screenGui.IgnoreGuiInset = true
screenGui.DisplayOrder = 999999
screenGui.Parent = playerGui

local cursor = Instance.new("ImageLabel")
cursor.Name = "CustomCursor"
cursor.BackgroundTransparency = 1
cursor.Size = UDim2.fromOffset(CURSOR_WIDTH, CURSOR_HEIGHT)
cursor.Image = "rbxassetid://YOUR_ASSET_ID"
cursor.ZIndex = 999999
cursor.Parent = screenGui

UserInputService.MouseIconEnabled = false

RunService.RenderStepped:Connect(function()
    local mouseLocation = UserInputService:GetMouseLocation()
    cursor.Position = UDim2.fromOffset(mouseLocation.X - HOTSPOT_X, mouseLocation.Y - HOTSPOT_Y)
end)

Указатель