Javascript - 出现延迟的文本（轻松）

Question

我正在努力使登陆页面上的文字略有延迟....首先，应出现第一行，然后是第二行。它们应该随着它们的出现而缓和。以下是该部分的屏幕截图：

所以首先应该出现“欢迎”，然后是“去废话收集”。我尝试按照treehouse article中的建议进行操作。按照劳伦建议的方法，“欢迎”永远不会出现。

https://jsfiddle.net/fjvLwmrq/

当遵循Rob建议的方法时，}//]]>出现（没有延迟）而不是“欢迎”。

https://jsfiddle.net/a49rxo19/

这是我的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;
}

和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);

知道出了什么问题吗？谢谢！

Answer 1

你不觉得这种方法更简单吗？

＆＃13;

＆＃13;

/*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*/

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用此jQuery add-on function。 Demo here。

只需在jQuery之后导入：

<script src="https://cdn.jsdelivr.net/gh/jrquick17/jquery-delay-text/delay-text.js"></script>

然后使用jQuery选择器定位包含文本的元素：

$('h3').delayText({ sequential: true });