Hello guys in this tutorial we will create auto change text every 3 seconds system using HTML CSS and JavaScript
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Change text every 3 seconds</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta https-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="row-outer"> <div class="container"> <div class="animated-heading"> <h1>Hi i'm a <span id="words">Ui / UX Design</span></h1> </div> </div> </div> <script type="text/javascript"> (function () { var words = ["Ui / UX Design","Photographer","Developer","Youtube","Happy Person" ], i = 0; setInterval(function(){ $('#words').fadeOut(function(){ $(this).html(words[(i = (i + 1) % words.length)]).fadeIn(); }); }, 3000) })(); </script> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* { padding: 0; margin: 0; font-family: 'IBM Plex Sans', sans-serif; } .container { width: 95%; max-width: 1160px; margin: auto; } .animated-heading { display: flex; align-items: center; justify-content: center; height: 100vh; } h1 { color: #4b00ff; font-weight: 500; } span#words { font-weight: bolder; }
Thank you – this solved my problem.