<button onclick="typeWriter()">Click me</button> <script> var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i)}; i++; setTimeout(typeWriter, speed); } </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>INDSELLER</title> </head> <style> *{ margin: 0; padding: 0; } header{ height: 54px; background-color: black; color:white; } .content{ background:url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80); background-repeat: no-repeat; background-size: cover; height: 88.2vh; font-family: cursive; font-weight: bold; } footer{ background-color: black; color: white; } button{ background-color ; font-family: cursive; font-weight: bold; font-size: large; border: 2px solid black; border-radius: 15px; } </style> <body> <header> <ul> <li>Home</li> <li>About</li> <li>Contacts</li> </ul> </header> <div class="content"> <!-- Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas amet, aliquid placeat illo doloremque itaque deserunt assumenda corrupti nostrum natus quaerat, fugiat alias sequi cupiditate dicta commodi quia perspiciatis maiores. Incidunt dicta aspernatur autem nemo. --> <button onclick="typeWriter()">Click me</button> <script> var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i)}; i++; setTimeout(typeWriter, speed); } </script> </div> <footer> Copyright © @INDSELLER </footer> </body> </html>
id="demo"
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)