{"id":2523,"date":"2016-10-14T00:05:52","date_gmt":"2016-10-13T14:05:52","guid":{"rendered":"http:\/\/codemyui.com\/?p=2523"},"modified":"2018-05-17T09:52:55","modified_gmt":"2018-05-16T23:52:55","slug":"3d-text-effect-mouse-movement","status":"publish","type":"post","link":"https:\/\/codemyui.com\/3d-text-effect-mouse-movement\/","title":{"rendered":"3D Text Effect on Mouse Movement"},"content":{"rendered":"<p>In this fancy 3D <a href=\"https:\/\/codemyui.com\/category\/text-animation\/\">text effect<\/a>, you will see that the text appears to be layered which gives it a sense of depth. When you move the mouse the text at the various layers follows the <a href=\"https:\/\/codemyui.com\/tag\/mouse-pointer\/\">mouse pointer<\/a> at a different speed which creates an illusion of <a href=\"https:\/\/codemyui.com\/tag\/3d\/\">3D effect<\/a> for the text. This will work great on any of your web project where you want to highlight the <a href=\"https:\/\/codemyui.com\/category\/hero-section\/\">hero section<\/a> with custom text. Designed by Ninivert.<\/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\/6c3b1af85314191da9608ee27d2e6879\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='455' data-theme-id='0' data-slug-hash='ZpEQBR' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Typographic Soup by ninivert (@ninivert) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>In this fancy 3D text effect, you will see that the text appears to be layered which gives it a sense of depth. When you move the mouse the text at the various layers follows the mouse pointer at a different speed which creates an illusion of 3D effect for the text. This will work&hellip;<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/3d-text-effect-mouse-movement\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":2920,"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":[2131,38934147,1948640,1512930],"class_list":["post-2523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-3d","tag-hero-section","tag-mouse-pointer","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/3d-text-effect-on-mouse-movement.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":22974,"url":"https:\/\/codemyui.com\/mouse-aware-3d-tilt-panel\/","url_meta":{"origin":2523,"position":0},"title":"Mouse Aware 3D Tilt Panel","author":"Hima Vincent","date":"August 7, 2017","format":false,"excerpt":"In this image effect, we have an image in the background and the text is super imposed over it giving it a feeling of depth and as the mouse moves it creates the illusion of the panel tilting towards the mouse. It was designed by Peter Barr If you are\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Mouse Aware 3D Tilt Panel","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Mouse-Aware-3D-Tilt-Panel.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\/Mouse-Aware-3D-Tilt-Panel.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Mouse-Aware-3D-Tilt-Panel.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Mouse-Aware-3D-Tilt-Panel.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17670,"url":"https:\/\/codemyui.com\/layers-shadow-3d-text-effect\/","url_meta":{"origin":2523,"position":1},"title":"Layers Shadow 3D Text Effect","author":"Hima Vincent","date":"June 8, 2017","format":false,"excerpt":"Here is a pure CSS based text effect designed by Twixes. You have the text with multiple layers giving it a 3D long shadow effect. If you are having trouble with the pen, try the archived copy on GitHub Layers Text Snippet","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Layers Shadow Text Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/layers-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/layers-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/layers-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/layers-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28975,"url":"https:\/\/codemyui.com\/hover-to-reveal-hidden-text-by-removing-background-with-a-sinkhole-in-a-ball-pit-effect\/","url_meta":{"origin":2523,"position":2},"title":"Hover to Reveal Hidden Text by Removing Background With a Sinkhole in a Ball Pit Effect","author":"Saijo George","date":"November 26, 2019","format":false,"excerpt":"With this mouse hover animation by Tyler Durrett you have a solid background colour which hides the content in the section and the area around the mouse is used to reveal the text content below, the effect of the mouse can only be described by something like a sinkhole or\u2026","rel":"","context":"In \"canvas\"","block_context":{"text":"canvas","link":"https:\/\/codemyui.com\/tag\/canvas\/"},"img":{"alt_text":"Hover to Reveal Hidden Text by Removing Background With a Sinkhole in a Ball Pit Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Hover-to-Reveal-Hidden-Text-by-Removing-Background-With-a-Sinkhole-in-a-Ball-Pit-Effect.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\/Hover-to-Reveal-Hidden-Text-by-Removing-Background-With-a-Sinkhole-in-a-Ball-Pit-Effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Hover-to-Reveal-Hidden-Text-by-Removing-Background-With-a-Sinkhole-in-a-Ball-Pit-Effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Hover-to-Reveal-Hidden-Text-by-Removing-Background-With-a-Sinkhole-in-a-Ball-Pit-Effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26687,"url":"https:\/\/codemyui.com\/3d-uppercase-text-with-shadow\/","url_meta":{"origin":2523,"position":3},"title":"3D Uppercase Text With Shadow","author":"Saijo George","date":"July 17, 2018","format":false,"excerpt":"A nice little text animation that features an awesome 3D text effect designed by Mandy Michael. If you are having trouble with the pen, try the archived copy on GitHub 3D Text with Shadow Snippet","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Uppercase Text With Shadow","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1355,"url":"https:\/\/codemyui.com\/five-fancy-css-text-effect\/","url_meta":{"origin":2523,"position":4},"title":"Five Fancy CSS Text Effect","author":"Hima Vincent","date":"August 1, 2016","format":false,"excerpt":"In this post, you will see five text CSS effect designed by Stephy Miehle. The first one is a text effect with multi coloured bleeding effect, the second one is a skewed effect with a yellow background, the third one is a 3d candy cane like effect for the text,\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Fancy CSS Text Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/fancy-css-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/fancy-css-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/fancy-css-text-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/fancy-css-text-effect.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":2523,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2523","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=2523"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2523\/revisions"}],"predecessor-version":[{"id":26032,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2523\/revisions\/26032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/2920"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=2523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=2523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=2523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}