{"id":4207,"date":"2016-11-17T10:41:16","date_gmt":"2016-11-17T00:41:16","guid":{"rendered":"http:\/\/codemyui.com\/?p=4207"},"modified":"2018-05-17T09:51:36","modified_gmt":"2018-05-16T23:51:36","slug":"scan-text-coming-focus-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/scan-text-coming-focus-animation\/","title":{"rendered":"Scan Text Coming into Focus Animation"},"content":{"rendered":"<p>In this <a href=\"https:\/\/codemyui.com\/category\/text-animation\/\">text animation<\/a>, we have a <a href=\"https:\/\/codemyui.com\/tag\/distortion-effect\/\">blurry text<\/a> in the background and when the viewfinder moves over it, the text comes into focus. This animation was designed by <a href=\"http:\/\/twitter.com\/shadeed9\" target=\"_blank\" rel=\"noopener\">Ahmad Shadeed<\/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\/79132c68da46a9daef5554e472a469c2\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Scan Text Coming into Focus Snippet<\/h2>\n<p class='codepen'  data-height='375' data-theme-id='0' data-slug-hash='MwMdqL' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Focus by Ahmad Shadeed (@shadeed) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>In this text animation, we have a blurry text in the background and when the viewfinder moves over it, the text comes into focus. This animation was designed by Ahmad Shadeed.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/scan-text-coming-focus-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":4210,"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":[18697259,1512930],"class_list":["post-4207","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-distortion-effect","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/scan-text-coming-into-focus-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":4139,"url":"https:\/\/codemyui.com\/spooky-light-flickering-effect-text-css\/","url_meta":{"origin":4207,"position":0},"title":"Spooky Light Flickering Effect for Text in CSS","author":"Hima Vincent","date":"November 11, 2016","format":false,"excerpt":"Want to add some spooky effect to your webpage, then this Halloween inspired effect that you can apply to any block of text might be just the thing for you. Using pure CSS Ahmad Shadeed created this snippet. You can highlight a section of that text that will glow brighter\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"Spooky Light Flickering Effect for Text in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":14830,"url":"https:\/\/codemyui.com\/focus-inout-text-effect\/","url_meta":{"origin":4207,"position":1},"title":"Focus In\/Out Text Effect","author":"Hima Vincent","date":"April 10, 2017","format":false,"excerpt":"This is a text effect that shows a portion of the text focusing in and out as the cursor moves over it. It was designed by Jonny Scholes. A similar effect of scanning the text is seen here. If you are having trouble with the pen, try the archived copy\u2026","rel":"","context":"In \"blur effect\"","block_context":{"text":"blur effect","link":"https:\/\/codemyui.com\/tag\/blur-effect\/"},"img":{"alt_text":"Scan Text Coming into Focus Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/scan-text-coming-into-focus-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/scan-text-coming-into-focus-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/scan-text-coming-into-focus-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/scan-text-coming-into-focus-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4224,"url":"https:\/\/codemyui.com\/button-morph-email-subscription-form\/","url_meta":{"origin":4207,"position":2},"title":"Button Morph to Email Subscription Form","author":"Hima Vincent","date":"November 14, 2016","format":false,"excerpt":"This is an email subscription form designed by Ahmad Shadeed where you accept the user's email address as the input. It starts off with a button that you can use as a Call To Action element on your landing page and when you click on it, it morphs to a\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Button Morph to Email Subscription Form","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.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":4207,"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":30000,"url":"https:\/\/codemyui.com\/scan-text-loading-label\/","url_meta":{"origin":4207,"position":4},"title":"Scan Text Loading Label","author":"Saijo George","date":"July 19, 2020","format":false,"excerpt":"Code by: Eric Huguenin from Codepen If you are having trouble with the pen, try the archived copy on GitHub Loader Text Snippet","rel":"","context":"In \"loading animation\"","block_context":{"text":"loading animation","link":"https:\/\/codemyui.com\/tag\/loading-animation\/"},"img":{"alt_text":"Scan Text Loading Label","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Scan-Text-Loading-Label.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Scan-Text-Loading-Label.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Scan-Text-Loading-Label.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/07\/Scan-Text-Loading-Label.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28812,"url":"https:\/\/codemyui.com\/horror-move-style-blurry-text-coming-into-focus-text-animation\/","url_meta":{"origin":4207,"position":5},"title":"Horror Move Style Blurry Text Coming into Focus Text Animation","author":"Saijo George","date":"November 7, 2019","format":false,"excerpt":"Here is a fancy text animation effect using lettering.js, the text loads as a blurry mess which is really hard to read and them in comes into focus revealing the text and then fades away to load the next line. This can work well for Halloween or horror-themed sites. If\u2026","rel":"","context":"In \"blur effect\"","block_context":{"text":"blur effect","link":"https:\/\/codemyui.com\/tag\/blur-effect\/"},"img":{"alt_text":"Horror Move Style Blurry Text Coming into Focus Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.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\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Horror-Move-Style-Blurry-Text-Coming-into-Focus-Text-Animation.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\/4207","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=4207"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4207\/revisions"}],"predecessor-version":[{"id":25986,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4207\/revisions\/25986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/4210"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=4207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=4207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=4207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}