Custom%20Animated%20Cursors - by Sarkis
Created on Tue Jan 07 2020 16:04:01 GMT+0000 (Coordinated Universal Time)
This responsive website has 153 views, 3 comments, and 5 likes.
Integrating%20custom%20animated%20cursors%20is%20very%20simple.%0A%0A1.%20Create%20a%20DIV%20with%20100%25%20WIDTH%20and%20100%20VH.%20Set%20its%20class%20name%20CURSOR%20and%20set%20its%20position%20absolute.%0A%0A2.%20Upload%20a%20PNG%20or%20GIF%20cursor%2C%20place%20it%20in%20the%20DIV%2C%20and%20give%20it%20left%20and%20top%20margin%20to%20align%20it%20with%20the%20mouse.%20Finally%2C%20set%20its%20position%20ABSOLUTE%20with%20the%20highest%20Z-INDEX%20so%20it%20never%20falls%20behind%20other%20elements.%0A%0A2.%20Add%20a%20PAGE%20TRIGGER%20interaction%2C%20select%20MOUSE%20MOVE%20IN%20VIEWPORT%2C%20and%20create%20a%20new%20animation.%20Select%20the%20cursor%20and%20add%20MOVE%20interactions%20in%20the%20MOUSE%20X%20and%20MOUSE%20Y%20panels.%20Set%20X%u2019s%20position%20to%20-50VW%20at%200%25%20and%2050VW%20at%20100%25.%20Set%20Y%u2019s%20position%20to%20-50%20VH%20at%200%25%20and%2050%20VH%20at%20100%25.%0A%0A3.%20Scroll%20to%20the%20bottom%20of%20the%20Style%20panel%20of%20each%20element%20and%20select%20CURSOR%3A%20NONE%20to%20prevent%20the%20default%20cursor%20from%20appearing.%0A%0A4.%20Prevent%20your%20new%20cursor%20element%20from%20blocking%20your%20click%20interactions%20with%20other%20elements%20by%20adding%20one%20line%20of%20CSS%20in%20the%20HEAD%20of%20each%20page%27s%20settings.%20%3Cstyle%3E.cursor%20%7Bpointer-events%3A%20none%3B%7D%3C/style%3E%0A%0AThat%27s%20it.%20Cheers%21%20%3A%29
Visit http://customcursors.webflow.io