From a1a3a0a742ba232f52f4536cd4fb89ea731236bb Mon Sep 17 00:00:00 2001 From: Praneeth Palugula Date: Wed, 7 Aug 2024 09:52:13 +0530 Subject: [PATCH] Add Difference Dot Cursor --- .../Cursors/Difference-Dot-Cursor/index.html | 93 ++++++++ .../Cursors/Difference-Dot-Cursor/script.js | 78 +++++++ .../Cursors/Difference-Dot-Cursor/style.css | 212 ++++++++++++++++++ assets/html_files/cursors.html | 13 ++ 4 files changed, 396 insertions(+) create mode 100644 Components/Cursors/Difference-Dot-Cursor/index.html create mode 100644 Components/Cursors/Difference-Dot-Cursor/script.js create mode 100644 Components/Cursors/Difference-Dot-Cursor/style.css diff --git a/Components/Cursors/Difference-Dot-Cursor/index.html b/Components/Cursors/Difference-Dot-Cursor/index.html new file mode 100644 index 00000000..e5ea6a5f --- /dev/null +++ b/Components/Cursors/Difference-Dot-Cursor/index.html @@ -0,0 +1,93 @@ + + + + + + + Custom Cursor and Menu Animation + + + + + + + + + +
+
+ + +
+
+
+ Section 1 + Section 2 + Section 3 + Section 4 +
+
+
+

Contact

+
+ Email + Phone +
+
+
+
+
+ + +
+

Welcome

+

This is the hero section with some introductory content.

+ +
+
+

Section Two

+

This section contains a form you can interact with:

+
+ + + + + +
+
+
+

Section Three

+

Try clicking the elements below:

+
Click Me!
+

+
+
+

Section Four

+

Here is a simple image carousel:

+
+ Slide 1 + Slide 2 + Slide 3 + + +
+
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/Components/Cursors/Difference-Dot-Cursor/script.js b/Components/Cursors/Difference-Dot-Cursor/script.js new file mode 100644 index 00000000..da9f685f --- /dev/null +++ b/Components/Cursors/Difference-Dot-Cursor/script.js @@ -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); + }; +}); \ No newline at end of file diff --git a/Components/Cursors/Difference-Dot-Cursor/style.css b/Components/Cursors/Difference-Dot-Cursor/style.css new file mode 100644 index 00000000..af2a5613 --- /dev/null +++ b/Components/Cursors/Difference-Dot-Cursor/style.css @@ -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; +} \ No newline at end of file diff --git a/assets/html_files/cursors.html b/assets/html_files/cursors.html index 7ea13339..c2cd3ad3 100644 --- a/assets/html_files/cursors.html +++ b/assets/html_files/cursors.html @@ -109,6 +109,19 @@

Cultural Cursor

+
+

Difference Dot Cursor

+
+ + + +
+
+ + + +
+

Dot Cursor