Skip to content

Commit

Permalink
project almost done
Browse files Browse the repository at this point in the history
  • Loading branch information
@MAHasnain
MAHasnain committed Sep 10, 2023
0 parents commit 5e831be
Show file tree
Hide file tree
Showing 3 changed files with 279 additions and 0 deletions.
31 changes: 31 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Warm Up 1</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="main">
<div class="rect1">
</div>
<div class="rect2">
<h2 id="heading1">Move your cursor</h2>
</div>
<div class="rect3">
<h2 id="heading2">and see the Magic</h2>
</div>
<div class="rect4">
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.mjs"></script>
</body>

</html>
163 changes: 163 additions & 0 deletions script.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
//// rectangle 1

const rect1 = document.querySelector(".rect1");

rect1.addEventListener("mousemove", function (details) {
let rectLoctn = rect1.getBoundingClientRect();
let insideRectVal = details.clientX - rectLoctn.left; //// rectangle me mouse ki location

if (insideRectVal < rectLoctn.width / 2) {
let redColor = gsap.utils.mapRange( /// function of maprange
0, /// minInput
rectLoctn.width / 2, /// maxInput
255, /// minOutput
0, /// maxOutput
insideRectVal
);
gsap.to(rect1, {
backgroundColor: `rgb(${redColor}, 0, 0)`,
ease: Power4,
});
} else {
let blueColor = gsap.utils.mapRange(
rectLoctn.width / 2,
rectLoctn.width,
0,
255,
insideRectVal
);
gsap.to(rect1, {
backgroundColor: `rgb(0, 0, ${blueColor})`,
ease: Power4,
});
}
});

rect1.addEventListener("mouseleave", function () {
gsap.to(rect1, {
backgroundColor: "white",
});
});

//// rectangle 2

const rect2 = document.querySelector(".rect2");

rect2.addEventListener("mousemove", function (details) {
let rectLoctn = rect2.getBoundingClientRect();
let insideRectVal = details.clientX - rectLoctn.left; //// rectangle me mouse ki location

if (insideRectVal < rectLoctn.width / 2) {
let blueColor = gsap.utils.mapRange(
0,
rectLoctn.width / 2,
255,
0,
insideRectVal
);
gsap.to(rect2, {
backgroundColor: `rgb(0, 0, ${blueColor})`,
ease: Power4,
});
} else {
let redColor = gsap.utils.mapRange(
rectLoctn.width / 2,
rectLoctn.width,
0,
255,
insideRectVal
);
gsap.to(rect2, {
backgroundColor: `rgb(${redColor}, 0, 0)`,
ease: Power4,
});
}
});

rect2.addEventListener("mouseleave", function () {
gsap.to(rect2, {
backgroundColor: "white",
});
});

/// rectangle 3

const rect3 = document.querySelector(".rect3");

rect3.addEventListener("mousemove", function (details) {
let rectLoctn = rect3.getBoundingClientRect();
let insideRectVal = details.clientX - rectLoctn.left;

if (insideRectVal < rectLoctn.width / 2) {
let redColor = gsap.utils.mapRange(
0,
rectLoctn.width / 2,
255,
0,
insideRectVal
);
gsap.to(rect3, {
backgroundColor: `rgb(${redColor}, 0, 0)`,
ease: Power4,
});
} else {
let blueColor = gsap.utils.mapRange(
rectLoctn.width / 2,
rectLoctn.width,
0,
255,
insideRectVal
);
gsap.to(rect3, {
backgroundColor: `rgb(0, 0, ${blueColor})`,
ease: Power4,
});
}
});

rect3.addEventListener("mouseleave", function () {
gsap.to(rect3, {
backgroundColor: "white",
});
});

/// rectangle 4

const rect4 = document.querySelector(".rect4");

rect4.addEventListener("mousemove", function (details) {
let rectLoctn = rect4.getBoundingClientRect();
let insideRectVal = details.clientX - rectLoctn.left;

if (insideRectVal < rectLoctn.width / 2) {
let blueColor = gsap.utils.mapRange(
0,
rectLoctn.width / 2,
255,
0,
insideRectVal
);
gsap.to(rect4, {
backgroundColor: `rgb(0, 0, ${blueColor})`,
ease: Power4,
});
} else {
let redColor = gsap.utils.mapRange(
rectLoctn.width / 2,
0,
255,
0,
insideRectVal
);
gsap.to(rect4, {
backgroundColor: `rgb(${redColor}, 0, 0)`,
ease: Power4,
});
}
});

rect4.addEventListener("mouseleave", function () {
gsap.to(rect4, {
backgroundColor: "white",
});
});
85 changes: 85 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
*{
box-sizing: border-box;
padding: 0%;
margin: 0%;

}

html,
body {
/* position: relative; */
height: 100%;
width: 100%;
}

.main{
/* text-align: center; */
width: 100%;
display: flex;
flex-direction: row;
/* justify-content: space-around; */
height: auto;
align-items: center;
/* flex-wrap: wrap-reverse; */
}

.rect1{
/* margin: 10px; */
width: 400px;
height: 700px;
/* border: 0.5px solid black; */
/* text-align: center; */
/* position: relative; */
/* top: 50%;
left: 50%; */
/* transform: translate(-50%, -50%); */
}


.rect2{
/* margin: 10px; */
display: flex;
flex-direction: column;
justify-content: center;
width: 400px;
height: 700px;
/* border: 0.5px solid black; */
text-align: end;

}


#heading1 {
padding-right: 7px;
font-size: 2.0rem;
color: white;
font-family:'Poppins', sans-serif ;

}

.rect3{
display: flex;
flex-direction: column;
justify-content: center;
/* margin: 10px; */
width: 400px;
height: 700px;
/* border: 0.5px solid black; */
}

#heading2 {
padding-left: 3px;
font-size: 2.0rem;
color: white;
font-family:'Poppins', sans-serif ;

}



.rect4{
/* margin: 10px; */
width: 400px;
height: 700px;
/* border: 0.5px solid black; */
}

0 comments on commit 5e831be

Please sign in to comment.