Typewriters had been invented - animation

Developer
Kunuk Nykjær
Size
4,130 Kb
Views
62,744
  1. Typewriters had been invented - animation Previews
  2. Typewriters had been invented - animation HTML Codes
  3. Typewriters had been invented - animation CSS Codes
  4. Typewriters had been invented - animation JS Codes

How do I make an typewriters had been invented - animation?

Typewriter effect for all the words at once. What is a typewriters had been invented - animation? How do you make a typewriters had been invented - animation? This script and codes were developed by Kunuk Nykjær on 23 September 2022, Friday.

Typewriters had been invented - animation Previews
IQ Test

Typewriters had been invented - animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Typewriters had been invented - animation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="component"> <p class="typewriter js-typewriter"> Typewriters had been invented as early as 1714 by Henry Mill and reinvented in various forms throughout the 1800s. It was to be Sholes, however, who invented the first one to be commercially successful. </p> <button class="btn-replay" onclick="app.replay(event)">replay </button>
</div> <script src="js/index.js"></script>
</body>
</html>

Typewriters had been invented - animation - Script Codes CSS Codes

html { font-size: 20px;
}
@media (min-width: 600px) { html { font-size: 30px; }
}
body { margin: 0; font-family: Courier, Helvetica, sans-serif; background: #fafafa;
}
.component { padding: .5rem; text-align: center; margin: 0 auto; max-width: 1000px;
}
.component .typewriter { margin: .5rem; padding: 1rem .5rem; text-align: left; font-weight: 300;
}
.component .typewriter > span { display: inline-block;
}
.component .typewriter.animate > span > i { -webkit-animation: typewriter 300ms forwards, background 1000ms forwards; animation: typewriter 300ms forwards, background 1000ms forwards;
}
.component .typewriter > span > i { opacity: 0; color: #111; font-style: normal; font-size: 1em; min-width: .4em; border-radius: 2px;
}
.component .typewriter > span > i:nth-of-type(1) { -webkit-animation-delay: 100ms; animation-delay: 100ms;
}
.component .typewriter > span > i:nth-of-type(2) { -webkit-animation-delay: 200ms; animation-delay: 200ms;
}
.component .typewriter > span > i:nth-of-type(3) { -webkit-animation-delay: 300ms; animation-delay: 300ms;
}
.component .typewriter > span > i:nth-of-type(4) { -webkit-animation-delay: 400ms; animation-delay: 400ms;
}
.component .typewriter > span > i:nth-of-type(5) { -webkit-animation-delay: 500ms; animation-delay: 500ms;
}
.component .typewriter > span > i:nth-of-type(6) { -webkit-animation-delay: 600ms; animation-delay: 600ms;
}
.component .typewriter > span > i:nth-of-type(7) { -webkit-animation-delay: 700ms; animation-delay: 700ms;
}
.component .typewriter > span > i:nth-of-type(8) { -webkit-animation-delay: 800ms; animation-delay: 800ms;
}
.component .typewriter > span > i:nth-of-type(9) { -webkit-animation-delay: 900ms; animation-delay: 900ms;
}
.component .typewriter > span > i:nth-of-type(10) { -webkit-animation-delay: 1000ms; animation-delay: 1000ms;
}
.component .typewriter > span > i:nth-of-type(11) { -webkit-animation-delay: 1100ms; animation-delay: 1100ms;
}
.component .typewriter > span > i:nth-of-type(12) { -webkit-animation-delay: 1200ms; animation-delay: 1200ms;
}
.component .typewriter > span > i:nth-of-type(13) { -webkit-animation-delay: 1300ms; animation-delay: 1300ms;
}
.component .typewriter > span > i:nth-of-type(14) { -webkit-animation-delay: 1400ms; animation-delay: 1400ms;
}
.component .typewriter > span > i:nth-of-type(15) { -webkit-animation-delay: 1500ms; animation-delay: 1500ms;
}
.component .typewriter > span > i:nth-of-type(16) { -webkit-animation-delay: 1600ms; animation-delay: 1600ms;
}
.component .typewriter > span > i:nth-of-type(17) { -webkit-animation-delay: 1700ms; animation-delay: 1700ms;
}
.component .typewriter > span > i:nth-of-type(18) { -webkit-animation-delay: 1800ms; animation-delay: 1800ms;
}
.component .typewriter > span > i:nth-of-type(19) { -webkit-animation-delay: 1900ms; animation-delay: 1900ms;
}
.component .typewriter > span > i:nth-of-type(20) { -webkit-animation-delay: 2000ms; animation-delay: 2000ms;
}
.component .typewriter > span > i:nth-of-type(21) { -webkit-animation-delay: 2100ms; animation-delay: 2100ms;
}
.component .typewriter > span > i:nth-of-type(22) { -webkit-animation-delay: 2200ms; animation-delay: 2200ms;
}
.component .typewriter > span > i:nth-of-type(23) { -webkit-animation-delay: 2300ms; animation-delay: 2300ms;
}
.component .typewriter > span > i:nth-of-type(24) { -webkit-animation-delay: 2400ms; animation-delay: 2400ms;
}
.component .typewriter > span > i:nth-of-type(25) { -webkit-animation-delay: 2500ms; animation-delay: 2500ms;
}
.component .typewriter > span > i:nth-of-type(26) { -webkit-animation-delay: 2600ms; animation-delay: 2600ms;
}
.component .typewriter > span > i:nth-of-type(27) { -webkit-animation-delay: 2700ms; animation-delay: 2700ms;
}
.component .typewriter > span > i:nth-of-type(28) { -webkit-animation-delay: 2800ms; animation-delay: 2800ms;
}
.component .typewriter > span > i:nth-of-type(29) { -webkit-animation-delay: 2900ms; animation-delay: 2900ms;
}
.component .typewriter > span > i:nth-of-type(30) { -webkit-animation-delay: 3000ms; animation-delay: 3000ms;
}
.component .btn-replay { padding: .5rem; background: white; border: 0; box-shadow: 1px 1px 2px #777; text-transform: uppercase; cursor: pointer;
}
@-webkit-keyframes typewriter { 50% { -webkit-transform: scale(1.4); transform: scale(1.4); } 100% { opacity: 1; }
}
@keyframes typewriter { 50% { -webkit-transform: scale(1.4); transform: scale(1.4); } 100% { opacity: 1; }
}
@-webkit-keyframes background { 0% { background: rgba(17, 17, 17, 0.1); }
}
@keyframes background { 0% { background: rgba(17, 17, 17, 0.1); }
}

