Report Blog Entry
First blog post.. hello!
It took a lot of trial and error for me to get my animated cursor working, so I thought I'd share my code here for others. I'm a complete newbie, so I don't know if it's the most efficient, but it works for me; maybe it'll work for you. Parts of the code will need to be changed depending on the gif you're working with, so I'll do my best to thoroughly explain how to tailor it to your own needs.
First off, the code. As a starting point, here's mine for the regular cursor:
<style>
body{
animation: cursorgif .8s linear infinite;
cursor: url("LINK TO FRAME ZERO GOES HERE"), auto;
}
@keyframes cursorgif{
0%{cursor: url("LINK TO FRAME ZERO GOES HERE"), auto;}
25%{cursor: url("LINK TO FRAME ONE HERE"), auto;}
50%{cursor: url("LINK TO FRAME TWO GOES HERE"), auto;}
75%{cursor: url("LINK TO FRAME THREE GOES HERE"), auto;}
}
</style>
body{
animation: cursorgif .8s linear infinite;
cursor: url("LINK TO FRAME ZERO GOES HERE"), auto;
}
@keyframes cursorgif{
0%{cursor: url("LINK TO FRAME ZERO GOES HERE"), auto;}
25%{cursor: url("LINK TO FRAME ONE HERE"), auto;}
50%{cursor: url("LINK TO FRAME TWO GOES HERE"), auto;}
75%{cursor: url("LINK TO FRAME THREE GOES HERE"), auto;}
}
</style>
- Grab a gif you'd like to use and save each individual frame; EZGIF works great for this.
- Upload each individual frame to a file hosting service of your choice. I personally use file garden.
- Grab the link to the first frame of your gif, and paste it in the link to frame zero sections I've designated above. I have designated the frames starting from 0 rather than 1 to make calculations easier later on! And, if you've used EZGIF, the file name for the first frame might already be 0 as well. Remember to keep the quotations.
Now you'll need to modify the code more heavily to suit the gif you're using. In my own example, the gif I used had 4 frames, so I needed 4 keyframes. The numerical % values represent the beginning and end of the animation: 0% is the beginning and 100% is the end. For our purposes, we will not need to end on 100% since the animation ends where it begins. Refer to this article for a more in-depth explanation on keyframe timing.
- Note how many frames there are in your gif; this is how many keyframes you will need, and you will be linking to each one subsequently. Copy and paste the surrounding keyframe code and link to each of your frames.
- Now, we will be changing the % at the beginning of each line. Keep the 0% for frame zero. Divide 100 by your number of frames, and get (x). This will be the % for frame one.
- Each subsequent % value will be (x) multiplied by the frame number; you should not end on 100%. In my example, I have 4 frames, so (x) is 25. You can see how I got my % values.
- Once you have all your keyframes timed correctly, change the speed to your liking in the body section (I had mine set at .8s).
That's it. I hope this explanation isn't too convoluted... it's my first time trying to explain code. If you're a more experienced coder, let me know if there's a tool that can automate all the calculations for you. I welcome feedback and questions!
Comments
Displaying 0 of 0 comments ( View all | Add Comment )