{"id":9566,"date":"2024-01-20T18:05:00","date_gmt":"2024-01-20T18:05:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9566"},"modified":"2024-01-22T16:05:52","modified_gmt":"2024-01-22T11:05:52","slug":"change-text-automatically-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/","title":{"rendered":"Change Text Automatically in JavaScript"},"content":{"rendered":"

This JavaScript code snippet helps you to change text automatically on a web page. It cycles through phrases. JavaScript manages the text rotation, activating one text at a time. This feature is helpful for showcasing dynamic messages or announcements without manual intervention.<\/p>\n

You can use this code on your website to grab visitors’ attention by changing text content automatically. It’s ideal for showcasing key messages, promotions, or quotes in a visually engaging manner<\/a>.<\/p>\n

How to Create Change Text Automatically JavaScript<\/h2>\n

1. First, create an HTML structure with a container element and multiple <p><\/code> elements for your text. Add the class “is-visible” to the initial text you want to display.<\/p>\n

<div class=\"container\">\r\n  <p class=\"is-visible\">YOU<\/p>\r\n  <p>ARE<\/p>\r\n  <p>AWESOME!<\/p>\r\n<\/div>\r\n<\/pre>\n
2. Define the styles for your container and text using CSS. Make sure the container is centered and styled to your preference. You can customize fonts, colors, and animations to match your website’s design.<\/p>\n
body {\r\n  margin: 0;\r\n  padding: 0;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.container {\r\n  width: 100%;\r\n  height: 100vh;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #ee0979;\r\n  background: linear-gradient(to left, #ee0979, #ff6a00);\r\n}\r\n.container p {\r\n  font-size: 100px;\r\n  font-family: \"montserrat\";\r\n  letter-spacing: 8px;\r\n  text-indent: -8px;\r\n  text-transform: uppercase;\r\n  position: absolute;\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  transition: 0.4s all ease-out;\r\n  font-weight: bold;\r\n  color: white;\r\n}\r\n.container p.is-visible {\r\n  opacity: 1;\r\n  visibility: visible;\r\n}<\/pre>\n
3. Finally, let’s implement the JavaScript code. This code controls the automatic text changes. Copy and paste this code into your JavaScript file or script tag in your HTML document.<\/p>\n
let texts = Array.from(document.querySelectorAll('.container p'));\r\nlet i = 1; \/\/ starting from 1 because 0 already has is-visible, it would cause slight delay otherwise.\r\n\r\nsetInterval(() => {\r\n  texts.forEach(text => {\r\n    text.classList.remove('is-visible');\r\n  });\r\n  texts[i].classList.add('is-visible');\r\n  i += 1;\r\n  if (i >= texts.length) {\r\n    i = 0;\r\n  }\r\n}, 2000);\r\n\r\n\/\/<\/pre>\n
That’s all! hopefully, you have successfully created a feature to change text automatically on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code snippet helps you to change text automatically on a web page. It cycles through phrases. JavaScript manages…<\/p>\n","protected":false},"author":1,"featured_media":9585,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[209],"tags":[],"class_list":["post-9566","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation-effects"],"acf":[],"yoast_head":"\nChange Text Automatically in JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Change Text Automatically in JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Change Text Automatically in JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Change Text Automatically in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-20T18:05:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:05:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Change-Text-Automatically-in-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Change Text Automatically in JavaScript\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/\"},\"wordCount\":206,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Change-Text-Automatically-in-JavaScript.png\",\"articleSection\":[\"Animation & Effects\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/\",\"url\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/\",\"name\":\"Change Text Automatically in JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Change-Text-Automatically-in-JavaScript.png\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:52+00:00\",\"description\":\"Here is a free code snippet to create a Change Text Automatically in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Change-Text-Automatically-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Change-Text-Automatically-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Change Text Automatically in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animation & Effects\",\"item\":\"https:\/\/codehim.com\/category\/animation-effects\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Change Text Automatically in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Change Text Automatically in JavaScript — CodeHim","description":"Here is a free code snippet to create a Change Text Automatically in JavaScript. You can view demo and download the source code.","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:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Change Text Automatically in JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Change Text Automatically in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-20T18:05:00+00:00","article_modified_time":"2024-01-22T11:05:52+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Change-Text-Automatically-in-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Change Text Automatically in JavaScript","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:52+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/"},"wordCount":206,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Change-Text-Automatically-in-JavaScript.png","articleSection":["Animation & Effects"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/","url":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/","name":"Change Text Automatically in JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Change-Text-Automatically-in-JavaScript.png","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:52+00:00","description":"Here is a free code snippet to create a Change Text Automatically in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Change-Text-Automatically-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Change-Text-Automatically-in-JavaScript.png","width":1280,"height":960,"caption":"Change Text Automatically in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/animation-effects\/change-text-automatically-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Animation & Effects","item":"https:\/\/codehim.com\/category\/animation-effects\/"},{"@type":"ListItem","position":3,"name":"Change Text Automatically in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":2127,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9566"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9566\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9585"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}