Skip to content

Commit

Permalink
animation added
Browse files Browse the repository at this point in the history
  • Loading branch information
akash70629 committed Nov 9, 2024
1 parent ee296c9 commit b893dd3
Showing 1 changed file with 86 additions and 0 deletions.
86 changes: 86 additions & 0 deletions travelAware.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,18 @@
box-sizing: border-box;
}


.circle {
height: 24px;
width: 24px;
border-radius: 24px;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
}
/* Body styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
Expand Down Expand Up @@ -230,6 +242,31 @@
</style>
</head>
<body>

<!-- cursor -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<!-- cursor ends -->

<nav class="navbar">
<a href="./index.html" id="logo-href">
<div class="logo-container">
Expand Down Expand Up @@ -329,6 +366,55 @@
});
}
});

//cursor

const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
"#BCE954", "#98FF98", "#9CB071", "#90C209", "#B2C248",
"#85BB65", "#99C68E", "#6CBB3C", "#3ea055", "#41a317",
"#4AA02C", "#6AA121", "#347C2C", "#387C44", "#437C17",
"#306754", "#254117", "#667C26", "#728C00", "#008000"
];

circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

window.addEventListener("mousemove", function(e){
coords.x = e.clientX;
coords.y = e.clientY;
});

function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = x - 12 + "px"; // Center the circle on the mouse
circle.style.top = y - 12 + "px"; // Center the circle on the mouse

circle.style.transform = `scale(${(circles.length - index) / circles.length})`; // Correct scale setting

circle.x = x;
circle.y = y;

const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.6;
});

requestAnimationFrame(animateCircles);
}

animateCircles();



</script>
<div class="container mt-5">

Expand Down

0 comments on commit b893dd3

Please sign in to comment.