{"id":48,"date":"2016-02-23T05:02:12","date_gmt":"2016-02-23T05:02:12","guid":{"rendered":"http:\/\/codemyui.com\/terminal-style-text-effect\/"},"modified":"2018-05-17T12:19:20","modified_gmt":"2018-05-17T02:19:20","slug":"terminal-style-text-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/terminal-style-text-effect\/","title":{"rendered":"Terminal Style Text Effect"},"content":{"rendered":"<p>Recreate this effect with a cool typing effect as you&rsquo;ve seen in a terminal console. Designed by\u00a0<a href=\"https:\/\/twitter.com\/tbgse\" target=\"_blank\" rel=\"noopener\">Tobias Guse<\/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\/81e02dbf28fe4e6aa251\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='375' data-theme-id='0' data-slug-hash='dYaJyJ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Terminal Text Effect by Tobias (@Tbgse) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Recreate this effect with a cool typing effect as you&rsquo;ve seen in a terminal console. Designed by\u00a0Tobias Guse.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/terminal-style-text-effect\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":484,"comment_status":"open","ping_status":"open","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":[1512930],"class_list":["post-48","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/02\/terminal-style-text-effect.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29192,"url":"https:\/\/codemyui.com\/blog-article-card-ui-design-with-full-screen-image-on-hover\/","url_meta":{"origin":48,"position":0},"title":"Blog Article Card UI Design with Full-Screen Image on Hover","author":"Saijo George","date":"January 10, 2020","format":false,"excerpt":"If you want to showcase your article in a card UI layout on your material design inspired blog archive page, this snippet by Tobias Reich is just what you need. You have a card UI layout where you can show the featured image, the title and description of the post\u2026","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"Blog Article Card UI Design with Full-Screen Image on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Blog-Article-Card-UI-Design-with-Full-Screen-Image-on-Hover.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\/Blog-Article-Card-UI-Design-with-Full-Screen-Image-on-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Blog-Article-Card-UI-Design-with-Full-Screen-Image-on-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Blog-Article-Card-UI-Design-with-Full-Screen-Image-on-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25030,"url":"https:\/\/codemyui.com\/image-comparison-greyscale-colour\/","url_meta":{"origin":48,"position":1},"title":"Before and After Image Comparison from Greyscale to Colour","author":"Hima Vincent","date":"November 10, 2017","format":false,"excerpt":"With this image comparison effect you get to see a before and after image that goes from greyscale to colour, it was designed by Tobias Reich. If you are having trouble with the pen, try the archived copy on GitHub Before and After Image Snippet","rel":"","context":"In \"before and after\"","block_context":{"text":"before and after","link":"https:\/\/codemyui.com\/tag\/before-and-after\/"},"img":{"alt_text":"Before and After Image Comparison from Greyscale to Colour","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/image-comparison.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\/image-comparison.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/image-comparison.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/image-comparison.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4038,"url":"https:\/\/codemyui.com\/3d-hover-effect-button\/","url_meta":{"origin":48,"position":2},"title":"3D Hover Effect for Button","author":"Hima Vincent","date":"November 9, 2016","format":false,"excerpt":"This is an interactive 3D button as you move your mouse over the button you will see that the button will interact with it.It's great to use as a call to action element on any website.This is designed by Tobias Reich. If you are having trouble with the pen, try\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Hover Effect for Button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-parallax-button.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\/3d-parallax-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-parallax-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-parallax-button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":2365,"url":"https:\/\/codemyui.com\/typewriter-effect-individual-words-text-block\/","url_meta":{"origin":48,"position":3},"title":"Typewriter Effect for Individual Words in Text Block","author":"Hima Vincent","date":"September 19, 2016","format":false,"excerpt":"We have seen a few different text animation effects and today we have one more for that list, this beautiful snippet was designed by Kunuk Nykjaer. Unlike some of the other terminal effect this one adds the effect to each word in the paragraph element as opposed to the whole\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Typewriter Effect for Individual Words in Text Block","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/typewriter-effect-for-individual-words-in-text-block.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/typewriter-effect-for-individual-words-in-text-block.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/typewriter-effect-for-individual-words-in-text-block.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/typewriter-effect-for-individual-words-in-text-block.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":7582,"url":"https:\/\/codemyui.com\/laser-text-animation-css\/","url_meta":{"origin":48,"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":26661,"url":"https:\/\/codemyui.com\/marker-pen-effect-on-text-animation\/","url_meta":{"origin":48,"position":5},"title":"Marker Pen Effect On Text Animation","author":"Saijo George","date":"July 12, 2018","format":false,"excerpt":"Here is a bunch of CSS only hover animation mimicking the effect of highlighting text using a marker pen. If you are having trouble with the pen, try the archived copy on GitHub Marker Pen Animation Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Marker Pen Effect On Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Marker-Pen-Effect-On-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\/2018\/07\/Marker-Pen-Effect-On-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Marker-Pen-Effect-On-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Marker-Pen-Effect-On-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\/48","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=48"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":26153,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/48\/revisions\/26153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/484"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}