Jump to content

Possible to use GIF to create animated custom cursor?

Recommended Posts

Hello. I've been trying to use an animated GIF file (that does appear as animated in the Custom Files drop-down menu in the Custom CSS menu) as a custom cursor; however, simply inserting it into the "url()" parentheses in

body {

cursor: url(), auto !important;

}

only creates a static image as the cursor. Pasting an external link to an animated GIF uploaded elsewhere has the same problem. Is it at all possible to have an animated cursor from a GIF file?

 

Also, currently the static custom cursor is changed for the default when entering the edges of Vimeo videos, or hovering over their playback controls; what code would activate the custom cursor over these linked video blocks?

Thanks!

Link to comment
  • Replies 5
  • Views 828
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 8/12/2024 at 5:13 AM, tuanphan said:

Can you share link to gif image + your site url? We can check problem easier

Hello, thank you! An example .gif I made is located at https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExamN2N3dyOHp0dm5tN2h2ZmJlbTRleDdnaDUxbTU2b24yMmtmcnRxZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/f45o41WP4HdjF8QVZU/giphy.gif, and my website is https://www.martingirardi.com/. I've settled for static images in the current version of the site.

Link to comment
On 8/24/2024 at 3:35 AM, mmgirar said:

Hello, thank you! An example .gif I made is located at https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExamN2N3dyOHp0dm5tN2h2ZmJlbTRleDdnaDUxbTU2b24yMmtmcnRxZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/f45o41WP4HdjF8QVZU/giphy.gif, and my website is https://www.martingirardi.com/. I've settled for static images in the current version of the site.

I see you figured it out? It already show custom cursor here

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
7 hours ago, tuanphan said:

I see you figured it out? It already show custom cursor here

Unfortunately, I didn't figure it out; my question was about using an animated GIF file as a cursor. My site's cursor uses a static PNG cursor, and a second inverted PNG assigned to appear while the user hovers over a button or link. I was hoping to use a moving GIF as a custom cursor, but when I insert a link to such a GIF into "url()" in the code above—even when it appears as animated in the Custom Files drop-down menu after direct upload—the cursor that appears on the site is static.

 

What code allows for the use of an animated cursor via a GIF file?

Link to comment
On 8/26/2024 at 11:17 PM, mmgirar said:

Unfortunately, I didn't figure it out; my question was about using an animated GIF file as a cursor. My site's cursor uses a static PNG cursor, and a second inverted PNG assigned to appear while the user hovers over a button or link. I was hoping to use a moving GIF as a custom cursor, but when I insert a link to such a GIF into "url()" in the code above—even when it appears as animated in the Custom Files drop-down menu after direct upload—the cursor that appears on the site is static.

 

What code allows for the use of an animated cursor via a GIF file?

I just had some searches and it looks like not possible now

image.thumb.png.975a5998aca4a4078849868f3cd22edb.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.