From 0ebb5645db5ac4e0fc32ed6d7d3d0e53739c0263 Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Tue, 16 May 2023 09:31:53 +0300
Subject: [PATCH] Add files via upload
---
100_projects/84-eyes-follow-mouse/index.html | 21 ++++++++++
100_projects/84-eyes-follow-mouse/main.js | 14 +++++++
100_projects/84-eyes-follow-mouse/style.css | 41 ++++++++++++++++++++
3 files changed, 76 insertions(+)
create mode 100644 100_projects/84-eyes-follow-mouse/index.html
create mode 100644 100_projects/84-eyes-follow-mouse/main.js
create mode 100644 100_projects/84-eyes-follow-mouse/style.css
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