Typewriters had been invented - animation - Script Codes JS Codes

'use strict';
window.app = function (_) { var log = console.log.bind(console), messageElement = document.querySelector('.js-typewriter'), text = messageElement.innerText.trim(); var words = text.split(' '); var work = []; words.forEach(function (word) { var splitWord = word.split('').map(function (char, index) { return '<i>' + char + '</i>'; }).join(''); work.push(splitWord); }); var formattedWords = work.map(function (word, index) { return '<span>' + word + '</span>'; }).join(' '); messageElement.innerHTML = formattedWords; messageElement.classList.add('animate'); return { replay: function replay(event) { messageElement.classList.remove('animate'); messageElement.offsetHeight; // force reflow setTimeout(function (_) { messageElement.classList.add('animate'); }); } };
}();
Typewriters had been invented - animation - Script Codes
Typewriters had been invented - animation - Script Codes
Home Page Home
Developer Kunuk Nykjær
Username kunukn
Uploaded September 23, 2022
Rating 4
Size 4,130 Kb
Views 62,744
Do you need developer help for Typewriters had been invented - animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kunuk Nykjær (kunukn) Script Codes
Name
Some math dances
Rotating Gyroscope Cube
Signature_Pad throttle version
The building blocks
CubeOne
Responsive SVG hexagon list with circle image
Clippy.js demo
Hello world split text animation
Angular material design getting started
Day 090 - Equalizer - version 1
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!