<div id='colorsquare4' style='width: 200px; height: 200px; position: relative'></div> | |
<script> | |
var cs4 = window.colorsquare4 | |
var els = ([[0, 0], [1, 0], [0, 1], [1, 1]]).map(function (xy) { | |
var el = document.createElement('div') | |
el.style.cssText = ` | |
position: absolute; | |
left: ${xy[0] * 100}px; | |
top: ${xy[1] * 100}px; | |
width: 100px; | |
height: 100px; | |
border: 2px solid black; | |
` | |
cs4.appendChild(el) | |
return el | |
}) | |
window.addEventListener('mousemove', function (evt) { | |
var x = evt.clientX / window.innerWidth | |
var y = evt.clientY / window.innerHeight | |
els.forEach(function (el, i) { | |
var elX = x + (i * 0.01) | |
var elY = y + (i * 0.1) | |
var hue = Math.round(elY * 360) | |
var light = Math.round(elX * 100) | |
var w = `${elX * 100}px` | |
var h = `${elY * 100}px` | |
var trans = `rotate(${elX * 360}deg)` | |
var color = `hsl(${hue}, 100%, ${light}%)` | |
el.style.background = color | |
el.style.width = w | |
el.style.height = h | |
el.style.transform = trans | |
}) | |
}) | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment