So, I need to achieve a really nice fade reveal text effect. Imagine a H1 that's spread across two lines. The text would need to reveal up from the base of each line. However I'm unsure of how to do this with multi-lined text (that isn't split into separate heading tags).
Here's one I created already, however this fades everything from the bottom. Ideally I want each line to fade up from its own row.
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>
Similar to this reference -
Thanks guys.
I think you are looking for something like this: