Here are some ressources I used to make this website.
Some of those I made myself but feel free to use em, as always I keep my code updated here.Tiles:
I made these background tiles so far, feel free to use em !
Sparkles !!!!
Use this script for the Sparkly effects on your cursor !!! >>> I wanna get the sparkles ! <<<
Pet <3
I used GIFYPET to make my lil guy~
>>> I wanna get a pet ! <<<
For the buggo and background I drew them myself, feel free to use em if ya wanna adopt a cute buggo !
Marquees !
I took some code from w3school and had to change it a little it. I'd recommend checking out my code, specifically here and the javascript generating the html there for the vertical one and there for the horizontal one.
The lil' guy following your cursor (if you're on desktop :3)
1- Create a sprite with layers compared to how the pieces of the pet are closest towards the screen.
ex:
I found this script for Aseprite to do it easily there
The art part is done... (Which is the best ?)
And now is the worst part !(for me anyways)
2- Create a div to put your art on it + the css so that the sprites can be on top of each others...
One for each sprite you've made.
On the css side not much happening except:
-On the div you've created for your picture set the position to absolute.
-On the main add overflow-x: hidden;
3- Javascript time !
I'll just paste the script here for y'all :
document.addEventListener("mousemove", (e) => { mousePos = e; moveFollower(7,e , true) }); window.onscroll = function (e){ var scrollY = window.scrollY; var yPos = mousePos.clientY; console.log(mousePos); for(let index = 0 ; index < document.getElementsByClassName("follower").length; index ++){ document.getElementsByClassName("follower")[index].style.top = (20+yPos+scrollY) + "px"; console.log("scroll",document.getElementsByClassName("follower")[index].style); } }; function moveFollower(index, e, first_time){ var wait_time = 50; if(!first_time){ wait_time = 10 } setTimeout(function() { var xPos = e.pageX; var yPos = e.pageY; document.getElementsByClassName("follower")[index].style.top = (20+yPos) + "px"; document.getElementsByClassName("follower")[index].style.left = (20+xPos) + "px"; if(index != 0){ moveFollower(index - 1,e) } }, wait_time); }
moveFollower() moves the little follower here found by the classname called follower here.
More up is the javascript detection to trigger the movement which are the mouse movement and scroll.
The best way to check is my code as always, it's not that easy to read but it's sure to work !
Othersss
If you got any question about anything else on the site lemme know !