Skip to content

Commit

Permalink
Added Difference Dot Cursor (#1353)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Praneeth-2602
Praneeth-2602 authored Aug 10, 2024
1 parent 5cc39f4 commit 73246bd
Show file tree
Hide file tree
Showing 4 changed files with 396 additions and 0 deletions.
93 changes: 93 additions & 0 deletions Components/Cursors/Difference-Dot-Cursor/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Cursor and Menu Animation</title>
<link rel="stylesheet" href="style.css"> <!-- Link to your CSS file -->
<!-- Include GSAP and jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

<body>
<header>
<div class="sticky-nav">
<div class="logo">MyLogo</div>
<div id="nav-btn">
<!-- Example SVG icon for the menu button -->
<svg id="nav-btn-icon" width="30" height="30" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<line id="top-line-1" x1="10" y1="25" x2="90" y2="25" stroke="#fff" stroke-width="5" />
<line id="middle-line-1" x1="10" y1="50" x2="90" y2="50" stroke="#fff" stroke-width="5" />
<line id="bottom-line-1" x1="10" y1="75" x2="90" y2="75" stroke="#fff" stroke-width="5" />
</svg>
</div>
</div>
<div id="takeover-nav">
<div class="nav-col">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<a href="#section4">Section 4</a>
</div>
<div class="nav-contact">
<div class="content">
<h2 class="nav-title">Contact</h2>
<div class="contact-items">
<a href="mailto:example@example.com">Email</a>
<a href="tel:+123456789">Phone</a>
</div>
</div>
</div>
</div>
</header>

<!-- Sections -->
<section id="section1" class="hero">
<h1 class="hero-title">Welcome</h1>
<p>This is the hero section with some introductory content.</p>
<button class="interactive-btn">Click Me!</button>
</section>
<section id="section2" class="two">
<h2>Section Two</h2>
<p>This section contains a form you can interact with:</p>
<form class="interactive-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
</section>
<section id="section3" class="three">
<h2>Section Three</h2>
<p>Try clicking the elements below:</p>
<div class="interactive-box btn" onclick="boxClicked()">Click Me!</div>
<p id="box-message"></p>
</section>
<section id="section4" class="four">
<h2>Section Four</h2>
<p>Here is a simple image carousel:</p>
<div class="carousel">
<img src="https://via.placeholder.com/300x200?text=Slide+1" alt="Slide 1">
<img src="https://via.placeholder.com/300x200?text=Slide+2" alt="Slide 2" style="display: none;">
<img src="https://via.placeholder.com/300x200?text=Slide+3" alt="Slide 3" style="display: none;">
<button class="carousel-btn" onclick="prevSlide()">&#10094;</button>
<button class="carousel-btn" onclick="nextSlide()">&#10095;</button>
</div>
</section>

<!-- Custom Cursor -->
<div class="custom-cursor"></div>



<!-- Your JavaScript file -->
<script src="./script.js"></script>
</body>

</html>
78 changes: 78 additions & 0 deletions Components/Cursors/Difference-Dot-Cursor/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@

// Your JavaScript code here
$("#nav-btn").on("click", function () {
$('#takeover-nav').toggleClass("shown");
$('.sticky-nav').toggleClass("difference");
});

// Cursor JavaScript (including TweenLite)
document.addEventListener("DOMContentLoaded", function (event) {
var cursor = document.querySelector(".custom-cursor");
var links = document.querySelectorAll("a, button, #nav-btn, input.btn");
var initCursor = false;

for (var i = 0; i < links.length; i++) {
var selfLink = links[i];

selfLink.addEventListener("mouseover", function () {
cursor.classList.add("custom-cursor--link");
});
selfLink.addEventListener("mouseout", function () {
cursor.classList.remove("custom-cursor--link");
});
}

window.onmousemove = function (e) {
var mouseX = e.clientX;
var mouseY = e.clientY;

if (!initCursor) {
TweenLite.to(cursor, 0.5, {
opacity: 1
});
initCursor = true;
}

TweenLite.to(cursor, 0, {
top: mouseY + "px",
left: mouseX + "px"
});
};

window.ontouchmove = function (e) {
var mouseX = e.touches[0].clientX;
var mouseY = e.touches[0].clientY;
if (!initCursor) {
TweenLite.to(cursor, 0.3, {
opacity: 1
});
initCursor = true;
}

TweenLite.to(cursor, 0, {
top: mouseY + "px",
left: mouseX + "px"
});
};

window.onmouseout = function (e) {
TweenLite.to(cursor, 0.3, {
opacity: 0
});
initCursor = false;
};

window.ontouchstart = function (e) {
TweenLite.to(cursor, 0.3, {
opacity: 1
});
};

window.ontouchend = function (e) {
setTimeout(function () {
TweenLite.to(cursor, 0.3, {
opacity: 0
});
}, 200);
};
});
212 changes: 212 additions & 0 deletions Components/Cursors/Difference-Dot-Cursor/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
body {
cursor: none;
}

/* Custom styles for the custom cursor */
.custom-cursor {
position: fixed;
opacity: 0;
pointer-events: none;
mix-blend-mode: difference;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #00BCD4;
/* Example color */
transition: transform 350ms ease;
transform: translate(-50%, -50%) scale(.3);
z-index: 1000;
pointer-events: none;
cursor: none;
}

.custom-cursor--link {
transform: translate(-50%, -50%) scale(1.25);
}

a {
cursor: none;
}

/* General Styles */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #333;
overflow-x: hidden;
}

