I have come across this question multiple times:
How to Fade In images on page load using JavaScript one after the other?
Fade in divs sequentially
Using jQuery .fadeIn() on page load?
Despite trying various recommended methods, I'm still unable to achieve the desired outcome. My goal is to display three lines of text (each wrapped in a div) sequentially when the page loads. Here is my current code:
HTML:
<div class="row"><!--second row-->
<div class="col-lg-12 center">
<div id="tagline-wrapper">
<div class="center-text hidden1">Responsive</div>
<div class="between-lines">
<div class="line"></div>
<div class="clean hidden2">Clean</div>
<div class="line"></div>
</div>
<div class="center-text hidden3">Powerful</div>
</div>
</div>
</div><!--end row-->
CSS:
.center {
text-align: center;
display: flex;
color: #ffffff;
font-family: 'proxima_nova_ltsemibold';
text-transform: uppercase;
font-size: 52px;
}
#tagline-wrapper {
margin-top: 150px;
margin-left: auto;
margin-right: auto;
}
.center-text {
text-align: center;
font-family: 'proxima_nova_ltsemibold';
font-size: 52px;
text-transform: uppercase;
color: #ffffff;
}
.between-lines {
display: flex;
align-items: center;
}
.line {
border-bottom: 2px solid #ffffff;
display: block;
flex-grow: 1;
height: 0;
}
.clean {
padding: 0 1.5rem;
text-align: center;
font-family: 'proxima_nova_ltsemibold';
font-size: 52px;
text-transform: uppercase;
color: #ffffff;
}
/*initially hide elements*/
.hidden1 {
display: none;
}
.hidden2 {
display: none;
}
.hidden3 {
display: none;
}
JavaScript
$(document).ready(function(){
var elements = [ '.hidden1', '.hidden2',' .hidden3' ];
for (var i = 0; i < elements.length; i++) {
setTimeout(function() {
$(elements[i]).css('opacity', '1');
}, 1250 * i);
}
});
The above JavaScript approach was suggested in the initial linked article.
JSFiddle attempts with different techniques can be found here:
1. Attempt 1
2. Attempt 2
3. Attempt 3
Thank you.