CSS-Solely Marquee Impact | Codrops


A while in the past I encountered this nice Dribbble shot by Francesco Zagami. It has a very nice marquee animation when hovering a menu merchandise (you must wait a few seconds to see the menu).

I actually love this impact and I’ve seen it in additional designs just lately. So I wished to attempt to implement it utilizing CSS solely, with none JavaScript, and share it with you. After some looking, I discovered an fascinating resolution on StackOverflow by Fabrizio Calderan and one by Alvin Kobie on Codepen.

Within the meantime, Fabrizio confirmed another really brilliant solution that doesn’t require the repeated spans, however that makes use of textual content shadows. Take a look at it right here: https://codepen.io/fcalderan/pen/GRJeYOL

For this demo, I wanted to regulate the kinds a bit to create the precise impact seen in Francesco’s Dribbble shot, like offsetting the marquee textual content and fading it in on hover. The marquee requires textual content repetition in order that the phantasm works. The principle concept is to animate the marquee infinitely, restarting it seamlessly.

For that we will use the next markup:

<div class="marquee">
	<div class="marquee__inner" aria-hidden="true">
		<span>Showreel</span>
		<span>Showreel</span>
		<span>Showreel</span>
		<span>Showreel</span>
	</div>
</div>

… and these kinds:

.marquee {
    place: relative;
    overflow: hidden;
    --offset: 20vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
}

.marquee__inner {
    width: fit-content;
    show: flex;
    place: relative;
    rework: translate3d(var(--move-initial), 0, 0);
    animation: marquee 5s linear infinite;
    animation-play-state: paused;
}

.marquee span {
    font-size: 10vw;
    padding: Zero 2vw;
}

.marquee:hover .marquee__inner {
    animation-play-state: operating;
}

@keyframes marquee {
    0% {
        rework: translate3d(var(--move-initial), 0, 0);
    }

    100% {
        rework: translate3d(var(--move-final), 0, 0);
    }
}

For the marquee to have an offset (i.e. we wish to present the primary merchandise, lower off firstly), it mainly must be pulled again. So let’s use 4 repeated gadgets, like this:

The quantity that we would like the gadgets to be pulled again is outlined within the variable --move-initial. So -25% makes it transfer again the precise size of 1 merchandise (as now we have 4 in whole).

And the --offset lets us alter this a bit, in order that we see a number of the textual content. --move-final is the top place of the animation, the place we will seamlessly begin a brand new loop. It’s half of the best way (two gadgets now), once more with one merchandise on the left being lower off the identical quantity like within the preliminary place. By setting an satisfactory font measurement (in vw), we will ensure that three repetitions are seen within the viewport. That is necessary for the “phantasm” to work (i.e. begin the subsequent loop).

For the demo, I’ve added some extra transitions and pictures with a mix mode. Take a look on the code when you’d wish to see how that every one works collectively.

I actually hope you want this demo and discover it helpful!

Credit





Source link

Leave a Reply

Your email address will not be published. Required fields are marked *