Get In Touch
[email protected]
Th: +6620263180

มาแล้ว! CSS ตัวใหม่ เคลื่อนที่ได้อิสระ มีคุณสมบัติที่กำหนดเองได้ด้วย GSAP

CSS ตัวใหม่ มีคุณสมบัติที่กำหนดเองได้ด้วย GSAP

เรียนรู้วิธีทำให้ CSS masks เคลื่อนไหวตามตำแหน่งเคอร์เซอร์โดยใช้ GSAP และคุณสมบัติที่กำหนดเองสำหรับเอฟเฟกต์สปอตไลต์ที่ไม่ซ้ำกัน

CSS-GSAP

Text effects

เอฟเฟกต์ข้อความที่แตกต่างกันสองสามอย่างในการเล่นในส่วนนี้ การนำไปใช้ครั้งแรกควรใช้ข้อความที่มีสีสดใสบนพื้นพลังหลังสีเข้ม คุณสมบัติ CSS นี้ ขนาดตัวอข้อความไม่ได้มาตรฐานที่จะรองรับทุกเบราว์เซอร์ ดังนั้นเราจำเป็นต้องมีคำนำหน้าในเบราว์เซอร์เพื่อที่ให้ตัวอักษรมีขนาดเท่ากันและสามารถใช้งานได้ทุกเบราว์เซอร์ ต้องมี -webkit-text-stroke-webkit-stroke-width-webkit-stroke-color ไว้เสมอ

เพื่อให้ได้ผล “เรืองแสง” เราสามารถตั้งค่าสีข้อความเป็นค่าโปร่งใสและใช้ตัวกรอง CSS ที่มีค่าสีเดียวกัน (เรากําลังใช้คุณสมบัติแบบกําหนดเอง CSS สําหรับสีในตัวอย่างนี้) : drop-shadow

.heading {
  -webkit-text-stroke: 2px var(--primary);
  color: transparent;
  filter: drop-shadow(0 0 .35rem var(--primary));
}

ข้อความบนแผงสีมีการใช้เอฟเฟกต์ที่แตกต่างออกไป ความตั้งใจคือเพื่อให้รู้สึกเหมือนเอ็กซเรย์เล็กน้อยเผยให้เห็นโครงกระดูกที่อยู่ข้างใต้ การเติมข้อความมีรูปแบบจุดซึ่งสร้างขึ้นโดยใช้การไล่ระดับสีแบบรัศมีซ้ำ ๆ เพื่อให้ได้เอฟเฟกต์นี้กับข้อความอันที่จริงเราใช้มันกับพื้นหลังขององค์ประกอบและใช้ background-clip: text  ซึ่งต้องมีคำนำหน้าในเบราว์เซอร์ส่วนใหญ่ด้วย (ในขณะที่เขียน) อีกครั้งเราต้องตั้งค่าสีข้อความเป็นค่าโปร่งใสเพื่อดูผลลัพธ์ของไฟล์ background-clip

.hero--secondary .heading {
  background: radial-gradient(circle at center, white .11rem, transparent 0);
  background-size: .4rem .4rem;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
CSS-GSAP

Creating the spotlight

เรามีสองทางเลือกในการสร้างเอฟเฟกต์สปอตไลท์ด้วย clip-path และ mask-image สิ่งเหล่านี้สามารถสร้างผลกระทบที่คล้ายกันมาก แต่มีความแตกต่างที่สำคัญบางประการ

Clipping

เราสามารถปรับเปลี่ยนตัดรูปร่างด้วย clip-path เหมือนกับการตัดออกด้วยกรรไกร เหมาะสำหรับรูปทรงที่มีเส้นสะอาด ในกรณีนี้เราสามารถสร้างรูปทรงวงกลมสำหรับสปอตไลท์ของเราได้โดยใช้ ฟังก์ชัน : circle()

.hero--secondary {
  --clip: circle(20% at 70%);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

(clip-path ยังคงต้องมีคํานําหน้าใน Safari ดังนั้นฉันต้องการใช้คุณสมบัติที่กําหนดเองสําหรับสิ่งนี้)

clip-path นอกจากนี้ยังสามารถใช้วงรีรูปหลายเหลี่ยมเส้นทาง SVG หรือ URL ที่มีรหัสเส้นทาง SVG

Tracking the cursor

ตอนนี้เรามีหน้ากากของเรามันเป็นเรื่องของการติดตามตําแหน่งของเคอร์เซอร์ของผู้ใช้ซึ่งเราจะต้องใช้ Javascript ก่อนอื่นเราสามารถตั้งค่าคุณสมบัติที่กําหนดเองสําหรับศูนย์ประสานงานของหน้ากากไล่ระดับสีของเรา เราสามารถใช้ค่าเริ่มต้นเพื่อให้หน้ากากอยู่ในตําแหน่งเริ่มต้นก่อนที่จะดําเนินการ JS นอกจากนี้ยังจะช่วยให้มั่นใจได้ว่าผู้ใช้ที่ไม่ใช่เมาส์จะเห็นมาสก์แบบคงที่แทนที่จะไม่มีเลย

.hero--secondary {
  --mask: radial-gradient(circle at var(--x, 70%) var(--y, 50%), black 25%, transparent 0);
}

ใน JS ของเราเราสามารถฝังไฟล์ mousemove  จากนั้นอัปเดตคุณสมบัติที่กำหนดเองสำหรับตำแหน่งเปอร์เซ็นต์ x และ y ของวงกลมตามตำแหน่งเคอร์เซอร์:

const hero = document.querySelector('[data-hero]')

window.addEventListener('mousemove', (e) => {
  const { clientX, clientY } = e
  const x = Math.round((clientX / window.innerWidth) * 100)
  const y = Math.round((clientY / window.innerHeight) * 100)
	
  hero.style.setProperty('--x', `${x}%`)
  hero.style.setProperty('--y', `${y}%`)
})
เราใช้คุกกี้เพื่อประสบการณ์การใช้งานที่ดีที่สุดบนเว็บไซต์