Malakaloh Posted March 14 Share Posted March 14 (edited) Hello, I have some code that basically creates a blur effect for the whole page and has a circle element that follows the mouse and unblurs the area that the mouse is hovering over. I can easily get the effect to work outside of square space but inside my webpage, it is not working. I keep running into issues with the mouse tracking being off or unaligned. It also shifts when I scroll down the page. I added a site link that has perfect tracking and I was hoping I could get some help trying to achieve this with my code. Here is the website that has good tracking https://www.gabbyguenther.com/ Is the size of the code block a factor? Am I injecting the code in the wrong place? Additionally, when trying to inject <body> code is there a way to ensure that everything fits in the block? Here is my code. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parallax Effect</title> <style type="text/css"> h2 { color: white; } section { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; justify-content: center; align-items: center; background: url(https://i.postimg.cc/RFfjWPnk/bluebackground.jpg); background-size: cover; background-position: center; background-attachment: fixed; overflow: hidden; } section .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; background: url(https://i.postimg.cc/RFfjWPnk/bluebackground.jpg); background-size: cover; background-position: center; background-attachment: fixed; } section .box:nth-child(1) { filter:blur(3px); } section .box:nth-child(2) { clip-path: circle(144px at var(--x) var(--y)); } section .box h2 { border: 2px solid transparent; font-size: 1.5em; transform: translate(0, 0); } .circle { --size: 75px; height: var(--size); width: var(--size); pointer-events: none; position: absolute; top: -37.5px; left: -37.5px; border: 2px solid transparent; border-radius: 50%; box-shadow: 0 5px 25px rgba(0, 0, 0,.01); transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)); } .circle.active { --size: 42px; border-color: var(--cursorcolors); background-color: var(--cursorcolors); } </style> </head> <body> <section> <div class="box"> <h2 style="text-align: center; padding-bottom: 44px; padding-top: 80px;" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">DREAMVILLE X SUMMER LEAGUE</h2> <h2 style="text-align: left; padding-left: 144px; padding-bottom: 44px;" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">CULTURE DAY</h2> <h2 style="text-align: right; padding-right: 144px; padding-bottom: 44px;" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">14 LEAGUE</h2> <h2 style="text-align: center; padding-left: 180px; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">YGC GLOBAL</h2> <h2 style="text-align: left; padding-left: 180px; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">BOSTON TO BEAL ST.</h2> <h2 style="text-align: center; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">CULTURE DAY</h2> <h2 style="text-align: right; padding-right: 200px; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">7UICE</h2> <h2 style="text-align: left; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">CELTICS SCHEDUAL RELEASE</h2> <h2 style="text-align: center; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">NAYBORHOOD HEALER</h2> <h2 style="text-align: right; padding-right: 180px; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">HEAVY HEARTED CONVERSATIONS</h2> <h2 style="text-align: left; padding-left: 70px; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">THE KID LAROI</h2> </div> <div class="box"> <h2 style="text-align: center; padding-bottom: 44px; padding-top: 80px;" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">DREAMVILLE X SUMMER LEAGUE</h2> <h2 style="text-align: left; padding-left: 144px; padding-bottom: 44px;" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">CULTURE DAY</h2> <h2 style="text-align: right; padding-right: 144px; padding-bottom: 44px;" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">14 LEAGUE</h2> <h2 style="text-align: center; padding-left: 180px; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">YGC GLOBAL</h2> <h2 style="text-align: left; padding-left: 180px; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">BOSTON TO BEAL ST.</h2> <h2 style="text-align: center; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">CULTURE DAY</h2> <h2 style="text-align: right; padding-right: 200px; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">7UICE</h2> <h2 style="text-align: left; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">CELTICS SCHEDUAL RELEASE</h2> <h2 style="text-align: center; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">NAYBORHOOD HEALER</h2> <h2 style="text-align: right; padding-right: 180px; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">HEAVY HEARTED CONVERSATIONS</h2> <h2 style="text-align: left; padding-left: 70px; padding-bottom: 44px" onclick="event.stopPropagation(); window.location.href='https://www.google.com/';">THE KID LAROI</h2> </div> <div class="circle"></div> </section> <script> const pos = document.documentElement; pos.addEventListener("mousemove", e => { pos.style.setProperty('--x', e.pageX + "px"); pos.style.setProperty('--y', e.pageY + "px"); }); $(window).mousemove(function(e) { $("a") .on("mouseenter", function() { $('.circle').addClass("active") }) .on("mouseleave", function() { $('.circle').removeClass("active") }); }); </script> </body> </html> Edited March 25 by Malakaloh Forgot to include a link Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment