{"id":1103,"date":"2019-04-24T17:41:00","date_gmt":"2019-04-24T17:41:00","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=1103"},"modified":"2019-04-24T17:41:00","modified_gmt":"2019-04-24T17:41:00","slug":"auto-type-in-javascript","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/","title":{"rendered":"Auto Type In JavaScript | Animated Typing Effect In Pure JS"},"content":{"rendered":"<p><strong>How to create an Animated Typing Effect In Pure JS? In short, create Auto Type In JavaScript.\u00a0<\/strong><\/p>\n<p>You must have seen <strong>auto type effect<\/strong> on some websites. They use this to show their quality\u00a0 &amp; uniqueness. A perfect and funny example of auto-typing is: In hacking movies, a hacker just click one <span><a href=\"https:\/\/webdevtrick.com\/toggle-button-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">button<\/a><\/span> then many lines of code appear. The similar thing happens when you run <em>ping<\/em> in CMD or <em>apt-get update<\/em> in Linux terminal. This <strong>effect<\/strong> is not 100% the same but its very close.<\/p>\n<p>So, Today I am sharing an <strong>animated typing effect<\/strong> in pure <span><a href=\"https:\/\/webdevtrick.com\/web-development\/javascript\" target=\"_blank\" rel=\"noopener noreferrer\">javascript<\/a><\/span>. There are no JQuery or any JavaScript framework used, but I used an external CSS library. This auto type in javascript will be perfect in your <span><a href=\"https:\/\/webdevtrick.com\/dynamic-banner-website-intro-source-code\/\" target=\"_blank\" rel=\"noopener noreferrer\">website&#8217;s banner<\/a><\/span> to introduce. Mostly this type of program uses in any kind of service provider websites.<\/p>\n<p>If you are using a <strong>banner<\/strong> slider for only <span><a href=\"https:\/\/webdevtrick.com\/animated-text-reveal-in-pure-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">showing text<\/a><\/span>, then you can use this simple program.\u00a0 Because it has less code and light in size. If you don&#8217;t get the program yet, I am talking about. Then let&#8217;s see a preview to know what is <strong>program<\/strong> actually is or how it looks like.<\/p>\n<h3>Preview Of\u00a0 Animated Typing Effect In Pure JS<\/h3>\n<p>First, see this video preview of getting an idea about this program.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1103-1\" width=\"640\" height=\"341\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-typing-effect-javascript.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-typing-effect-javascript.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-typing-effect-javascript.mp4<\/a><\/video><\/div>\n<p>Now you can clearly see this program visually with the help of this video preview. If you like this then go for <strong>source code<\/strong> given below.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/javascript-keycode-detect\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript Keycode Detect Program<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/error-404-page-with-html-css-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">Animated Error 404 Page<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/javascript-snake-game-source-code\/\" target=\"_blank\" rel=\"noopener noreferrer\">Snake Game In JavaScript<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>Auto Type In JavaScript Programs Source Code<\/h2>\n<p>First, talk a little bit about the program. This <strong>auto type program is in pure javascript<\/strong>. I used a google font and an external <span><a href=\"https:\/\/webdevtrick.com\/web-design\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a><\/span> library called normalize ( <a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noopener noreferrer\">get info<\/a> ). There is very less code in HTML and CSS file, mostly used javascript.<\/p>\n<p>You have to create 3 files for this program. One for <span><a href=\"https:\/\/webdevtrick.com\/web-design\/html\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML<\/a><\/span>, One for CSS, &amp; One for <strong>JavaScript<\/strong>.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<em>index.html<\/em>&#8216; and put these codes given here below.<\/p>\n<pre class=\"lang:default decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;!-- code by webdevtrick ( https:\/\/webdevtrick.com ) --&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;Auto Type&lt;\/title&gt;\r\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto\" rel=\"stylesheet\"&gt;\r\n &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"&gt;\r\n\r\n      &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n  &lt;section class=\"pen\"&gt;\r\n&lt;h1 class=\"text\"&gt;Webdevtrick.com Is\r\n  &lt;span\r\n     class=\"txt-rotate\"\r\n     data-period=\"2000\"\r\n     data-rotate='[ \"Awesome.\", \"Amezing.\", \"Very Informative.\", \"Source Code Sharing Blog.\", \"Great!\" ]'&gt;&lt;\/span&gt;\r\n&lt;\/h1&gt;\r\n&lt;\/section&gt;\r\n\r\n    &lt;script  src=\"function.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<em>style.css<\/em>&#8216; and put these codes.<\/p>\n<pre class=\"lang:css decode:true \" title=\"style.css\">\/** code by webdevtrick ( https:\/\/webdevtrick.com ) **\/\r\nbody {\r\n\tbackground-color: #31A9F5;\r\n}\r\n.pen {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-content: center;\r\n  height: 100vh;\r\n}\r\n.text {\r\n  color: whitesmoke;\r\n  font-family: 'Roboto', sans-serif;\r\n  padding: 1em 2em;\r\n  text-align: center;\r\n  font-size: 3.5em;\r\n}\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">function.js<\/span><\/p>\n<p>The final step, Create a JavaScript file named &#8216;<em>function.js<\/em>&#8216; and put the codes given below.<\/p>\n<pre class=\"lang:js decode:true \" title=\"function.js\">\/** code by webdevtrick ( https:\/\/webdevtrick.com ) **\/\r\nvar TxtRotate = function(el, toRotate, period) {\r\n  this.toRotate = toRotate;\r\n  this.el = el;\r\n  this.loopNum = 0;\r\n  this.period = parseInt(period, 10) || 2000;\r\n  this.txt = '';\r\n  this.tick();\r\n  this.isDeleting = false;\r\n};\r\n\r\nTxtRotate.prototype.tick = function() {\r\n  var i = this.loopNum % this.toRotate.length;\r\n  var fullTxt = this.toRotate[i];\r\n\r\n  if (this.isDeleting) {\r\n    this.txt = fullTxt.substring(0, this.txt.length - 1);\r\n  } else {\r\n    this.txt = fullTxt.substring(0, this.txt.length + 1);\r\n  }\r\n\r\n  this.el.innerHTML = '&lt;span class=\"wrap\"&gt;'+this.txt+'&lt;\/span&gt;';\r\n\r\n  var that = this;\r\n  var delta = 300 - Math.random() * 100;\r\n\r\n  if (this.isDeleting) { delta \/= 2; }\r\n\r\n  if (!this.isDeleting &amp;&amp; this.txt === fullTxt) {\r\n    delta = this.period;\r\n    this.isDeleting = true;\r\n  } else if (this.isDeleting &amp;&amp; this.txt === '') {\r\n    this.isDeleting = false;\r\n    this.loopNum++;\r\n    delta = 500;\r\n  }\r\n\r\n  setTimeout(function() {\r\n    that.tick();\r\n  }, delta);\r\n};\r\n\r\nwindow.onload = function() {\r\n  var elements = document.getElementsByClassName('txt-rotate');\r\n  for (var i=0; i&lt;elements.length; i++) {\r\n    var toRotate = elements[i].getAttribute('data-rotate');\r\n    var period = elements[i].getAttribute('data-period');\r\n    if (toRotate) {\r\n      new TxtRotate(elements[i], JSON.parse(toRotate), period);\r\n    }\r\n  }\r\n  \/\/ INJECT CSS\r\n  var css = document.createElement(\"style\");\r\n  css.type = \"text\/css\";\r\n  css.innerHTML = \".txt-rotate &gt; .wrap { border-right: 0.08em solid #666 }\";\r\n  document.body.appendChild(css);\r\n};<\/pre>\n<p>That&#8217;s It. Now you have successfully created auto type in JavaScript program. If you have any doubt or question comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to create an Animated Typing Effect In Pure JS? In short, create Auto Type In JavaScript.\u00a0 You must have seen auto type effect on some websites. They use this to show their quality\u00a0 &amp; uniqueness. A perfect and funny example of auto-typing is: In hacking movies, a hacker just click one button then many [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1109,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42,46,22,41],"tags":[167,74,61,60],"class_list":["post-1103","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-javascript","category-web-design","category-web-development","tag-auto-type","tag-css-animation","tag-javascript-tips-and-tricks","tag-javascript-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Auto Type In JavaScript | Animated Typing Effect In Pure JS<\/title>\n<meta name=\"description\" content=\"This program is about animated typing effect in pure JS. Get preview and source code of this auto type in javascript program.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Auto Type In JavaScript | Animated Typing Effect In Pure JS\" \/>\n<meta property=\"og:description\" content=\"This program is about animated typing effect in pure JS. Get preview and source code of this auto type in javascript program.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-24T17:41:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-type-in-javascript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"Auto Type In JavaScript | Animated Typing Effect In Pure JS\",\"datePublished\":\"2019-04-24T17:41:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/\"},\"wordCount\":429,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-type-in-javascript.jpg\",\"keywords\":[\"auto type\",\"css animation\",\"javascript tips and tricks\",\"javascript tutorial\"],\"articleSection\":[\"CSS\",\"HTML\",\"JavaScript\",\"Web Design\",\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/\",\"url\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/\",\"name\":\"Auto Type In JavaScript | Animated Typing Effect In Pure JS\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-type-in-javascript.jpg\",\"datePublished\":\"2019-04-24T17:41:00+00:00\",\"description\":\"This program is about animated typing effect in pure JS. Get preview and source code of this auto type in javascript program.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-type-in-javascript.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-type-in-javascript.jpg\",\"width\":1200,\"height\":629,\"caption\":\"auto type in javascript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Auto Type In JavaScript | Animated Typing Effect In Pure JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Auto Type In JavaScript | Animated Typing Effect In Pure JS","description":"This program is about animated typing effect in pure JS. Get preview and source code of this auto type in javascript program.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Auto Type In JavaScript | Animated Typing Effect In Pure JS","og_description":"This program is about animated typing effect in pure JS. Get preview and source code of this auto type in javascript program.","og_url":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2019-04-24T17:41:00+00:00","og_image":[{"width":1200,"height":629,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-type-in-javascript.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"Auto Type In JavaScript | Animated Typing Effect In Pure JS","datePublished":"2019-04-24T17:41:00+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/"},"wordCount":429,"commentCount":3,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-type-in-javascript.jpg","keywords":["auto type","css animation","javascript tips and tricks","javascript tutorial"],"articleSection":["CSS","HTML","JavaScript","Web Design","Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/auto-type-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/","url":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/","name":"Auto Type In JavaScript | Animated Typing Effect In Pure JS","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-type-in-javascript.jpg","datePublished":"2019-04-24T17:41:00+00:00","description":"This program is about animated typing effect in pure JS. Get preview and source code of this auto type in javascript program.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/auto-type-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-type-in-javascript.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/auto-type-in-javascript.jpg","width":1200,"height":629,"caption":"auto type in javascript"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/auto-type-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"Auto Type In JavaScript | Animated Typing Effect In Pure JS"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=1103"}],"version-history":[{"count":0,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1103\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/1109"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=1103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=1103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=1103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}