{"id":14830,"date":"2017-04-10T22:07:32","date_gmt":"2017-04-10T12:07:32","guid":{"rendered":"https:\/\/codemyui.com\/?p=14830"},"modified":"2018-07-25T10:19:45","modified_gmt":"2018-07-25T00:19:45","slug":"focus-inout-text-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/focus-inout-text-effect\/","title":{"rendered":"Focus In\/Out Text Effect"},"content":{"rendered":"<p>This is a <a href=\"https:\/\/codemyui.com\/tag\/text-animation\/\">text effect<\/a> that shows a portion of the text <a href=\"https:\/\/codemyui.com\/tag\/blur-effect\/\">focusing in and out<\/a> as the cursor moves over it. It was designed by <a href=\"https:\/\/twitter.com\/jonnyscholes\" target=\"_blank\" rel=\"noopener\">Jonny Scholes<\/a>. A similar effect of <a href=\"https:\/\/codemyui.com\/scan-text-coming-focus-animation\/\">scanning the text is seen here<\/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\/c45a2964c9eb5054237f67e567903af8\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Focus In\/Out Snippet<\/h2>\n<p class='codepen'  data-height='475' data-theme-id='0' data-slug-hash='QbKPdZ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen In\/out of focus text effect by Jonny Scholes (@jonnyscholes) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/focus-inout-text-effect\/ \">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":true,"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":[14265428,1512930],"class_list":["post-14830","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-blur-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":4207,"url":"https:\/\/codemyui.com\/scan-text-coming-focus-animation\/","url_meta":{"origin":14830,"position":0},"title":"Scan Text Coming into Focus Animation","author":"Hima Vincent","date":"November 17, 2016","format":false,"excerpt":"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. If you are having trouble with the pen, try the archived copy on GitHub Scan Text Coming into Focus\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-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":25262,"url":"https:\/\/codemyui.com\/text-field-gradient-border-focus\/","url_meta":{"origin":14830,"position":1},"title":"Text Field Gradient Border on Focus","author":"Saijo George","date":"December 14, 2017","format":false,"excerpt":"Here is a fancy focus effect for a text field designed by Rik Schennink. When you focus on the rounded text field by clicking on it the gradient border feathers out giving it a very cool look. If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"gradient\"","block_context":{"text":"gradient","link":"https:\/\/codemyui.com\/tag\/gradient\/"},"img":{"alt_text":"Text Field Gradient Border on Focus","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/text-field-gradient-border-on-focus.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/text-field-gradient-border-on-focus.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/text-field-gradient-border-on-focus.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/text-field-gradient-border-on-focus.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":14830,"position":2},"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":[]},{"id":26404,"url":"https:\/\/codemyui.com\/broken-and-out-of-focus-text-effect-using-css\/","url_meta":{"origin":14830,"position":3},"title":"Broken and Out of Focus Text Effect using CSS","author":"Saijo George","date":"May 31, 2018","format":false,"excerpt":"I am loving this pure CSS text animation by Yusuke Nakaya where you have the text that is broken up and the pieces move up and down giving it a blurry effect, it's also got a neon effect going for it as well. If you are having trouble with the\u2026","rel":"","context":"In \"blur effect\"","block_context":{"text":"blur effect","link":"https:\/\/codemyui.com\/tag\/blur-effect\/"},"img":{"alt_text":"Broken and Out of Focus Text Effect using CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Broken-and-Out-of-Focus-Text-Effect-using-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Broken-and-Out-of-Focus-Text-Effect-using-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Broken-and-Out-of-Focus-Text-Effect-using-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Broken-and-Out-of-Focus-Text-Effect-using-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":7582,"url":"https:\/\/codemyui.com\/laser-text-animation-css\/","url_meta":{"origin":14830,"position":4},"title":"Laser Text Animation in CSS and Javascript","author":"Hima Vincent","date":"November 27, 2019","format":false,"excerpt":"JS Laser Text Engraving In this text animation by Martin Pitt, we have a really smooth text laser engraving effect using splitting.js If you are having trouble with the pen, try the archived copy on GitHub We judge ourselves by our intentions and\u00a0others by their\u00a0behaviourPablo Picasso Laser Engraving Text Animation\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"We judge ourselves by our intentions and\u00a0others by their\u00a0behaviour","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.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\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3290,"url":"https:\/\/codemyui.com\/fade-intro-text-animation\/","url_meta":{"origin":14830,"position":5},"title":"Fade In &#8211; Out Intro Text Animation","author":"Hima Vincent","date":"October 26, 2016","format":false,"excerpt":"This is an intro text animation that we can use in the hero section of the website where you want to tell a small story. You can see blurry texts coming into focus and fading away to the next. Designed by Sebastian Schepis. If you are having trouble with the\u2026","rel":"","context":"In \"hero section\"","block_context":{"text":"hero section","link":"https:\/\/codemyui.com\/tag\/hero-section\/"},"img":{"alt_text":"Fade In - Out Intro Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/opening-sequence-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\/2016\/10\/opening-sequence-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/opening-sequence-text-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/opening-sequence-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\/14830","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=14830"}],"version-history":[{"count":3,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/14830\/revisions"}],"predecessor-version":[{"id":26730,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/14830\/revisions\/26730"}],"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=14830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=14830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=14830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}