Jump to content

CSS for following mouse cursor

Recommended Posts

  • Replies 2
  • Views 1.5k
  • Created
  • Last Reply

They used this code (Add to Home > Settings > Advanced > Code injection > Header)

<style>
  @media (hover: none) {.cursor {display:none !important;}}
* {
    cursor: none;
  --cursorcolors: #d9a74a;
}
.cursor {
    --size: 8px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.cursor.cursor-ring {
    background-color: transparent;
    border: 2px solid var(--cursorcolors);
    --size: 36px;
    transition: top .2s, left .2s,
                width .2s, height .2s,
                background-color .2s, border-color 0.2s;
    transition-timing-function: ease-out;
}
.cursor.cursor-bull {
    background: var(--cursorcolors);
    transition: width .2s, height .2s;
}
.cursor-ring.active {
    --size: 42px;
    border-color: var(--cursorcolors);
    background-color: var(--cursorcolors);
}
.cursor-bull.active {
      --size: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    $(window).mousemove(function(e) {     
        $(".cursor").css({
            left: e.pageX,
            top: e.pageY
        })    
    });
    $(window).mousemove(function(e) {
      $("a")
    .on("mouseenter", function() {   
    $('.cursor').addClass("active")   
    })  
    });
    $(window).mousemove(function(e) {
      $("a")
    .on("mouseleave", function() {    
    $('.cursor').removeClass("active")    
    })
    });
  </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
  • 6 months later...
On 9/21/2020 at 9:50 AM, tuanphan said:

They used this code (Add to Home > Settings > Advanced > Code injection > Header)


<style>
  @media (hover: none) {.cursor {display:none !important;}}
* {
    cursor: none;
  --cursorcolors: #d9a74a;
}
.cursor {
    --size: 8px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.cursor.cursor-ring {
    background-color: transparent;
    border: 2px solid var(--cursorcolors);
    --size: 36px;
    transition: top .2s, left .2s,
                width .2s, height .2s,
                background-color .2s, border-color 0.2s;
    transition-timing-function: ease-out;
}
.cursor.cursor-bull {
    background: var(--cursorcolors);
    transition: width .2s, height .2s;
}
.cursor-ring.active {
    --size: 42px;
    border-color: var(--cursorcolors);
    background-color: var(--cursorcolors);
}
.cursor-bull.active {
      --size: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    $(window).mousemove(function(e) {     
        $(".cursor").css({
            left: e.pageX,
            top: e.pageY
        })    
    });
    $(window).mousemove(function(e) {
      $("a")
    .on("mouseenter", function() {   
    $('.cursor').addClass("active")   
    })  
    });
    $(window).mousemove(function(e) {
      $("a")
    .on("mouseleave", function() {    
    $('.cursor').removeClass("active")    
    })
    });
  </script>

 

@tuanphan Is there a way to lock this effect to the cursor on scroll? I have it coded in correctly, but the effect gets left behind when I scroll. How do I fix this? www.pollenmedialab.com

 

Thank you! 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.