How can I add an animated custom cursor to my website?

HellGames
New Member
6 0 0

I would like to put an special and animated cursor in my website.
This is the cursor: https://youtu.be/UMdvufdewD8?si=0W0lr6mJfarAx3-y&t=11

 

But I don't know where I have to put the codes.

Can someone help me?

Replies 3 (3)

Rishihuptech
Shopify Partner
489 83 94

Hello @HellGames ,

 

Please add the below code to your theme code to create a custom cursor:

 

Add the below code to your theme.liquid before </body>

 

<div class="cursor"></div>
<div class="cursor2"></div>

<style>
.cursor {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid black;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(calc(-50% + 15px), -50%);
}

.cursor2 {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: black;
  opacity: .3;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width .3s, height .3s, opacity .3s;
}
.cursor:empty, cursor2:empty{
  display:block;
}
</style>
<script>
// UPDATE: I was able to get this working again... Enjoy!
document.addEventListener('DOMContentLoaded', function () {
var cursor = document.querySelector('.cursor');
var cursorinner = document.querySelector('.cursor2');

document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
});

document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursorinner.style.left = x + 'px';
  cursorinner.style.top = y + 'px';
});

document.addEventListener('mousedown', function(){
  cursor.classList.add('click');
});

document.addEventListener('mouseup', function(){
  cursor.classList.remove('click')
});
});
</script>

 

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
HellGames
New Member
6 0 0
Hi,

It's not working.
Rishihuptech
Shopify Partner
489 83 94

Hi @HellGames 
Can you share the store URL so I can assist you with anything?

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required