Curzr | Cross LIne
There's a range of cursors which is totally free. Each cursor is unique and has its own behaviour for you to explore. Furthermore, they are customisable with the live preview. It is supported by all browsers, try to copy and paste it into your creative project now!
| <header> | |
| <section class="upper">30 JULY</section> | |
| <section class="lower"> | |
| <div> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.87 31.87"> | |
| <path class="cls-1" d="M15.94,31.87,13,24.57A10.32,10.32,0,0,0,7.3,18.88L0,15.94,7.3,13A10.32,10.32,0,0,0,13,7.3L15.94,0l2.94,7.3A10.32,10.32,0,0,0,24.57,13l7.3,2.95-7.3,2.94a10.32,10.32,0,0,0-5.69,5.69Z" /> | |
| </svg> | |
| </div> | |
| <h6>CROSS LINE</h6> | |
| </section> | |
| </header> | |
| <main> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" class="center-triangle"> | |
| <g class="triangle-shadow"> | |
| <polygon points="220 112.61 282 220 344 327.39 220 327.39 96 327.39 158 220 220 112.61" /> | |
| </g> | |
| <polygon class="triangle" points="200 92.61 262 200 324 307.39 200 307.39 76 307.39 138 200 200 92.61" /> | |
| </svg> | |
| </main> | |
| <footer> | |
| <section class="upper"><svg class="barcode"></svg></section> | |
| <section class="lower"> | |
| <a href="https://profyr.com" target="_blank"> | |
| <img alt="curzr logo" width="75" src="data:image/png;base64,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"> | |
| </a> | |
| </section> | |
| </footer> | |
| <div class="curzr" hidden> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> | |
| <defs> | |
| <style> | |
| .line { | |
| stroke: #1a1a1a; | |
| stroke-linecap: round; | |
| stroke-miterlimit: 10; | |
| } | |
| </style> | |
| </defs> | |
| <line class="line line-v" x1="50" y1="40" x2="50" y2="60" /> | |
| <line class="line line-h" x1="40" y1="50" x2="60" y2="50" /> | |
| </svg> | |
| </div> |
| class CrossLine { | |
| constructor() { | |
| this.root = document.body | |
| this.cursor = document.querySelector(".curzr") | |
| this.verLine = document.querySelector(".curzr .line-v") | |
| this.horLine = document.querySelector(".curzr .line-h") | |
| // For Triangle | |
| this.triangle = document.querySelector(".triangle") | |
| this.triangleShadow = document.querySelector(".triangle-shadow") | |
| this.distanceX = 0 | |
| this.distanceY = 0 | |
| this.pointerX = 0 | |
| this.pointerY = 0 | |
| this.previousPointerX = 0 | |
| this.previousPointerY = 0 | |
| this.cursorSize = 100 | |
| this.moving = false | |
| this.cursorStyle = { | |
| boxSizing: 'border-box', | |
| position: 'fixed', | |
| top: `${ this.cursorSize / -2 }px`, | |
| left: `${ this.cursorSize / -2 }px`, | |
| zIndex: '2147483647', | |
| width: `${ this.cursorSize }px`, | |
| height: `${ this.cursorSize }px`, | |
| borderRadius: '50%', | |
| overflow: 'visible', | |
| transition: '200ms, transform 100ms', | |
| userSelect: 'none', | |
| pointerEvents: 'none' | |
| } | |
| this.init(this.cursor, this.cursorStyle) | |
| } | |
| init(el, style) { | |
| Object.assign(el.style, style) | |
| this.cursor.removeAttribute("hidden") | |
| } | |
| move(event) { | |
| this.previousPointerX = this.pointerX | |
| this.previousPointerY = this.pointerY | |
| this.pointerX = event.pageX + this.root.getBoundingClientRect().x | |
| this.pointerY = event.pageY + this.root.getBoundingClientRect().y | |
| this.distanceX = (this.previousPointerX - this.pointerX) / 1.5 | |
| this.distanceY = (this.previousPointerY - this.pointerY) / 1.5 | |
| this.verLine.setAttribute('y1', Math.min(40, (40 + this.distanceY))) | |
| this.verLine.setAttribute('y2', Math.max(60, (60 + this.distanceY))) | |
| this.horLine.setAttribute('x1', Math.min(40, (40 + this.distanceX))) | |
| this.horLine.setAttribute('x2', Math.max(60, (60 + this.distanceX))) | |
| this.cursor.style.transform = `translate3d(${this.pointerX}px, ${this.pointerY}px, 0)` | |
| this.triangleShadow.style.transform = `translate3d(${this.pointerX / (window.innerWidth / 40)}px, ${this.pointerY / (window.innerWidth / 40)}px, 0)` | |
| this.triangle.style.transform = `translate3d(${this.pointerX / (window.innerWidth / 20)}px, ${this.pointerY / (window.innerWidth / 20)}px, 0)` | |
| if (event.target.localName === 'img' || | |
| event.target.localName === 'polygon' || | |
| event.target.onclick !== null || | |
| Array.from(event.target.classList).includes('curzr-hover')) { | |
| this.hover() | |
| } | |
| this.moving ? this.stop() : this.moving = true | |
| } | |
| hover() { | |
| this.cursor.style.transform += ` rotate(45deg)` | |
| } | |
| stop() { | |
| setTimeout(() => { | |
| this.verLine.setAttribute('y1', 40) | |
| this.verLine.setAttribute('y2', 60) | |
| this.horLine.setAttribute('x1', 40) | |
| this.horLine.setAttribute('x2', 60) | |
| this.moving = false | |
| }, 50) | |
| } | |
| } | |
| (() => { | |
| const cursor = new CrossLine() | |
| document.onmousemove = function (event) { | |
| cursor.move(event) | |
| } | |
| document.ontouchmove = function (event) { | |
| cursor.move(event.touches[0]) | |
| } | |
| })() | |
| JsBarcode(".barcode", "01", { | |
| lineColor: "#1a1a1a", | |
| width: 2, | |
| height: 20, | |
| displayValue: false | |
| }) |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"></script> |
| * { | |
| box-sizing: border-box; | |
| cursor: none; | |
| } | |
| body { | |
| width: 100%; | |
| height: 100vh; | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| overflow: hidden; | |
| main { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: inherit; | |
| .center-triangle { | |
| width: 300px; | |
| .triangle { | |
| fill: #fff; | |
| stroke: #1a1a1a; | |
| stroke-width: 1; | |
| transition: 100ms; | |
| } | |
| .triangle-shadow { | |
| mix-blend-mode: multiply; | |
| opacity: 0.75; | |
| transition: 200ms; | |
| } | |
| } | |
| } | |
| header, footer { | |
| position: absolute; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| align-items: center; | |
| top: 0; | |
| width: 75px; | |
| height: inherit; | |
| } | |
| header { | |
| left: 0; | |
| font-size: .875rem; | |
| letter-spacing: 2px; | |
| word-spacing: 4px; | |
| white-space: nowrap; | |
| .upper { | |
| position: relative; | |
| transform: rotate(-90deg) translateX(-100px); | |
| &::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| width: 30px; | |
| height: 1px; | |
| margin-left: 1rem; | |
| background: #1a1a1a; | |
| } | |
| } | |
| .lower { | |
| display: flex; | |
| align-items: center; | |
| transform: rotate(-90deg) translateX(85px); | |
| svg { | |
| width: 25px; | |
| } | |
| h6 { | |
| padding-left: 1rem; | |
| } | |
| } | |
| } | |
| footer { | |
| right: 0; | |
| .upper { | |
| .barcode { | |
| transform: rotate(90deg) translateX(60px) !important; | |
| } | |
| } | |
| .lower { | |
| transform: rotate(90deg) translateX(-50px); | |
| img { | |
| width: 75px; | |
| } | |
| } | |
| } | |
| } |