diff --git a/100_projects/84-eyes-follow-mouse/index.html b/100_projects/84-eyes-follow-mouse/index.html new file mode 100644 index 0000000..88e15ff --- /dev/null +++ b/100_projects/84-eyes-follow-mouse/index.html @@ -0,0 +1,21 @@ + + + + + + + + Document + + +
+
+
+
+
+
+
+
+ + + diff --git a/100_projects/84-eyes-follow-mouse/main.js b/100_projects/84-eyes-follow-mouse/main.js new file mode 100644 index 0000000..7c238ae --- /dev/null +++ b/100_projects/84-eyes-follow-mouse/main.js @@ -0,0 +1,14 @@ +var balls = document.getElementsByClassName("ball"); +document.onmousemove = function(){ + var x = event.clientX * 100 / window.innerWidth + "%"; + var y = event.clientY * 100 / window.innerHeight + "%"; + //event.clientX => get the horizontal coordinate of the mouse + //event.clientY => get the Vertical coordinate of the mouse + //window.innerWidth => get the browser width + //window.innerHeight => get the browser height + for(var i=0;i<2;i++){ + balls[i].style.left = x; + balls[i].style.top = y; + balls[i].style.transform = "translate(-"+x+",-"+y+")"; + } +} \ No newline at end of file diff --git a/100_projects/84-eyes-follow-mouse/style.css b/100_projects/84-eyes-follow-mouse/style.css new file mode 100644 index 0000000..ecb4d07 --- /dev/null +++ b/100_projects/84-eyes-follow-mouse/style.css @@ -0,0 +1,41 @@ +body{ + margin: 0; + padding: 0; + min-height: 100vh; + background-image: linear-gradient(to bottom, #34495e, #335066, #30576e, #2c5e76, #26657d, #206c83, #197288, #10798d, #058191, #008895, #009098, #00979a); +} +.eyes{ + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 100%; + text-align: center; +} +@media(max-width:767px){ + .eyes{ + display: flex; + justify-content: center; + align-items: center; + } +} +.eye{ + width: 240px; + height: 120px; + background: #fff; + display: inline-block; + margin: 40px; + border-radius: 50%; + position: relative; + overflow: hidden; +} +.ball{ + width: 40px; + height: 40px; + background: #000; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + border-radius: 50%; + border: 15px solid #333; +} \ No newline at end of file