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?
7 Replies
link does not work. just paste the full url
(also, I don't like to be tracked)
Yes please don't use shortUrl. Just link it no one here cares about ugly links we know
oh sure, sorry! I forgot to disable layout in the link, haha. here it is: https://codesandbox.io/p/devbox/elastic-dream-3j878w?file=%2Forderbydisorder.html
also, if you really don't like the long URL, you can just use discord's markdown support for links:
turns into
Codesandbox
oh cool, didn't know that. will use that in the future. thanks
think the easiest is to update the transform-origin of the duplicated video to the x/y value of the mouse and then scale it up.
Not able to test is now, if that doesn't work maybe I can look at it later
you absolute legend, that did the trick. thanks man!