StepOne Posted March 24, 2023 Share Posted March 24, 2023 (edited) Hey guys, I came across this flashlight codepen snippet and wanted to implement it to my website where it would reveal some 'easter eggs' on the 'fun-side' of the website. When I just copy-paste the css code into the custom css space and the js part into the header, nothing squarespace detects an error with the css variables '--*' . Any way to get around this? Thank you! Codepen: https://codepen.io/tomhodgins/pen/egWjBb Website: https://steponebeta.squarespace.com Password: GertjanHiel1760 The squarekicker plugin is also active for this website. Edited March 24, 2023 by StepOne Clarity Link to comment
Solution tuanphan Posted March 29, 2023 Solution Share Posted March 29, 2023 Try adding this to Settings > Advanced > Code Injection > Footer <style> /* Flashlight Overlay */ :root { cursor: none; --cursorX: 50vw; --cursorY: 50vh; } :root:before { content: ''; display: block; width: 100%; height: 100%; position: fixed; pointer-events: none; background: radial-gradient( circle 10vmax at var(--cursorX) var(--cursorY), rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.95) 100% ) } </style> <script> function update(e){ var x = e.clientX || e.touches[0].clientX var y = e.clientY || e.touches[0].clientY document.documentElement.style.setProperty('--cursorX', x + 'px') document.documentElement.style.setProperty('--cursorY', y + 'px') } document.addEventListener('mousemove',update) document.addEventListener('touchmove',update) </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
StepOne Posted March 31, 2023 Author Share Posted March 31, 2023 Hey Tuanphan, Thank you for the reply. The code you provided works only when "z-index: 10000" is added to the css part. Other than that it is exactly what I needed, thank you! tuanphan 1 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