Join Join
Join

079Weight-Shift Marquee

In this effect, a variable font sentence scrolls across the screen while its letter weight animates in sync. The weight appears to travel along with the text as it moves. Let's begin!

HTML Structure

The structure is compact: a fixed scroll hint, a tall wrapper whose height we set in JavaScript, and one paragraph that holds the full sentence. A footer block can sit underneath for credits:

<section class="mwg_effect079">
    <p class="scroll">Scroll</p>
    <div class="pin-height">
        <div class="container">
            <p class="text">In the right place, at the right time, and still you sink into the floor, it's never enough.</p>
            <div class="footer">
                <p>
                    <span>Turnstile</span>
                    <span>Never Enough</span>
                </p>
                <img class="papota" src="./assets/medias/neverenough.png" alt="">
            </div>
        </div>
    </div>
</section>

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now Try it now

(No registration or credit card needed)