Skip to content

Commit

Permalink
Merge pull request #428 from ritiksingh-01/cursor_tail
Browse files Browse the repository at this point in the history 
Add Blue Cursor Tail Effector and Limit to Home Page for Improved UX
  • Loading branch information
@vimistify
vimistify authored Oct 8, 2024
2 parents 671f80b + ccd5186 commit 811fe48
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 461 deletions.
95 changes: 0 additions & 95 deletions Feedback.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,27 +267,6 @@


<body>
<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>
<header>

<h1>AmbuFlow Feedback</h1>
Expand Down Expand Up @@ -426,79 +405,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
}, 5000); // Adjust the delay as needed
});
</script>
<script> const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
"#ffb56b",
"#fdaf69",
"#f89d63",
"#f59761",
"#ef865e",
"#ec805d",
"#e36e5c",
"#df685c",
"#d5585c",
"#d1525c",
"#c5415d",
"#c03b5d",
"#b22c5e",
"#ac265e",
"#9c155f",
"#950f5f",
"#830060",
"#7c0060",
"#680060",
"#60005f",
"#48005f",
"#3d005e"
];

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";
circle.style.top = y - 12 + "px";

circle.style.scale = (circles.length - index) / circles.length;

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

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

requestAnimationFrame(animateCircles);
}

animateCircles();</script>
<script>
// Back to Top Button functionality
document.addEventListener('DOMContentLoaded', function() {
const backToTopBtn = document.getElementById("backToTopBtn");

backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
83 changes: 0 additions & 83 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,28 +197,6 @@
}
</style>
</head>
<body>
<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>
<header>
<div class="container">
<div class="logo">
Expand Down Expand Up @@ -365,66 +343,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
});
});
</script>
<script> const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
"#ffb56b",
"#fdaf69",
"#f89d63",
"#f59761",
"#ef865e",
"#ec805d",
"#e36e5c",
"#df685c",
"#d5585c",
"#d1525c",
"#c5415d",
"#c03b5d",
"#b22c5e",
"#ac265e",
"#9c155f",
"#950f5f",
"#830060",
"#7c0060",
"#680060",
"#60005f",
"#48005f",
"#3d005e"
];

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";
circle.style.top = y - 12 + "px";

circle.style.scale = (circles.length - index) / circles.length;

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

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

requestAnimationFrame(animateCircles);
}

animateCircles();</script>
</body>
</html>
155 changes: 38 additions & 117 deletions features.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,64 +112,47 @@
}
/* Logo Animation */
@keyframes logoAnimation {
0% {
opacity: 0;
transform: translateX(-100px); /* Start from the left */
}
50% {
transform: translateX(10px); /* Move slightly to the right */
}
footer {
background-color: #C4D7FF;
color: white;
text-align: center;
padding: 10px 0; /* Padding for the footer */

100% {
opacity: 1;
transform: translateX(0); /* End at original position */
}
}

/* Letter Drop Animation */
@keyframes letterDrop {
0% {
transform: translateY(-100%);
opacity: 0;
}
50% {
transform: translateY(10px); /* Slight bounce */
opacity: 1;
}

#thankYouMessage {
margin-top: 20px;
font-size: 18px;
color: green;
display: none; /* Initially hidden */
}


100% {
transform: translateY(0);
}

.circle {
height: 35px;
width: 35px;
border-radius: 24px;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
/* Stays on top of all elements */
}
0% {
opacity: 0;
transform: translateX(-100px); /* Start from the left */
}
50% {
transform: translateX(10px); /* Move slightly to the right */
}
100% {
opacity: 1;
transform: translateX(0); /* End at original position */
}
}

}
footer {
background-color: #C4D7FF;
color: white;
text-align: center;
padding: 10px 0; /* Padding for the footer */
}

/* Letter Drop Animation */
@keyframes letterDrop {
0% {
transform: translateY(-100%);
opacity: 0;
}
50% {
transform: translateY(10px); /* Slight bounce */
opacity: 1;
}
100% {
transform: translateY(0);
}
}

#thankYouMessage {
margin-top: 20px;
font-size: 18px;
color: green;
display: none; /* Initially hidden */
}

</style>
</head>
Expand Down Expand Up @@ -368,68 +351,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
});
</script>

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

const colors = [
"#ffb56b",
"#fdaf69",
"#f89d63",
"#f59761",
"#ef865e",
"#ec805d",
"#e36e5c",
"#df685c",
"#d5585c",
"#d1525c",
"#c5415d",
"#c03b5d",
"#b22c5e",
"#ac265e",
"#9c155f",
"#950f5f",
"#830060",
"#7c0060",
"#680060",
"#60005f",
"#48005f",
"#3d005e"
];

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";
circle.style.top = y - 12 + "px";

circle.style.scale = (circles.length - index) / circles.length;

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

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

requestAnimationFrame(animateCircles);
}

animateCircles();</script>

</footer>


Expand Down
Loading

0 comments on commit 811fe48

Please sign in to comment.