The basic idea here is to use a conic-gradient and do the following:
- set it to be the flashlight color and fairly transparent for the bright area (yellow from -25 to 25 degrees in the example here)
- set it to be dark and fairly opaque for the dark area (black with 95% opacity from 25 to 335 degrees in the example here)
- make the flashlight layer(s) fixed position and sit on top of the page
- to keep it from starting as a point, offset it (vertical location of 110% in the example here puts it 10% below the bottom of the page)
And that's it...it's actually really simple. Here is a working example on top of a dummy html page:
It's really clean and requires no javascript. It's probably possible to make it cleaner. An obvious question you might have is 'can I make a flashlight that moves with the mouse?' and the answer is sure...simply set the gradient position to the cursor location (this requires javascript but is simple):
All that took was adding a listener to the page for mouse or touch movements, updating --X and --Y variables on those events, and setting the conic-gradient position to be var(--X) var(--Y). Simple and looks pretty cool.
💥 DAILY JACKPOT IPRO356 แจกหนัก
ReplyDelete🎰 เกมสล็อต เริ่มต้น 1บาท
✨ ฟรีสปินง่าย แตกง่ายทุกเกม อัตราการจ่ายสูง
💸 สุ่มแจกเงินรางวัล มากกว่า x10,000+ เท่า
💖 มีสิทธิ์ลุ้นรับเงิน 10,000 กันทุกUSER
Thanks for sharing such informative news.
ReplyDeleteBecome Data science expert with Innomatics where you get a great experience and better knowledge.
Data science course in hyderabad
Data science traning in hyderabad