Hi everyone,
How can I create a typewrite effect using Wix Editor and/or Wix Studio? I want to add it to my website’s main tittle.
I’m not a developer, so I only know the basics about coding. I tried adding a code I found on YouTube but couldn’t make it work as I wanted.
I’ve also seen that there’s an app on Wix, but it doesn’t seem to be reliable and work well. It is not verified by Wix, and it’s rating is not good.
Any help?
Thank you
There are many ways of how to create a type-writer-effect.
For example: Add a HTML-Component onto your page.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="typewriter.css">
<title>welcome scrolling</title>
<style>
/* GLOBAL STYLES */
body {
background: #333;
padding-top: 5em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
color: #fff;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
{
font-family: 'Cambria Regular';
src: url('fonts/cambria.ttc');
}
img {
float:left;
}
#templateContent {
width: 550px;
height: 150px;
background: #2e5794;
position: relative;
overflow: hidden;
color: white;
}
#templatelogo {
width: 90px;
height: 90px;
float: left;
}
</style>
</head>
<body>
<div id="templateContainer">
</div>
<div id="templateContent">
<img src="logo.png" alt="logo" width="90" height="90">
<h1>This is a header!</h1>
<div class="typewriter">
<h1>Welcome, this is a test.</h1>
</div>
</div>
</body>
</html>
Some type-writer-effects are more usable and flexible, some others not.
