x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-05-16 09:31:53 +03:00 committed by GitHub
parent c23f9ac987
commit 0ebb5645db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
100_projects/84-eyes-follow-mouse/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="eyes">
<div class="eye">
<div class="ball"></div>
</div>
<div class="eye">
<div class="ball"></div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

14
100_projects/84-eyes-follow-mouse/main.js Normal file
View File

@ -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+")";
}
}

41
100_projects/84-eyes-follow-mouse/style.css Normal file
View File

@ -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;
}