I have managed to code something like this using simple css and html in the past. I have checked all the available animations in the editor however none suit my need. I thought about using js to reveal hidden words one by one but it still wouldn’t look like it was being typed. What I would love to know how to make this code work in Wix if possible at all.
/* The typing effect */
@keyframes
typing { from { width: 0 }
to { width: 100% }
}
Thanks
Any url where I can see this?
Would like to use one of these:
Or at least try to mimic it somehow. The only way I have managed to think of is to hide every letter and show them one after another.
Ah ok, but do you want to mimic it while displaying text or while someone types in text in a Input Field?
I would like to use this picture with a white box overlaying the text and have my own text appear to be written on it like a typewriter would, one letter at a time. I’ll crop the hands out so it looks better.
Hold on
Soon to be done
No problem. Thanks for the help, I can’t figure out how to do it without DOM or access raw html. ^^’
Hey there Jaimie!
Here comes the solution with an instructional video and all source you might need to make it work, even with your image in the background.
As you already know the DOM is not available for you when coding in Wix Code. But, there is a trick using the HTML Component together with Wix Code.
First of all create a page, add your image, add a HTML Component on top of that image. Take the code below HTML Code and insert that. Then in the page code part copy the Wix Code Page Code below and add that. Add a Textarea of just the text you want and some event that will make the text get sent to the HTML Component.
Look at the video for full instructions. Happy coding!
Video:
HTML Component Source:
<html>
<head>
<style>
/* GLOBAL STYLES */
body {
background:#eaf1f1;
padding-top: 5em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter p {
color: #000000;
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(30, 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 }
}
</style>
</head>
<body id="bodyDoc" onload="callWix();">
<div id="typer" class="typewriter">
<p id="typing">Done by Andreas Kviby of Wixshow.com</p>
</div>
<script>
window.onmessage = function(event){
if (event.data) {
console.log("This message from html component inside Wix Code.");
document.getElementById('typer').innerHTML = "<p>" + event.data + "</p>";
}
}
function callWix(){
window.parent.postMessage("READY", "*");
}
</script>
</body>
</html>
Wix Code Page Source:
// For fastest learning in Wix Code, use Wixshow.com or ask Andreas hello@wixshow.com
$w.onReady(function () {
$w("#html1").onMessage( (event) => {
let receivedData = event.data;
if (receivedData === "READY") {
console.log("HTML Component is ready to use!");
}
});
});
export function button1_click(event, $w) {
// post text to html component
$w("#html1").postMessage($w("#textBox1").value);
}
I hope you like the answer.
1 Like
Like? This is insane, I love it. Not only do I have the answer but I also understand how to work around this problem in future. I’ll be signing up to your WIX courses for sure. Once the finished product is live I’ll post a link below for you.
Thank you very much Andreas,
Time to go code!
Hello guys,
Andreas, thank you for your explanation. I have a question, how can I print more than one sentence? In my case, I need to print two messages in an infinite loop. I’ve tried to understand the code, but I don’t know HTML.
Thank you one more time!
Amazing!
Hey Guilherme,
I have been experimenting with the same idea. I have tried line breaks, changing the whitespace, doubling up the code, but the actual flashing bar is the right border, so it then always ends up covering both lines. I am currently trying to implement one of the other typewriter examples I posted a link to earlier, with what I have learned from Andreas. I’ll let you know if I figure it out =)
Have a quick question: If you just wanted the typing to show up when someone entered the website, how would you do that?
Hi Andreas,
great aproach, but how about mobility?.. Can somehow auto iframe adjustment and inside font adjustment be added there?
Thanks in advance.
Hi Folks,
I am trying for hours to implement the following HTML code to my wix site. Unfortunatelly no luck at all… textcoour should be white, no background colour (trasparent)
Is there anybody out there wo could help me :-))
Thanks in advance!
You don’t need to walk over the river for water…
Add a text to your page called #loadingText and then the below code
setInterval(function() {
$w("#loadingText").text = $w("#loadingText").text + ".";
}, 1000);
That code will add the dots to the text element every second that is represented by the 1000 which is milliseconds.
I hope you like this solution, it is easier for you manage and you can set colors in the Wix Editor anyway you like.
@andreas-kviby Hi Andreas, thank you very much for that prompt reply! Actually I wanted to copy/paste that following link: https://css-tricks.com/snippets/css/typewriter-effect/
I am trying to implement the second Typewriter Effect on that page (Red Background / typing and deleting the text)… Planed “without” background so we can put it “in front” of a picture…
Guess I am still too unversed to “copy” that code into the HTML window at our page .-( … does not work at all unfortunatelly…
Heeeelp! 
I am looking to do the same thing. I managed to use html and css code but to improve the effect I need to use js also and I don’t know how to combine both in wix. Is it possible to do something like this?