I'm looking to create a unique fade reveal text effect for a multi-line H1. The goal is for each line of the text to fade up from its own row, rather than simply revealing from the bottom.
Here's an example I've already developed, but it currently fades everything from the bottom instead of each individual line fading up.
setTimeout(function(){
$('.ready').addClass('active');
}, 1500);.overflow-hidden {
overflow:hidden;
}
h1 {
padding:0;
max-width:500px;
margin:0;
font-family:sans-serif;
}
.ready {
opacity:0;
transform: translateY(50px);
}
.active {
opacity:1;
transform: translateY(0px);
}
.reveal-in {
-webkit-transition: all 600ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-ms-transition: all 600ms ease-in-out;
-o-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-hidden iv-wp">
<h1 class="ready reveal-in">
This is text over two lines, with a really nice fade effect.
</h1>
</div>You can see a similar effect in action on this website:
Any suggestions or ideas are greatly appreciated. Thank you!