Поэтому я пытаюсь работать над мини-проектом повествования, который позволяет разворачивать историю, по сути, нажав кнопку «Далее» на странице. Я использовал некоторый код JS из CodePen и сумел заставить его работать для первого абзаца, но не уверен, как заставить его работать для следующих абзацев.
Первый бит кода в настоящее время работает нормально. Проблема заключается в отображении второго абзаца с тем же эффектом пишущей машинки, скрывая первый абзац, все, нажав кнопку «Далее». Я также хотел бы добавить кнопку «Перезагрузка» в конце, которая позволила бы ей вернуться на начальную страницу.
Вот кодовая ручка, которая у меня сейчас есть: https://codepen.io/annieelin/pen/eYOqbRG Нижеэто фрагмент HTML, пожалуйста, посмотрите остальное, включая CSS и JS на CodePen. (edit: добавлено в 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">&</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
Последний вопрос, эффект от набора текста в настоящее время начинается, когдапервая страница загружается. Я не уверен, как заставить это работать только, когда пользователь нажимает следующий. Любая помощь будет оценена. Спасибо !!