ties
KPCKevin Powell - Community
•Created by ties on 5/1/2024 in #front-end
Creating magnifying effect using JS, CSS, HTML
Hi guys! I started coding this year and I'm trying to make a website for my art installation. Everytime a user presses a play button, a different audio track gets played (I've just included some test tracks right now). It features a video playback and a custom cursor that needs to act like a magnifyer when the mouse is moving and the play button has been pressed. Try it by pressing play and hovering over the lava lamp. Here's the link to my codesandbox project:
//shrunk URL to codesandbox.io because it's way too long...
https://shorturl.at/grvV8
I'm trying to scale the size of the colored area inside the cursor to the same size as the cursor(240px) which is double. I can't seem to get it working. When using fakeVid.style.scale = 2, the positioning doesn't work anymore since we're scaling the entire video and not just the clipped part.
I've been stuck here for a while now. I've tried searching online for methods, but only found 1 method which used an image background instead which is not possible in this situation. Nonetheless I've included it at the bottom of my script.
Anyone that has some more javascript experience that could help me out here?
8 replies