I want to create a simple typing animation that activates when the user reaches a specific div on the screen. Below is the HTML code:
<div class="text-8xl">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptas eveniet nulla sapiente libero sequi ipsam voluptatem ex porro nostrum laudantium modi, aliquam, est quia veritatis quod. Quas, voluptas neque.
</div>
<div class="flex justify-center items-center">
<h1>I am <span class="auto-type"></span></h1>
</div>
<div class="text-8xl">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptas eveniet nulla sapiente libero sequi ipsam voluptatem ex porro nostrum laudantium modi, aliquam, est quia veritatis quod. Quas, voluptas neque.
</div>
Additionally, here is the JavaScript code used:
<head>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="097d70796c6d27637a493b273927383b">[email protected]</a>"></script>
</head>
...
<body>
<script>
var typed = new Typed(".auto-type", {
strings: ["a person", "Sleeping", "coding"],
typeSpeed: 150,
backSpeed: 150,
loop: true,
})
</script>
</body>
If you have any questions or suggestions on how to trigger this animation upon scrolling to the specific div, please feel free to leave your comments below. Thank you!