Author: | Steven Lei |
---|---|
Views Total: | 731 views |
Official Page: | Go to website |
Last Update: | June 2, 2021 |
License: | MIT |
Preview:

Description:
A beautiful, smooth word rotator inspired by Apple TV. Written in plain JavaScript and CSS/CSS3.
How to use it:
1. Wrap the words in span elements as follows:
<h2> I lOVE ❤️ <div class="mask"> <span data-show>JavaScript.</span> <span>Ruby.</span> <span>Python.</span> <span>Java.</span> </div> </h2>
2. The necessary CSS/CSS3 styles.
h2 { width: 980px; font-size: 100px; font-family: 'Inter'; line-height: 1.06; letter-spacing: -0.02em; color: #1d1d1f; } .mask { height: 106px; position: relative; overflow: hidden; margin-top: 6px; } .mask span { display: block; box-sizing: border-box; position: absolute; top: 100px; padding-bottom: 6px; background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-repeat: no-repeat; } .mask span[data-show] { transform: translateY(-100%); transition: .5s transform ease-in-out; } .mask span[data-up] { transform: translateY(-200%); transition: .5s transform ease-in-out; } .mask span:nth-child(1) { background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1); } .mask span:nth-child(2) { background-image: linear-gradient(45deg, #18e198 50%, #0ec15d); } .mask span:nth-child(3) { background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c); } .mask span:nth-child(4) { background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f); }
3. Enable the word rotator with the following JS snippets.
setInterval(function () { const show = document.querySelector('span[data-show]') const next = show.nextElementSibling || document.querySelector('span:first-child') const up = document.querySelector('span[data-up]') if (up) { up.removeAttribute('data-up') } show.removeAttribute('data-show') show.setAttribute('data-up', '') next.setAttribute('data-show', '') }, 2000)
Doesn’t work in Firefox