Jump to content

ciao_paulina

Circle Member
  • Posts

    6
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

ciao_paulina's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. Hey everyone! Need some insight on a bit of code here.... The effect I want is for my mouse cursor to get bigger when hovering over a link. Right now, it is just staying the same size. I've put this code in the Custom CSS section and it works great, aside from the mouse cursor expanding on a hover. Please help!! //mouse <div class="cursor"> <div class="cursor__ball cursor__ball--big "> <svg height="30" width="30"> <circle cx="15" cy="15" r="12" stroke-width="0"></circle> </svg> </div> <div class="cursor__ball cursor__ball--small"> <svg height="10" width="10"> <circle cx="5" cy="5" r="4" stroke-width="0"></circle> </svg> </div> </div> <style> body .cursor { pointer-events: none; } body .cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 1000; } body .cursor__ball circle { fill: #f7f8fa; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script> const $bigBall = document.querySelector('.cursor__ball--big'); const $smallBall = document.querySelector('.cursor__ball--small'); const $hoverables = document.querySelectorAll('.hoverable'); // Listeners document.body.addEventListener('mousemove', onMouseMove); for (let i = 0; i < $hoverables.length; i++) {if (window.CP.shouldStopExecution(0)) break; $hoverables[i].addEventListener('mouseenter', onMouseHover); $hoverables[i].addEventListener('mouseleave', onMouseHoverOut); } // Move the cursor window.CP.exitedLoop(0);function onMouseMove(e) { TweenMax.to($bigBall, .4, { x: e.clientX - 15, y: e.clientY - 15 }); TweenMax.to($smallBall, .1, { x: e.clientX - 5, y: e.clientY - 7 }); } // Hover an element function onMouseHover() { TweenMax.to($bigBall, .3, { scale: 4 }); } function onMouseHoverOut() { TweenMax.to($bigBall, .3, { scale: 1 }); } </script>
  2. @creedon Just one color for all the links. I want the home page background to be black with white font text by default, and then when a user hovers over one of the navigational links, I would like the home page background to become lavender and the font text to become white.
  3. Hello there! I would really love to have the entire homepage BACKGROUND change color when the user hovers over a specific navigational link. Also, the text on the page would change color as well. So let's say the background is white and all the text on the page is black, when the user hovers over a navigational link, the background will become pink and all of the text on the page will become red. Here is the website I am going off of: https://www.studioyoke.co.uk/ I have also attached some photos to showcase what I am talking about... Any help would be much appreciated as coding is very new to me. Thanks!! @tuanphan
  4. @tuanphan Any idea what the code for the audio block would be?? Both the JS code to make it play on hover and the CSS code to hide the code?? I've a basic understanding, but everything I've tried has been unsuccessful thus far...
  5. @tuanphan The site is pacificsunelectric.com Password is: electric Also, I would really like to put a sound effect when someone hovers over the different pages on the navigation. I saw this effect done on this website: unseen.co Is there code I can use to achieve this? I have a 1 second .wav audio file that I want to sound off when someone hovers over the navigation links. Much appreciated!
  6. @tuanphan Hey there! I am also having a similar problem as listed above... I attached the code you mentioned in order to get the custom cursor effect. Everything works great EXCEPT that you can still see the hand mouse cursor as well as the new custom cursor. Do you know any code that could fix this little glitch? I will attach a video of the issue. Any help is much appreciated! mouse.mov
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.