女性へ向けたホームページの制作ポイント5つ。制作物を元に女性ウェブデザイナーが解説。
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
Miki+Yuka / 東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナー🌐 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。
PICK UP