On-Scroll Text Repetition Animation

An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber.

The post On-Scroll Text Repetition Animation appeared first on Codrops.

Today I’d like to share a simple, but intriguing looking typography effect with you. This on-scroll animation is a recreation of the effect seen on the fabulous site of Dr. Dabber, where you see fragments of a large text moving as you scroll the page.

As we scroll we move out several layers of the same text at the top and bottom. By setting the same background color as the page, we can create gaps between these layers.

With some style adjustments we can create a variety of looks, text-shadow like ones or outlines, the possibilities are endless!

This is how it looks when you scroll:

I really hope you enjoy this little effect and find it useful!

The post On-Scroll Text Repetition Animation appeared first on Codrops.


Print Share Comment Cite Upload Translate
APA
Mary Lou | Sciencx (2024-03-28T23:02:31+00:00) » On-Scroll Text Repetition Animation. Retrieved from https://www.scien.cx/2022/04/13/on-scroll-text-repetition-animation/.
MLA
" » On-Scroll Text Repetition Animation." Mary Lou | Sciencx - Wednesday April 13, 2022, https://www.scien.cx/2022/04/13/on-scroll-text-repetition-animation/
HARVARD
Mary Lou | Sciencx Wednesday April 13, 2022 » On-Scroll Text Repetition Animation., viewed 2024-03-28T23:02:31+00:00,<https://www.scien.cx/2022/04/13/on-scroll-text-repetition-animation/>
VANCOUVER
Mary Lou | Sciencx - » On-Scroll Text Repetition Animation. [Internet]. [Accessed 2024-03-28T23:02:31+00:00]. Available from: https://www.scien.cx/2022/04/13/on-scroll-text-repetition-animation/
CHICAGO
" » On-Scroll Text Repetition Animation." Mary Lou | Sciencx - Accessed 2024-03-28T23:02:31+00:00. https://www.scien.cx/2022/04/13/on-scroll-text-repetition-animation/
IEEE
" » On-Scroll Text Repetition Animation." Mary Lou | Sciencx [Online]. Available: https://www.scien.cx/2022/04/13/on-scroll-text-repetition-animation/. [Accessed: 2024-03-28T23:02:31+00:00]
rf:citation
» On-Scroll Text Repetition Animation | Mary Lou | Sciencx | https://www.scien.cx/2022/04/13/on-scroll-text-repetition-animation/ | 2024-03-28T23:02:31+00:00
https://github.com/addpipe/simple-recorderjs-demo