Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Difference Dot Cursor #1353

Merged
merged 1 commit into from
Aug 10, 2024
Merged

Added Difference Dot Cursor #1353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions Components/Cursors/Difference-Dot-Cursor/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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