Jump to content
Search Community

Sticky cursor animation

sIREN test
Moderator Tag

Recommended Posts

Thank you very much but I already have seen those. I think it's a bit more difficult to make the cursor be border/corsshair/marker (don't know how this looks like) or at least it is for me and I hoped if someone had any idea especially for this.

Link to comment
Share on other sites

35 minutes ago, sIREN said:

I think it's a bit more difficult to make the cursor be border/corsshair/marker (don't know how this looks like) or at least it is for me and I hoped if someone had any idea especially for this.

I'd likely use an image. You just have to replace the circle with the image that you want to use.

Link to comment
Share on other sites

4 minutes ago, sIREN said:

I have no idea where to put the image for the cursor or how. Can you help me ?

Using that approach, you'd need to switch out the rectangle with a canvas image. Since you're using Paper.js you could look into using their implementation: http://paperjs.org/tutorials/images/working-with-rasters/

 

I highly recommend first doing a basic canvas tutorial if you haven't used it before. The one on Mozilla is solid.

Link to comment
Share on other sites

Welcome to the forum, I think there might be plenty of easier solutions, how about using:

 

• SVG

• Simple 1-bit PNG image (scaleable)

• CSS Background Image sprite with simple 1-bit PNG image (scaleable) 4 positions

• CSS Border Image with simple 1-bit PNG image (scaleable)

• CSS Border Image with inline SVG

• Use a single div then use 4 pseudo elements for corners

• Structure 5 divs, 4 divs inside div container

• etc., 

 

¯\_(ツ)_/¯

Link to comment
Share on other sites

4 minutes ago, Shrug ¯\_(ツ)_/¯ said:

• Simple 1-bit PNG image (scaleable)

• CSS Background Image sprite with simple 1-bit PNG image (scaleable) 4 positions

• CSS Border Image with simple 1-bit PNG image (scaleable)

I'm curious, how would using a 1-bit PNG would be more helpful than any other PNG? 

 

Using 4 images whether it's in the border or not is a fine idea.

 

8 minutes ago, Shrug ¯\_(ツ)_/¯ said:

• Use a single div then use 4 pseudo elements for corners

You can't have 4 pseudo-elements on one div. 

  • Like 1
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

I'm curious, how would using a 1-bit PNG would be more helpful than any other PNG? 

IMHO 1-bit scales nicely, but of course use whatever one likes.

 

1 hour ago, ZachSaucier said:

You can't have 4 pseudo-elements on one div. 

Tis true, I mistyped and misread when making that list of possible simpler approaches, thanks for catching that. Technically though you can use multiple pseudo elements on the same element but not multiple instances of ::before & ::after, but plenty of others.

 

I guess you could go down the rabbit hole if ya wanted and style it up.

.div:before, .div:after, .div>:first-child:before, .div>:first-child:after {

 

Link to comment
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...