Make a GIF your Cursor in Chrome

Using “AniTuner” to create a special .ani cursor file and the Chrome extension, “Animated Cursors Forever!”. One can use a GIF as their cursor inside Chrome.

Limitations

Windows-only software is used in this guide. Software for building …


This content originally appeared on DEV Community and was authored by Chris Hayes

Using "AniTuner" to create a special .ani cursor file and the Chrome extension, "Animated Cursors Forever!". One can use a GIF as their cursor inside Chrome.

Image description

Limitations

  • Windows-only software is used in this guide. Software for building .ani files on other OS's is difficult to find.
  • This cursor would only show inside websites, not on the Chrome titlebar or outside of Chrome.
  • This changes the "default" cursor. When websites change the cursor, the animated cursor will be hidden.
  • The gif needs to be small! The .ani file that gets created needs to be less than 80KB. Larger than that and the browser extension won't work.

Process

Split the GIF into individual images

  1. Download the GIF - choose a small GIF!
  2. Upload the GIF to EZGif's Splitter tool at: https://ezgif.com/split Image description
  3. Hit "Split to Frames" and then "Download frames as ZIP" to get the GIF as individual images. Extract those images into a folder. Image description

Create the .ani cursor file

  1. Install the Window application, AniTuner. Which some consider the best application for creating .ani cursor files.
  2. In AniTuner, hit "Create a new animated cursor" Image description
  3. Then "Edit Cursor Frames" on the left side Image description
  4. Then "Import image(s)" to import the images from that were downloaded from EZGif. Image description
  5. If the image looks good, hit "Okay" on the popup. Might need to select the "transparent" checkbox.
  6. If the "Resize Image" popup shows, select the "Center image in the frame" option and hit "Okay". Image description
  7. Select the blank frame at the top left, and hit "Remove frame(s)". Image description
  8. Hit "Test Cursor" on the left side, to see what the cursor looks like. Hit "Set Length" at the bottom right to change the animation speed.
  9. Finally, hit "Save Animated Cursor.." on the left side when the animation looks good. Image description
  10. Important - check the .ani file that was created is under 80KB. Any larger and it won't work with the browser extension. If it's too large, EZGif can be used to optimize the gif and remove frames. In AniTuner, you can also try different cursor dimensions.

Use the .ani cursor in Chrome

  1. Get the Chrome extension, "Animated Cursors Forever!": https://chrome.google.com/webstore/detail/animated-cursors-forever/glbompdcoknijlagjdallgimohbcopem?hl=en
  2. After clicking on the installed extension, hit the "Choose File" button to upload the .ani cursor file. Image description
  3. If the file isn't too large (less than 80KB), then the next time the website refreshes, it will use the animated cursor. Note that the cursor won't show immediately, you need to refresh the page to see the new cursor.


This content originally appeared on DEV Community and was authored by Chris Hayes


Print Share Comment Cite Upload Translate Updates
APA

Chris Hayes | Sciencx (2022-04-04T23:33:26+00:00) Make a GIF your Cursor in Chrome. Retrieved from https://www.scien.cx/2022/04/04/make-a-gif-your-cursor-in-chrome/

MLA
" » Make a GIF your Cursor in Chrome." Chris Hayes | Sciencx - Monday April 4, 2022, https://www.scien.cx/2022/04/04/make-a-gif-your-cursor-in-chrome/
HARVARD
Chris Hayes | Sciencx Monday April 4, 2022 » Make a GIF your Cursor in Chrome., viewed ,<https://www.scien.cx/2022/04/04/make-a-gif-your-cursor-in-chrome/>
VANCOUVER
Chris Hayes | Sciencx - » Make a GIF your Cursor in Chrome. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/04/make-a-gif-your-cursor-in-chrome/
CHICAGO
" » Make a GIF your Cursor in Chrome." Chris Hayes | Sciencx - Accessed . https://www.scien.cx/2022/04/04/make-a-gif-your-cursor-in-chrome/
IEEE
" » Make a GIF your Cursor in Chrome." Chris Hayes | Sciencx [Online]. Available: https://www.scien.cx/2022/04/04/make-a-gif-your-cursor-in-chrome/. [Accessed: ]
rf:citation
» Make a GIF your Cursor in Chrome | Chris Hayes | Sciencx | https://www.scien.cx/2022/04/04/make-a-gif-your-cursor-in-chrome/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts