{"id":5972,"date":"2017-02-08T01:06:31","date_gmt":"2017-02-07T15:06:31","guid":{"rendered":"https:\/\/codemyui.com\/?p=5972"},"modified":"2018-05-16T17:00:21","modified_gmt":"2018-05-16T07:00:21","slug":"stuff-following-mouse-pointer","status":"publish","type":"post","link":"https:\/\/codemyui.com\/stuff-following-mouse-pointer\/","title":{"rendered":"Stuff Following Mouse Pointer"},"content":{"rendered":"<p>In this particular snippet, you get a bunch of markers that follow around your <a href=\"https:\/\/codemyui.com\/tag\/mouse-pointer\/\">mouse cursor<\/a> on the screen. As soon as you move your cursor, the markers will follow you and once you stop they will circle around the pointer. This was designed by <a href=\"https:\/\/twitter.com\/isoden_\" target=\"_blank\" rel=\"noopener\">Yu Isoda<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/f4cb3a6a75db44b46dda3fd04c6e5be7\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Mouse Tracker Snippet<\/h2>\n<p class='codepen'  data-height='489' data-theme-id='0' data-slug-hash='xRpQMO' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Mouse tracker by Yu Isoda (@isoden) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>In this particular snippet, you get a bunch of markers that follow around your mouse cursor on the screen. As soon as you move your cursor, the markers will follow you and once you stop they will circle around the pointer. This was designed by Yu Isoda.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/stuff-following-mouse-pointer\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":5991,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[1948640],"class_list":["post-5972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-mouse-pointer","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/mouse-tracker.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29107,"url":"https:\/\/codemyui.com\/catch-mouse-pointer-when-going-to-click-a-button\/","url_meta":{"origin":5972,"position":0},"title":"Catch Mouse Pointer When Going to Click a Button","author":"Saijo George","date":"January 5, 2020","format":false,"excerpt":"This is a neat little trick that you can use on a game or prank related websites where when you go to click the button a guy comes up from the edge of the screen and grabs the mouse cursor. If you are having trouble with the pen, try the\u2026","rel":"","context":"In \"mouse pointer\"","block_context":{"text":"mouse pointer","link":"https:\/\/codemyui.com\/tag\/mouse-pointer\/"},"img":{"alt_text":"Catch Mouse Pointer When Going to Click a Button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Catch-Mouse-Pointer-When-Going-to-Click-a-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Catch-Mouse-Pointer-When-Going-to-Click-a-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Catch-Mouse-Pointer-When-Going-to-Click-a-Button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Catch-Mouse-Pointer-When-Going-to-Click-a-Button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28426,"url":"https:\/\/codemyui.com\/cta-button-where-the-mouse-cursor-always-points-to-it\/","url_meta":{"origin":5972,"position":1},"title":"CTA button where the mouse cursor always points to it","author":"Saijo George","date":"October 8, 2019","format":false,"excerpt":"Want to have a CTA button on a page where you want to align the cursor to always point to the button? Then this snippet by Aaron Iker is just what you need. The cursor is always pointed to the CTA button regardless of where you move the mouse, while\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"CTA button where the mouse cursor always points to it","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/CTA-button-where-the-mouse-cursor-always-points-to-it.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/CTA-button-where-the-mouse-cursor-always-points-to-it.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/CTA-button-where-the-mouse-cursor-always-points-to-it.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/CTA-button-where-the-mouse-cursor-always-points-to-it.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17739,"url":"https:\/\/codemyui.com\/flashlight-mouse-pointer\/","url_meta":{"origin":5972,"position":2},"title":"Flashlight Mouse Pointer","author":"Hima Vincent","date":"October 10, 2019","format":false,"excerpt":"In this snippet by Tommy Hodgins we can see the effect where the entire page is behind a fog of war like effect and is barely visible. When you move the mouse around you can see that there is a spotlight like effect, that reveals the content in that area,\u2026","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Flashlight Mouse Pointer","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Flashlight-Mouse-Pointer.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Flashlight-Mouse-Pointer.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Flashlight-Mouse-Pointer.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Flashlight-Mouse-Pointer.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28825,"url":"https:\/\/codemyui.com\/bottom-half-of-text-hidden-and-reveal-on-hover-with-a-splotch-cursor\/","url_meta":{"origin":5972,"position":3},"title":"Bottom Half of Text Hidden and Reveal on Hover with a Splotch Cursor","author":"Saijo George","date":"November 8, 2019","format":false,"excerpt":"This jquery snippet using lettering.js allows you to show a text where the bottom part of the text is hidden and is only revealed to the user when they hover over it. The mouse pointer looks like a splotch of ink which is a really cool effect. If you are\u2026","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Bottom Half of Text Hidden and Reveal on Hover with a Splotch Cursor","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Bottom-Half-of-Text-Hidden-and-Reveal-on-Hover-with-a-Splotch-Cursor.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Bottom-Half-of-Text-Hidden-and-Reveal-on-Hover-with-a-Splotch-Cursor.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Bottom-Half-of-Text-Hidden-and-Reveal-on-Hover-with-a-Splotch-Cursor.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Bottom-Half-of-Text-Hidden-and-Reveal-on-Hover-with-a-Splotch-Cursor.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25094,"url":"https:\/\/codemyui.com\/rainbow-mouse-trail\/","url_meta":{"origin":5972,"position":4},"title":"Rainbow Mouse Trail","author":"Saijo George","date":"November 15, 2017","format":false,"excerpt":"A very colourful and trippy mouse pointer designed by Marjo Sobrecaray. As you move around the mouse you see a trail of colourful bits following the mouse pointer. If you are having trouble with the pen, try the archived copy on GitHub Rainbow Mouse Trail Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/rainbow-mouse-trail.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/rainbow-mouse-trail.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/rainbow-mouse-trail.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/rainbow-mouse-trail.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29023,"url":"https:\/\/codemyui.com\/interactive-hippo-button-with-eyes-tracking-your-mouse\/","url_meta":{"origin":5972,"position":5},"title":"Interactive Hippo Button with Eyes Tracking your Mouse","author":"Saijo George","date":"December 10, 2019","format":false,"excerpt":"I love this epic button that looks like a hippopotamus and the eye follow your mouse movement and the ears wiggle and when you hover over it, the hippo opens its mouth. This button uses GSAP was designed by Mariusz Dabrowski and works well for a zoo or other animal-related\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Interactive Hippo Button with Eyes Tracking your Mouse","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Interactive-Hippo-Button-with-Eyes-Tracking-your-Mouse.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Interactive-Hippo-Button-with-Eyes-Tracking-your-Mouse.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Interactive-Hippo-Button-with-Eyes-Tracking-your-Mouse.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Interactive-Hippo-Button-with-Eyes-Tracking-your-Mouse.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/5972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=5972"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/5972\/revisions"}],"predecessor-version":[{"id":25939,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/5972\/revisions\/25939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/5991"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=5972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=5972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=5972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}