sIREN Posted April 15, 2020 Share Posted April 15, 2020 Hey, I've seen this animation when hovering but I have no idea how to do it. Perhaps someone can help me with this please? Hover.mp4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 15, 2020 Share Posted April 15, 2020 Hey sIREN and welcome to the GreenSock forums! There are existing threads than can show you how this is made such as and Also this Codrops tutorial. Link to comment Share on other sites More sharing options...
sIREN Posted April 15, 2020 Author Share Posted April 15, 2020 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 More sharing options...
ZachSaucier Posted April 15, 2020 Share Posted April 15, 2020 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 More sharing options...
sIREN Posted April 15, 2020 Author Share Posted April 15, 2020 I'll give it a try Link to comment Share on other sites More sharing options...
sIREN Posted April 15, 2020 Author Share Posted April 15, 2020 I've modified a little bit the code but I have no idea where to put the image for the cursor or how. Can you help me ? See the Pen bGVEgde by sIRENGR (@sIRENGR) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 15, 2020 Share Posted April 15, 2020 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 More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 15, 2020 Share Posted April 15, 2020 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 More sharing options...
sIREN Posted April 15, 2020 Author Share Posted April 15, 2020 This one with the pseudo elements it could be very good but if you see the video that I send at start it's a cursor with opacity 0 and when hovering it becomes a border Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 15, 2020 Share Posted April 15, 2020 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. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 15, 2020 Share Posted April 15, 2020 Canvas arcTo. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo See the Pen ecb22f667f7dea096d896440e0b5dd0a by osublake (@osublake) on CodePen 3 Link to comment Share on other sites More sharing options...
sIREN Posted April 15, 2020 Author Share Posted April 15, 2020 We are getting close. Thank you I'll play with it and I'll tell you tomorrow! Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 15, 2020 Share Posted April 15, 2020 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 More sharing options...
sIREN Posted April 15, 2020 Author Share Posted April 15, 2020 You can check his site out if it helps https://jmswrnr.com/ Link to comment Share on other sites More sharing options...
OSUblake Posted April 15, 2020 Share Posted April 15, 2020 3 hours ago, sIREN said: You can check his site out if it helps https://jmswrnr.com/ You can inspect the cursor to get an idea of what they did. It's made up of 4 different elements, and they are animating their position and border radius. 2 Link to comment Share on other sites More sharing options...
sIREN Posted April 15, 2020 Author Share Posted April 15, 2020 Yes I've inspected it before but I couldn't understard or find any logic Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now