Question

因此，我正在尝试进行一个微型故事讲述项目，该项目可以通过单击页面上的“下一步”按钮来展开故事。我已经使用了CodePen的一些JS代码，并设法使其适用于第一段，但不确定如何使其适用于以下各段。

该代码的第一位目前可以正常工作。问题是通过单击“下一步”按钮显示具有相同打字机效果的第二段，隐藏第一段。我还想在末尾添加一个“重新启动”按钮，以便使其返回到简介页面。

这是我目前拥有的CodePen：https://codepen.io/annieelin/pen/eYOqbRG 以下是HTML的摘要，请在CodePen上查看其余的内容，包括CSS和JS。（编辑：按要求添加到JS中！）

<html>
<link href="https://fonts.googleapis.com/css? 
family=Bad+Script|Abril+Fatface|Indie+Flower&display=swap" 
rel="stylesheet"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

<div class="intro">

<h1 class="title">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters letters-left">The Flies</span>
<span class="letters ampersand">&amp;</span>
<span class="letters letters-right">The Honey</span>
<span class="line line2"></span>
</span>
</h1>

<div class="button">
<button class="start">Start</button>
</div>

</div>

<div class="part1">
<h2><div id="typedtext"></div></h2>
<button class="next">Next</button>
</div>

//header animation
anime.timeline({})
  .add({
  targets: '.title .line',
  opacity: [0.5,1],
  scaleX: [0, 1],
  easing: "easeInOutExpo",
  duration: 700
}).add({
  targets: '.title .line',
  duration: 600,
  easing: "easeOutExpo",
  translateY: (el, i) => (-0.625 + 0.625*2*i) + "em"
}).add({
  targets: '.title .ampersand',
  opacity: [0,1],
  scaleY: [0.5, 1],
  easing: "easeOutExpo",
  duration: 600,
  offset: '-=600'
}).add({
  targets: '.title .letters-left',
  opacity: [0,1],
  translateX: ["0.5em", 0],
  easing: "easeOutExpo",
  duration: 600,
  offset: '-=300'
}).add({
  targets: '.title .letters-right',
  opacity: [0,1],
  translateX: ["-0.5em", 0],
  easing: "easeOutExpo",
  duration: 600,
  offset: '-=600'
});

// set up text to print, each item in array is new line

var aText = new Array(
"A jar of honey was upset and the sticky sweetness flowed out on the 
table.","The sweet smell of the honey soon brought a large number of 
Flies buzzing around.", "They did not wait for an invitation. No, 
indeed; they settled right down, feet and all, to gorge themselves."
);

var iSpeed = 70; // time delay of print out
var iIndex = 0; // start printing array at this posision
var iArrLength = aText[0].length; // the length of the text array
var iScrollAt = 20; // start scrolling up at this many lines

var iTextPos = 0; // initialise text position
var sContents = ''; // initialise contents variable
var iRow; // initialise current row

function typewriter()
{
sContents =  ' ';
iRow = Math.max(0, iIndex-iScrollAt);
var destination = document.getElementById("typedtext");

 while ( iRow < iIndex ) {
  sContents += aText[iRow++] + '<br />';
 }
 destination.innerHTML = sContents + aText[iIndex].substring(0, 
iTextPos) + "_";
if ( iTextPos++ == iArrLength ) {
iTextPos = 0;
iIndex++;
if ( iIndex != aText.length ) {
iArrLength = aText[iIndex].length;
setTimeout("typewriter()", 500);
}
} else {
setTimeout("typewriter()", iSpeed);
}
}

typewriter();

//hide text on click, show story paragraph part 1 

$(".button").on("click", function() {
  $(this).hide();
  $(".intro").hide();
  $("h2").show();
  $(".next").delay(1000*10).fadeIn(500);
  return false;
});

以下是我用于该故事的正文：http://read.gov/aesop/127.html

最后一个问题，当第一页加载时，打字效果当前开始。我不确定如何仅当用户单击下一步时使其运行。任何帮助，将不胜感激。谢谢！！

单击按钮后如何使一个元素出现？

0 个答案: