Join Join
Join

052Pinned text rail

Here we pin a block while a long line of type slides sideways, then reveal each character as if the rail were pulling a mask away. Shall we unpack it? Let’s go — and Visca Barça!

HTML Structure

The DOM stays clean and readable. A container stacks a small header block on top and a lines wrapper at the bottom. Each lyric line is a plain paragraph with the class line:

<section class="mwg_effect052">
    <div class="container">
        <div class="header">
            <img src="assets/medias/ferran.png" alt="">
            <p>
                <span>Cant del Barça</span>
                <span>Futbol Club Barcelona</span>
            </p>
        </div>

        <div class="lines">
            <p class="line">Tot el camp</p>
            <p class="line">És un clam</p>
            <p class="line">Som la gent blaugrana</p>
        </div>
    </div>
</section>

Notice that the text inside each .line is written as plain characters. Our script will replace them with nested span elements later, so we don't need to worry about marking up individual letters by hand.

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)