I want to create a landing page where the text appears with a slight delay - first, the first line should be displayed followed by the second line. Both lines should have an easing effect as they appear. Below is a screenshot of the section:
https://i.sstatic.net/kDGDd.png
The word "Welcome" should show up first, followed by "To the Bullshit Collection". I attempted to follow the advice provided in this treehouse article. However, when implementing Lauren's method, the word "Welcome" doesn't display at all.
https://jsfiddle.net/fjvLwmrq/
Using Rob's approach, the code `}//]]>` immediately appears (without any delay) instead of "Welcome".
https://jsfiddle.net/a49rxo19/
Here is the HTML code:
<div class="parallax-window" data-parallax="scroll" data-image-src="/wp-content/themes/TheBullshitCollection/Images/white-background.jpg">
<div class="welcome-div">
<h3 class="welcome">Welcome</h3>
</div>
<div class="to-the-bullshit-collection-div">
<h3 class="to-the-bullshit-collection">To the Bullshit Collection</h3>
</div>
<section id="section5" class="demo">
<a href="#section5"><span></span>Scroll</a>
</section>
</div>
CSS styles:
.parallax-window {
height: 100vh;
}
.welcome {
text-align:center;
font-family: Beautiful ES;
font-size: 185px;
font-weight: lighter;
}
.to-the-bullshit-collection {
text-align:center;
font-family: Beautiful ES;
font-size: 185px;
font-weight: lighter;
}
#section5 {
text-align:center;
}
#section5 a {
padding-top: 70px;
font-family: PT Sans Narrow;
text-transform: Uppercase;
text-decoration: none;
font-weight: bold;
color: #000000;
}
JavaScript snippet:
// JavaScript functions
(function ($, root, undefined) {
$(function () {
'use strict';
// DOM ready, take it away
});
})(jQuery, this);
// Landing page text delay function
function showWelcomeDiv() {
document.getElementById("welcome-div").style.display = "inline";
}
// Call the above function after 1 second
setTimeout("showBuyNow()", 1000);
Any insights on what might be causing the issue? Thank you!