Compare

617adfece70848687de2baa3241398b491689c5e … main · 7 commits

base 617adfece708…
head 74fe18089ea0…
merge base 617adfece708…

Changed files

FileChanges
css/comic.ttf binary raw
css/cursor.gif binary raw
css/main.css +14 −3 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
d2888aee 100% more sans :skull: Ryan Schanzenbacher
f45d5bc7 Guaranteed Comic "Sans" Ryan Schanzenbacher
diff --git a/css/comic.ttf b/css/comic.ttf
new file mode 100644
index 0000000..9edb03a
Binary files /dev/null and b/css/comic.ttf differ
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 14b5d8d..8e67332 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,11 +1,22 @@
+@font-face {
+ font-family: 'Comic';
+ src: url('/css/comic.ttf') format('truetype');
+ font-display: swap;
+}
+
+.trail {
+ position: absolute;
+ z-index: 9999;
+ pointer-events: none;
+}
+
body {
- font-family: "Comic Sans", "Comic Sans MS", "Chalkboard",
- "ChalkboardSE-Regular", "Marker Felt", "Purisa", "URW Chancery L", cursive,
- sans-serif;
+ 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>