Add a blend mode to project cursor?

Custom code
1

Does anyone know how to add a blend mode to the cursor?
Any help is appreciated! :grin:

`

1 Like
2

Hello @monica welcome to the Readymag forum :slight_smile:

Yes this is possible, please find below code from a project of ours where the wanted the cursor to change colour based upon the background so it would work on dark and lighter backgrounds.

<div class="sitecursor-outer">
  <div class="sitecursor"></div>
</div>

<style>
  body {
    cursor: none;
  }
  
  /* CURSOR CSS DESKTOP */
  .sitecursor,
  .sitecursor-outer {
    mix-blend-mode: difference;
    width: 10px;
    height: 10px;
  }

  .sitecursor-outer {
    position: fixed;
    top: -10px;
    left: -10px;
    z-index: 5000;
    pointer-events: none !important;
  }

  .sitecursor {
    position: absolute;
    background-color: black;
    mix-blend-mode: exclusion;
    pointer-events: none !important;
    -webkit-transition: transform .2s cubic-bezier(.175, .885, .32, 1.275);
    -moz-transition: transform .2s cubic-bezier(.175, .885, .32, 1.275);
    -ms-transition: transform .2s cubic-bezier(.175, .885, .32, 1.275);
    -o-transition: transform .2s cubic-bezier(.175, .885, .32, 1.275);
    transition: transform .2s cubic-bezier(.175, .885, .32, 1.275);
    transform-origin: center center;
  }

  .zooming.sitecursor {
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -ms-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);
    pointer-events: none !important;
  }

  /* CURSOR CSS TABLET - MOBILE */
  @media only screen and (max-width: 640px) {

    .sitecursor,
    .sitecursor-outer {
      width: 0px;
      height: 0px;
    }
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(function() {
    var prefix = function() {
      var a = window.getComputedStyle(document.documentElement, ""),
        b = (Array.prototype.slice.call(a).join("").match(/-(moz|webkit|ms)-/) || "" === a.OLink && ["", "o"])[1];
      return "WebKit|Moz|MS|O".match(new RegExp("(" + b + ")", "i"))[1], "-" + b + "-"
    }();
    $(document).mousemove(function(e) {
      mouseX = e.pageX + 15;
      mouseY = e.pageY - $(window).scrollTop() + 15;
      $('.sitecursor-outer').attr('style', prefix + 'transform:translate(' + mouseX + 'px,' + mouseY + 'px)');
    });

    $(document).on('mouseenter', 'a', function() {
      $('.sitecursor').addClass('zooming');
    }).on('mouseleave', 'a', function() {
      $(".sitecursor").removeClass("zooming")
    });
  })
</script>
3 Likes
3

You’re awesome. Thank you so much.

4

Hi there! Awesome! However, when hovering a slide show, the arrow cursor and the ‘new’ cursor are interfering. They both appear on top of each other. Any idea how to fix this? Thanks so much!

6

hello !
I’m a beginner when it comes to code, can somebody explain how you inject this code in a project please ? :pray: that would be really helpful, thank.