Search code examples
javascriptjquerycsstransition

Javascript - Text to Appear With Delay (Ease-In)

I'm trying to make it so that the text on the landing page appears with a slight delay....first, the first line should appear, then the second. They should both ease-in as they appear. Here's a screenshot of the section:

enter image description here

So "Welcome" should appear first, then "To the Bullshit Collection". I tried following the suggestions in this treehouse article. When following the method suggested by Lauren, "Welcome" never appears.

https://jsfiddle.net/fjvLwmrq/

And when following the method suggested by Rob, }//]]> appears (with no delay) instead of "Welcome".

https://jsfiddle.net/a49rxo19/

Here is my HTML:

<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: 

.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;
}

And JavaScript:

//javascript functions
(function ($, root, undefined) {
$(function () { 
    'use strict';       
    // DOM ready, take it away      
    }); 
})(jQuery, this);

//landing page text delay
function showWelcomeDiv() { 
    document.getElementById("welcome-div").style.display = "inline"; 
}
//this calls the function above, 3000 milliseconds is 3 seconds, adjust 
here to make it a longer interval
setTimeout("showBuyNow()", 1000);

Any idea what's going wrong? Thanks!

Solution

  • Don't you feel this method to be simpler ?

    /*WindowOnload Fade-In*/

@keyframes chainReaction {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*div p {
  animation: chainReaction 2s;
  opacity: 0;
  animation-fill-mode: forwards;
}*/

.parallax-window .welcome-page-div {
  animation: chainReaction 3s;
  opacity: 0;
  animation-fill-mode: forwards;
  text-align: center;
  font-family: Beautiful ES;
  font-size: 30px;
  font-weight: lighter;
}

.parallax-window .welcome-page-div:nth-child(1) {
  animation-delay: .3s;
}

.parallax-window .welcome-page-div:nth-child(2) {
  animation-delay: 1s;
}


/*WindowOnload Fade-In*/
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-window" data-parallax="scroll" data-image-src="/wp-content/themes/TheBullshitCollection/Images/white-background.jpg">
  <div class="welcome-page-div">
    <h3>Welcome</h3>
  </div>

  <div class="welcome-page-div">
    <h3>To the Bullshit Collection</h3>
  </div>

  <section id="section5" class="demo">
    <a href="#section5"><span></span>Scroll</a>
  </section>
</div>