Cinematisch tekstscroll-effect

Introductie

Dit intrigerende verteleffect werd aangevraagd door een klant, een groep onderzoeksjournalisten. Ze ontdekken niet alleen verhalen, maar blinken ook uit in het vertellen ervan. Ze beschikken over het unieke vermogen om hun bevindingen op papier te vertalen en verleggen nu de grenzen door dit naar digitale platforms te brengen.

Ik ben dankbaar dat ik deel mag uitmaken van deze reis en ik geniet van de mogelijkheid om met hen te brainstormen en experimenten op te bouwen binnen Webflow.

Het is perfect als je wat dronebeelden hebt die je in je website wilt integreren.

Aan de slag

Kloon het project hier: bioscooptekst

‍

Hoe het werkt

Een video van Lottie

Dit kan een gewone video zijn die je van internet kiest, zoals van Pexels. De video wordt geconverteerd naar een Lottie-bestand met behulp van de Video-naar-Lottie-omzetter. Een Lottie-bestand is in wezen dezelfde video, opgedeeld in afbeeldingen, waarbij elke afbeelding een keyframe krijgt, waardoor deze programmeerbaar is. We kunnen nu bijvoorbeeld de scroll-gebeurtenis koppelen aan de keyframes.

Wat tekst met een spatie ertussen

Dit is standaardtekst, in lijn met de website, om het scrollen te verankeren. Dit betekent dat de tekst nog steeds met een normale snelheid zal scrollen.

Opstelling

Het Lottie-bestand zal plakkerig zijn en een interactie hebben die het scrollpercentage van deze container koppelt aan het Lottie-afspeelpercentage.

‍