Baru-baru ini, efek lampu sorot semakin populer di situs web dan aplikasi modern, menambahkan sentuhan interaktivitas dan kesenangan pada berbagai elemen, seperti kartu. Efek yang menarik secara visual ini menarik perhatian pengguna ke area tertentu pada halaman, menjadikan antarmuka pengguna lebih dinamis dan menarik.
Salah satu contoh bagus dari efek lampu sorot dalam aksi dapat dilihat di situs web Liveblock:
Efek sorotan liveblock
Pada artikel ini, kita akan mengeksplorasi cara membuat efek lampu sorot modern menggunakan React + Tailwind CSS / vanilla CSS, dan mendemonstrasikan bagaimana Anda dapat dengan mudah mengimplementasikannya di proyek Anda sendiri. Ayo selami!
Komponen
Coba gerakkan mouse Anda ke atas kartu di bawah ini untuk melihat efek lampu sorot beraksi:
Halo!
Perusahaan itu sendiri adalah perusahaan yang sangat sukses. Itu menghalangi pilihan mereka yang terlahir buta, ketika mereka telah dilunakkan dalam pekerjaan apa pun yang nyaman bagi sebagian orang.
Bereaksi + TailwindCSS
export const CardSpotlightEffect = () => {
const divRef = useRef<HTMLDivElement>(null);
const [isFocused, setIsFocused] = useState(false);
const [position, setPosition] = useState( x: 0, y: 0 );
const [opacity, setOpacity] = useState(0);
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
if (!divRef.current || isFocused) return;
const div = divRef.current;
const rect = div.getBoundingClientRect();
setPosition( x: e.clientX - rect.left, y: e.clientY - rect.top );
const handleFocus = () => {
const handleBlur = () => {
const handleMouseEnter = () => {
const handleMouseLeave = () => {
onMouseMove=handleMouseMove
onMouseEnter=handleMouseEnter
onMouseLeave=handleMouseLeave
className="to-slate-950 relative max-w-md overflow-hidden rounded-xl border border-slate-800 bg-gradient-to-r from-slate-900 px-8 py-16 shadow-2xl"
className="pointer-events-none absolute -inset-px opacity-0 transition duration-300"
background: `radial-gradient(600px circle at $position.xpx $position.ypx, rgba(255,255,255,.06), transparent 40%)`,
<span className="mb-4 inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
className="h-6 w-6 text-white"
xmlns="http://www.w3.org/2000/svg"
<h3 className="mb-2 font-medium tracking-tight text-white">Hello!</h3>
<p className="text-sm text-slate-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex
obcaecati natus eligendi delectus, cum deleniti sunt in labore nihil
quod quibusdam expedita nemo.
Komponen menggunakan variabel status untuk mengelola posisi lampu sorot, opasitas, dan status fokus.
Penangan kejadian ditentukan untuk skenario berikut:
- Gerakan tikus (
handleMouseMove): Perbarui posisi lampu sorot berdasarkan koordinat mouse relatif terhadap kartu. Fokus (handleFocus) dan kabur (handleBlur): Kelola visibilitas lampu sorot dengan menyesuaikan opasitasnya saat kartu mendapatkan atau kehilangan fokus. - Tikus masuk (
handleMouseEnter) dan meninggalkan (handleMouseLeave): Jadikan lampu sorot hanya terlihat saat mouse berada di dalam area kartu. - Komponen merender elemen div yang mewakili kartu, dan div lain di dalamnya untuk membuat efek lampu sorot menggunakan latar belakang gradien radial. Efek sorotan mengikuti mouse saat bergerak di atas kartu, menciptakan tampilan yang dinamis dan interaktif.
Bereaksi + CSS
Jika Anda tidak ingin menggunakan Tailwind CSS, Anda dapat menggunakan CSS berikut untuk mendapatkan efek yang sama.
import React, useRef, useState from "react";
import "./CardSpotlightEffect.css";
export const CardSpotlightEffect = () => {
const divRef = useRef(null);
const [isFocused, setIsFocused] = useState(false);
const [position, setPosition] = useState( x: 0, y: 0 );
const [opacity, setOpacity] = useState(0);
const handleMouseMove = (e) => {
if (!divRef.current || isFocused) return;
const div = divRef.current;
const rect = div.getBoundingClientRect();
setPosition( x: e.clientX - rect.left, y: e.clientY - rect.top );
const handleFocus = () => {
const handleBlur = () => {
const handleMouseEnter = () => {
const handleMouseLeave = () => {
onMouseMove=handleMouseMove
onMouseEnter=handleMouseEnter
onMouseLeave=handleMouseLeave
className="card-spotlight-effect"
background: `radial-gradient(600px circle at $position.xpx $position.ypx, rgba(255,255,255,.06), transparent 40%)`,
<span className="icon">/* SVG icon here */</span>
<h3 className="greeting">Hello!</h3>
<p className="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex
obcaecati natus eligendi delectus, cum deleniti sunt in labore nihil
quod quibusdam expedita nemo.
Pada artikel ini, kita telah menjelajahi cara membuat efek lampu sorot yang modern dan menarik menggunakan React dan CSS. Dengan menerapkan efek ini di situs web atau aplikasi, Anda dapat menambahkan lapisan interaktivitas yang menarik perhatian pengguna dan meningkatkan pengalaman pengguna secara keseluruhan.
Ingat, efek lampu sorot tidak terbatas pada kartu saja; Anda dapat menerapkannya ke berbagai elemen, seperti bidang masukan atau tombol, untuk membuat antarmuka Anda lebih dinamis dan menarik secara visual. Jika Anda tertarik untuk mempelajari lebih lanjut tentang efek interaktif, lihat artikel saya sebelumnya di Membuat batas lampu sorot interaktif dengan CSS dan Bereaksi.
Jangan ragu untuk bereksperimen dan mengadaptasi teknik yang dibahas dalam tutorial ini agar sesuai dengan kebutuhan dan preferensi desain khusus Anda.
Diterbitkan: 5/10/2023
Karena cuma bisa terkait kepada pihak yang sediakan knowledge togel hkg saja yang mampu meraih knowledge sgp lengkap. Lantas dengan sulit nya terhubung website togel singapore pools terhadap negara +62. Maka alangkah baiknya berlangganan pada halaman ini untuk menemukan data keluaran sgp hari ini live tercepat cuma disini.
