Compare

d2888aee101d3d709aa6ac5555fce77377a4f144 … main · 5 commits

base d2888aee101d…
head 74fe18089ea0…
merge base d2888aee101d…

Changed files

FileChanges
css/cursor.gif binary raw
css/main.css +7 −0 raw
index.html +42 −0 raw

Commits

HashSubjectAuthorDate
74fe1808 it seems as though i had the skill issue all along Ryan Schanzenbacher
06351d7c cursor trail fix Ryan Schanzenbacher
f74c01ef Delete index.bak Ryan Schanzenbacher
06fcaba5 chatgpt fixed bug Ryan Schanzenbacher
373ad686 added cursor trail courtesy chatgpt Ryan Schanzenbacher
diff --git a/css/cursor.gif b/css/cursor.gif
new file mode 100644
index 0000000..f1247cf
Binary files /dev/null and b/css/cursor.gif differ
diff --git a/css/main.css b/css/main.css
index 22aee34..8e67332 100644
--- a/css/main.css
+++ b/css/main.css
@@ -4,12 +4,19 @@
font-display: swap;
}
+.trail {
+ position: absolute;
+ z-index: 9999;
+ pointer-events: none;
+}
+
body {
font-family: 'Comic';
color: yellow;
font-size: 20px;
margin: 0;
padding: 0;
+ overflow-x: hidden;
}
#overview {
min-width: min-content;
diff --git a/index.html b/index.html
index 53b2c2a..2eda64d 100644
--- a/index.html
+++ b/index.html
@@ -129,5 +129,47 @@
<div id="yeah-on">Unyeah</div>
</label>
</div></div></div>
+ <script>
+ var trailLength = 12;
+ var path = [];
+ var delay = 100;
+ var lastX = 0;
+ var lastY = 0;
+
+ function createMouseTrail() {
+ for (var i = 0; i < trailLength; i++) {
+ var div = document.createElement('div');
+ div.setAttribute('class', 'trail');
+ div.style.top = '-200px';
+ div.style.left = '-200px';
+ div.style.backgroundImage = 'url(/css/cursor.gif)';
+ div.style.backgroundSize = 'cover';
+ div.style.width = '11px';
+ div.style.height = '19px';
+ document.body.appendChild(div);
+ path.push(div);
+ }
+ }
+
+ var lastX = 0;
+ var lastY = 0;
+
+ function moveTrail(e) {
+ if (lastX !== e.pageX || lastY !== e.pageY) {
+ for (let i = 0; i < path.length; i++) {
+ setTimeout(function() {
+ path[i].style.top = (e.pageY) + 'px';
+ path[i].style.left = (e.pageX) + 'px';
+ }, i * delay);
+ }
+ }
+
+ lastX = e.pageX;
+ lastY = e.pageY;
+ }
+
+ document.addEventListener('mousemove', moveTrail);
+ createMouseTrail();
+ </script>
</body>
</html>