Text Reveal
on Scroll
Showit code snippet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et cursus ante, vel feugiat nibh. Nunc consectetur efficitur quam non mollis. Aliquam erat volutpat. Sed tempus vel elit vel dapibus. Nulla leo ex, ornare eget est et, scelerisque mollis lorem. Maecenas convallis viverra metus, et congue justo maximus at. Phasellus diam urna, tempus eget arcu condimentum, hendrerit rhoncus metus. Proin sed mattis urna. Nullam id nisl porta augue hendrerit maximus in ac neque. Aliquam ac efficitur mauris, a aliquet tortor. Etiam fringilla dolor dui, non egestas odio pellentesque varius. Aliquam erat volutpat.
Nullam at tincidunt velit, et vehicula erat. Sed at tempor ligula. Praesent pellentesque commodo laoreet. Praesent posuere sem mattis egestas imperdiet. Integer sed erat tincidunt, volutpat nisl id, venenatis metus. Proin gravida sit amet augue a congue. Maecenas congue arcu interdum lacus ornare, sed pulvinar libero consectetur. Vivamus massa libero, viverra ut nunc vitae, vehicula fringilla urna. Maecenas et iaculis urna, vel luctus est. Vivamus varius dapibus nibh, at eleifend dolor. Curabitur accumsan nisi libero, eu gravida felis rhoncus id.
Welcome to our digital home.
The animation works on mobile automatically!
Congrats! Your Text Reveal should be setup. 🎉
----------
LICENSE / USAGE
You may use this code:
On unlimited personal or client projects
As part of websites you design
You may not:
Resell or redistribute the code as-is
Claim the code as your own creation
This text reveal section is fully customisable, no coding knowledge required!
To add your own images and customise the carousel, double click on the design itself so that the code box appears.
CHANGE THE FONT
Simply replace:
font-family: 'NAME OF THE FONT ON YOUR SHOWIT ACCOUNT';
with the name of your chosen font. If you're using a custom font in Showit, make sure the font is already uploaded to your Showit and use its exact font-family name.
CHANGE THE ALIGNMENT
Adjust:
text-align: center;
to:
text-align: left;
text-align: right;
or keep it centered.
CHANGE THE TEXT SIZE
for desktop:
font-size: 42px;
and for mobile:
@media (max-width: 768px) {
font-size: 14px;
}
Simply replace the numbers with your preferred sizes.
CHANGE THE COLOURS
Inactive (light) text:
color: rgba(45, 20, 28, 0.18);
Highlighted text:
.text-reveal span.active {
color: #2d141c;
}
Replace these values with any HEX or RGB colour you'd like.
ADJUST THE ANIMATION SPEED
The reveal speed can be customised by changing the transition duration:
transition: color 0.35s ease;
Use a smaller number for a snappier effect or a larger number for a slower, more elegant reveal.
Text Reveal
Instructions for your new
Instructions on Desktop :)