{"id":14813,"date":"2017-04-29T23:35:59","date_gmt":"2017-04-29T13:35:59","guid":{"rendered":"https:\/\/codemyui.com\/?p=14813"},"modified":"2019-11-08T11:04:03","modified_gmt":"2019-11-08T00:04:03","slug":"console-style-text-animation-randomised-cursor","status":"publish","type":"post","link":"https:\/\/codemyui.com\/console-style-text-animation-randomised-cursor\/","title":{"rendered":"Console Style Text Animation With Randomised Cursor"},"content":{"rendered":"<p>Fancy <a href=\"https:\/\/codemyui.com\/tag\/text-animation\/\">text animation<\/a> where you have a randomised cursor typing out the text in a console window. Designed by <a href=\"https:\/\/twitter.com\/qkevinto\" target=\"_blank\" rel=\"noopener\">Kevin<\/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\/568e1cbb33ec898f0a8c721400fd0139\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a><\/p>\n<h2>Console Text Effect Snippet<\/h2>\n<p class='codepen'  data-height='602' data-theme-id='0' data-slug-hash='WQVNWO' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Futuristic Resolving\/Typing Text Effect feat. GLaDOS by Kevin (@qkevinto) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Fancy text animation where you have a randomised cursor typing out the text in a console window. Designed by Kevin.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/console-style-text-animation-randomised-cursor\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":28878,"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":[1445,1512930,14334556],"class_list":["post-14813","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-retro","tag-text-animation","tag-word-scrambler","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Console-Style-Text-Animation-With-Randomised-Cursor.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":28825,"url":"https:\/\/codemyui.com\/bottom-half-of-text-hidden-and-reveal-on-hover-with-a-splotch-cursor\/","url_meta":{"origin":14813,"position":0},"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":14330,"url":"https:\/\/codemyui.com\/text-swap-animation\/","url_meta":{"origin":14813,"position":1},"title":"Text Swap Animation","author":"Hima Vincent","date":"April 29, 2017","format":false,"excerpt":"Text animation you can use in the hero section of the website. On hover the text changes and when you move the cursor away the text changes back. This particular animation was designed by Ben Sheppard. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"Text Swap Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/text-swap-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/text-swap-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/text-swap-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/text-swap-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25244,"url":"https:\/\/codemyui.com\/pure-css-pressed-style-text-animation\/","url_meta":{"origin":14813,"position":2},"title":"Pure CSS Pressed Style Text Animation","author":"Saijo George","date":"January 5, 2018","format":false,"excerpt":"This is a text effect designed by Tryggvi Gylfason. There is a small cursor like element that moves from left to right and back and as this moves the text blow it gets compressed. If you are having trouble with the pen, try the archived copy on GitHub Pressed Text\u2026","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-pressing-style-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\/2017\/11\/pure-css-pressing-style-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-pressing-style-text-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-pressing-style-text-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":14830,"url":"https:\/\/codemyui.com\/focus-inout-text-effect\/","url_meta":{"origin":14813,"position":3},"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":7582,"url":"https:\/\/codemyui.com\/laser-text-animation-css\/","url_meta":{"origin":14813,"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":6389,"url":"https:\/\/codemyui.com\/css-flickering-effect-neon-text\/","url_meta":{"origin":14813,"position":5},"title":"CSS Only Flickering Effect Neon Text","author":"Hima Vincent","date":"February 23, 2017","format":false,"excerpt":"We have seen many neon text effects and this is a new one designed by Kevin. We have the neon text and it has a glowing and flickering effect all done in CSS. If you are having trouble with the pen, try the archived copy on GitHub Neon Glow Flicker\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"CSS Only Flickering Effect Neon Text","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/css-only-flickering-effect-neon-text.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/css-only-flickering-effect-neon-text.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/css-only-flickering-effect-neon-text.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/css-only-flickering-effect-neon-text.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\/14813","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=14813"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/14813\/revisions"}],"predecessor-version":[{"id":28879,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/14813\/revisions\/28879"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/28878"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=14813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=14813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=14813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}