Report Blog Entry
here's a lil guide on animated cursors!
we know that some browsers refuse gifs as cursors... some show it, but without any animation at all. and linking an .ani doesn't work either... so we have a trick for that. keep in mind if there's a lot (too many animations) going on on your page, it might lag a little. but it's what we have.... so let's do it : 3
I. cursor sources
first, let's get the cursor itself. there are a couple of sources for cursors, here are some that i know (feel free to add more in the comments!)
cursors4u | rw-designer | tumblr search
make sure you've downloaded an .ani file, so it's animated. (look up the animated category, or search the word). remember! if it has a lot of frames, you'll might have trouble. keep it simple!
II. splitting into frames
now, we're gonna go towards my fav site ever: ezgif, specifically the ANI to GIF converting page: ANI to GIF converter
upload your downloaded cursor and convert it! but, don't download the result or exit the page yet. at the bottom, there are a couple more options. one of them is "split" (3rd button from the right)
split it into frames! and make sure to download the zip file.
II. pt.II extra step cause sometimes css sucks
we have the frames but ezgif converted it to single frame gif files... of course, some browserds don't like gifs as cursors, so we need to convert them to png.
here's a nice page that will do that for you just fine: freeconvert just upload all your files, wait a little bit... and click "download all" on the bottom. you'll get another zipped file.
III. uploading
now that you've got your second zip full of pngs, extract them on an empty folder. the next step is selecting every one and uploading them to your file hosting of preference. for me, i prefer discord. (a private channel in a private server specifically for image uploading (dw they're diving in money they can pay their servers))
if you've uploaded to discord, you'll have to click on the image and on "open in browser" to get their links.
IV. animating
for the trick, we use css animations. we're gonna make an animation that changes the cursor image every keyframe
but don't worry!! i've made some templates already. paste your image links inside the "" of every keyframe. (example, your first frame link inside the first line of code, your second frame on the second line, etc...) then, place the entire code inside your <style> tag.
templates
2 frames: click to expand
@keyframes anicur { from { cursor: url(""), auto; } to { cursor: url(""), auto; } }
3 frames: click to expand
@keyframes anicur { 0% { cursor: url(""), auto; } 50% { cursor: url(""), auto; } 100% { cursor: url(""), auto; } }
4 frames: click to expand
@keyframes anicur { 0% { cursor: url(""), auto; } 25% { cursor: url(""), auto; } 50% { cursor: url(""), auto; } 100% { cursor: url(""), auto; } }
5 frames: click to expand
@keyframes anicur { 0% { cursor: url(""), auto; } 25% { cursor: url(""), auto; } 50% { cursor: url(""), auto; } 75% { cursor: url(""), auto; } 100% { cursor: url(""), auto; } }
and so on. if you have more frames, add more keyframes, keeping in mind it uses percentages
V. finishing up
now that we have the animation, we need to put it to use. place this code into your <style> tag, and your cursor should show up !
if your animation looks too fast or too slow, adjust the duration ("0.4s" to any of your liking. try testing!)
body { animation: anicur 0.4s linear infinite; }
thats it!! yay
to see it works, i've made a nyan cat cursor for this tutorial!! check it out:
@keyframes anicur { 0% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152992932220125204/frame_00_delay-0.01s.png"), auto; } 10% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152992932446621887/frame_01_delay-0.01s.png"), auto; } 15% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152992932698275951/frame_02_delay-0.01s.png"), auto; } 24% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152992932928966767/frame_03_delay-0.01s.png"), auto; } 35% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152992933197385801/frame_04_delay-0.01s.png"), auto; } 42% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152992933423890483/frame_05_delay-0.01s.png"), auto; } 55% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152995804693409902/frame_06_delay-0.01s.png"), auto; } 60% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152995804919910590/frame_07_delay-0.01s.png"), auto; } 70% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152995805154771005/frame_08_delay-0.01s.png"), auto; } 80% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152995805393858710/frame_09_delay-0.01s.png"), auto; } 90% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152996388087549962/frame_10_delay-0.01s.png"), auto; } 100% { cursor: url("https://cdn.discordapp.com/attachments/1044680207333863474/1152996387793936414/frame_11_delay-0.01s.png"), auto; } } body { animation: anicur 0.8s linear infinite; }
it might be confusing sometimes, yeah... but i'm glad to help anyone. you can message me if you have any trouble, or want me to do the conversion, and i'll do it for you!
Comments
Displaying 8 of 8 comments ( View all | Add Comment )
florsita la flor feliz
ty so much! ^_^
_xGrimeGrrrlx_
How do I make sure the cursor doesn't change when it hovers over a link?
chachao channibal
i tried everything i could but it doesnt work, do you think you would be able to help me?
i love tony perry ฅ^•ﻌ•^ฅ
thank you so much!!! <333
ik1ll3dm4rz
thank you so much!! i've been trying to figure out how to do this for ages!
Dewritoz
i used discord to upload my files then pasted them as a link,, it still doesnt work though ;-;
should i try to upload the files on a different site orr????? im still learning :')
it's okay!!
i checked the source code on your profile and i saw the code... there are two little things!!
first, the @keyframes tag isn't closed (lacks a } at the end, right before the "body {...}" starts)
also, your images are too big D: so css ignores them... i think the maximum size for cursors was 128x128...? but actually 32x32 or 64x64 are the best sizes! try and resize your picture and it should work ^^
by daniel; ; Report
im going to bed pretty soon but i fixed some of the stuff, let me know if it works or not and what stuff i gotta fix ^^;
by Dewritoz; ; Report
hope you rest well ! i think you'll see this reply the day after, but i saw another really small typo that broke everything (css is relentless D:)
in your third frame, (the one that's labeled '100% {...}'), the url is url("https://..)... it lacks a closing quote, so it should be url("https://.."). it's only in the last frame, if you fix that everything should be working!!
after that, you might want to adjust your cursor size to your preferences... 128x128 might be way too big, but it depends on your design choice!!
by daniel; ; Report
thakn youuu ososososso much!!!! >.<
by Dewritoz; ; Report
KoSbeku
Oh this is a neat little guide, i did this for my mc layout.
One thing thats pretty interesting is that if its for specific hover elements, it'll always start on first frame. so you could probably do some pretty cool stuff with that too!
thank you!! i'm so glad it helped! yes, changing the cursor on hovers has potential for so many interesting stuff
i took a look at your MC layout and it's so cool whatt!!!! i loved the touch of using the animated bow on hovers, the inventory is so sick too
by daniel; ; Report
charlie the vampire 🦇🩸
so i put it in the about me section right? this seems really cool i just wanna make sure thats how u use it :3
nvm i figured it out, im using the nyan cat one right now! :D
by charlie the vampire 🦇🩸; ; Report
AHH!! i'm glad you figured it out :3 the code goes inside tags, and you can place the style tags themselves on your about me, or who i'd like to meet, or any section actually, it'll work! :D i'm glad it helped you!!
by daniel; ; Report
thanks! this is super cool :D if i find any good animated cursors ill be sure 2 use them!! :D
by charlie the vampire 🦇🩸; ; Report