/* Header and Navigation */
header {
position: relative;
width: 100%;
background-color: #333;
/* Dark background for the header */
color: #fff;
}

.sticky-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
position: relative;
}

#nav-btn {
}

#nav-btn-icon {
display: block;
}

#takeover-nav {
display: none;
/* Initially hidden */
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100%;
background-color: #444;
color: #fff;
padding: 20px;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
z-index: 1000;
overflow-y: auto;
}

.nav-col a,
.nav-contact a {
display: block;
color: #fff;
text-decoration: none;
margin: 10px 0;
padding: 10px;
font-size: 16px;
}

.nav-col a:hover,
.nav-contact a:hover {
background-color: #555;
border-radius: 4px;
}

/* Logo Style */
.logo {
font-size: 24px;
font-weight: bold;
}

/* Sections */
section {
padding: 60px 20px;
color: #fff;
text-align: center;
min-height: 100vh;
}

/* Different colors for each section */
.hero {
background-color: #3498db;
/* Blue */
}

.two {
background-color: #e74c3c;
/* Red */
}

.three {
background-color: #2ecc71;
/* Green */
}

.four {
background-color: #f39c12;
/* Yellow */
}

/* Custom Cursor */
.custom-cursor {
position: fixed;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #00BCD4;
/* Example color */
pointer-events: none;
transition: transform 350ms ease, opacity 0.3s ease;
mix-blend-mode: difference;
transform: translate(-50%, -50%) scale(0.3);
z-index: 1000;
opacity: 0;
}

.custom-cursor--link {
transform: translate(-50%, -50%) scale(1.25);
}

/* Hide default cursor over links */
a,
button,
#nav-btn,
input.btn {
cursor: none;
}

button,
.btn {
background: #333;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
text-align: center;
display: inline-block;
}

button:hover,
.btn:hover {
background-color: #000000;
}

button:active,
.btn:active {
transform: scale(0.95);
}

input,
textarea {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
transition: border-color 0.3s;
width: 100%;
box-sizing: border-box;
}

input:focus,
textarea:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

form {
margin: 0 auto;
max-width: 500px;
padding: 20px;
background: #f9f9f9;
border-radius: 5px;
}

form label {
margin: 10px 0 5px;
font-size: 16px;
display: block;
}
Loading

0 comments on commit 73246bd

Please sign in to comment.