【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
1 |
<div class="mouse"></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
const mouse = $(".mouse"); function Cursor(element, options) { function stringNode(node) { var tmpNode = document.createElement("div"); tmpNode.appendChild(node.cloneNode(true)); return tmpNode.innerHTML; } var intSize = parseInt(options.size); function setSize(size, scale) { if (scale) { scale = `${scale}`; element.css({ "transform" : `scale(${options.hoverSize})`, "opacity" : ".6" }); } else { size = parseInt(size); element.css({ width: size + "px", height: size + "px", transform: "none", opacity : "0.7" }); } } setSize(options.size); document.onmousemove = e => { element.css({ left: e.clientX - parseInt(options.size) / 2 + "px", top: e.clientY - parseInt(options.size) / 2 + "px" }); elementType = stringNode(e.target) .replace(/\</g, "") .split(">")[0] .split(" ")[0]; //console.log(elementType) if (["a", "button", "input"].includes(elementType)) setSize(options.size, options.hoverSize); else setSize(options.size); }; } Cursor(mouse, { size: "30px", // Width and Height hoverSize: 0.5 // Scale size }); |
1 2 3 4 5 6 7 8 |
.mouse { background: black; border-radius: 50%; position: fixed; z-index: 100; pointer-events: none; transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; } |
KOHIMOTO LABO
東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。
PICK UP