Skip to content

Commit

Permalink
Merge pull request #483 from ShrishtiSingh26/cursor
Browse files Browse the repository at this point in the history 
feat: [#250] - Adding Custom Cursor effect
  • Loading branch information
@akbatra567
akbatra567 authored Oct 28, 2024
2 parents 80ee289 + a2a787a commit 0f90777
Show file tree
Hide file tree
Showing 9 changed files with 695 additions and 2 deletions.
77 changes: 77 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,18 @@
color: #333;
line-height: 1.6;
}
.circle {
height: 18px;
width: 18px;
border-radius: 24px;
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
z-index: 1000; /* Ensure the trail is above everything */
pointer-events: none; /* Prevent the circles from interfering with mouse events */
}


.navbar {
display: flex;
Expand Down Expand Up @@ -241,6 +253,31 @@
</style>
</head>
<body>
<!-- 20 circle elements -->
<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>
<div class="circle"></div>
<div class="circle"></div>


<!-- Hero Section -->
<section class="hero">
Expand Down Expand Up @@ -337,5 +374,45 @@ <h3 style="margin: 0;">CabRental</h3>
</div>
</div>
</footer>
<script>
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

// Assign initial positions to the circles
circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

window.addEventListener("mousemove", function (e) {
// Use pageX and pageY to account for scroll distance
coords.x = e.pageX;
coords.y = e.pageY;
});

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>
81 changes: 80 additions & 1 deletion contactus.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,48 @@
<link rel="stylesheet" href="./css/demo.css">
<script src="https://kit.fontawesome.com/c32adfdcda.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
.circle {
height: 18px;
width: 18px;
border-radius: 24px;
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
z-index: 1000; /* Ensure the trail is above everything */
pointer-events: none; /* Prevent the circles from interfering with mouse events */
}

</style>
</head>
<body>
<!-- 20 circle elements -->
<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>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

<button class="back-button" onclick="window.location.href='index.html'"><img src="img/back_button.png" width="60px" height="60px"/></button>
<header class="cd__intro">
<div class="cd__action">
Expand Down Expand Up @@ -102,5 +141,45 @@ <h2>Send Message</h2>
</section>
</main>
<script src="./js/contactus.js"></script>
<script>
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

// Assign initial positions to the circles
circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

window.addEventListener("mousemove", function (e) {
// Use pageX and pageY to account for scroll distance
coords.x = e.pageX;
coords.y = e.pageY;
});

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>
77 changes: 77 additions & 0 deletions forgot-password.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,46 @@
<link rel="icon" href="img/logo1.png" type="image/png">
<title>Forgot Password</title>
<link rel="stylesheet" href="forgot-password.css" />
<style>
.circle {
height: 18px;
width: 18px;
border-radius: 24px;
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
z-index: 1000; /* Ensure the trail is above everything */
pointer-events: none; /* Prevent the circles from interfering with mouse events */
}
</style>
</head>

<body>
<!-- 20 circle elements -->
<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>
<div class="circle"></div>
<div class="circle"></div>
<div class="container">
<div class="left-section">
<button class="back-button" onclick="window.location.href='index.html'"><img src="img/back_button.png"
Expand Down Expand Up @@ -55,6 +92,46 @@ <h1 class="animated-heading">Cab Rental<span class="blinking-cursor">|</span></h
alert("Verification Email sent");
});
</script>
<script>
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

// Assign initial positions to the circles
circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

window.addEventListener("mousemove", function (e) {
// Use pageX and pageY to account for scroll distance
coords.x = e.pageX;
coords.y = e.pageY;
});

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>
78 changes: 77 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,17 @@
background-color: #eeeff1;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.circle {
height: 18px;
width: 18px;
border-radius: 24px;
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
z-index: 1000; /* Ensure the trail is above everything */
pointer-events: none; /* Prevent the circles from interfering with mouse events */
}
.logo img {
height: 40px;
}
Expand Down Expand Up @@ -732,6 +742,32 @@ <h2>Cab Rental Service</h2>
<input type="submit" name="submit" id="submit" class="btn">
</form>
</div> -->
<!-- 20 circle elements -->
<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>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>


<div class="booking-form">
<div class="form-group">
Expand Down Expand Up @@ -1450,6 +1486,46 @@ <h2>Words from Our Clients <span class="highlight">Inspiring Testimonials of Sat
});
};
</script>
<script>
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

// Assign initial positions to the circles
circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

window.addEventListener("mousemove", function (e) {
// Use pageX and pageY to account for scroll distance
coords.x = e.pageX;
coords.y = e.pageY;
});

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>
Expand Down
Loading

0 comments on commit 0f90777

Please sign in to comment.