Hi, I'm Riley Brown

Professional training for artists coming soon

01

Add the following script into the body section of your websites custom code

<script></script>

class Cursor {

      constructor() {

       this._dom = {};

       this._cursors = ["cursor_1", "cursor_2"];

       this.initHtml();

       this.initCss();

       this.initEvent();

   }

   initHtml() {

       let _cursor;

       const _this = this;

       this._dom["body"] = document.getElementsByTagName('body')[0];

       this._cursors.forEach(function (value) {

           _cursor = document.createElement('div');

           _cursor.className = value;

           _cursor.id = value;

           _this._dom.body.appendChild(_cursor)

           _this._dom[value] = _cursor

       });

   }

   initCss() {

       const style_cursor = { position: 'fixed', borderRadius: '50%', transform: 'translateX(-50%) translateY(-50%)', pointerEvents: 'none', left: '100px', top: '50%' }

       const style_cursor_1 = { backgroundColor: '#fff', height: '5px', width: '5px', zIndex: 99999 }

       const style_cursor_2 = { mixBlendMode: 'normal', border: '1px solid white', height: ' 30px', width: '30px', zIndex: 99998, webkitTransition: 'all 0.3s ease-out', mozTransition: 'all 0.3s ease-out', oTransition: 'all 0.3s ease-out', msTransition: 'all 0.3s ease-out', transition: 'all 0.3s ease-out' }

       this.setStylesOnElement(Object.assign({}, style_cursor, style_cursor_1), this._dom.cursor_1)

       this.setStylesOnElement(Object.assign({}, style_cursor, style_cursor_2), this._dom.cursor_2)

   }

   initEvent() {

       const _this = this;

       this._dom.body.addEventListener("mousemove", function (e) {

           let _clientX = e.clientX;

           let _clientY = e.clientY;

           let _position = { top: _clientY + "px", left: _clientX + "px" };

           _this.setStylesOnElement(_position, _this._dom.cursor_1)

           _this.setStylesOnElement(_position, _this._dom.cursor_2)

       })

   }

   setStylesOnElement(styles, element) {

       Object.assign(element.style, styles);

   }

}

const _cursor = new Cursor()

02

Hide the cursor on your body element. Scroll to the bottom of the styles panel and swap from auto to none.

OR

You can add this into your custom code:

<style></style>

  * {

      cursor: none;

  }

BROWWN.COM