Cześć,
Jestem w trakcie robienia takiej swojej strony. Od razu zaznaczam, że ona jest jeszcze nie responsywna i jeśli szanujecie swój wzrok to nie wchodźcie jeszcze na nią na telefonie :D Layout po kolei robiłem od góry do dołu i wszystko było ok, aż do czasu gdy zauważyłem, że w pliku typing.js wkradł się błąd.
Ogólnie rzecz biorąc kod z tego pliku odpowiada za tę animacje 'pisania' na głównym banerze. I po napisaniu pokazuje, że wartość txtElement czyli zmiennej przechowującej wszystkie nagłówki, gdzie ma być ten tekst napisany jest undefined.
Poniżej daje ten kod, który mnie interesuje, jak ktoś woli to daje też link do pełnej strony: https://davidelo18.github.io/one-page-wbst/
Struktura HTML:
<div class="banner">
<hgroup>
<h1 class="text-type-first typing"></h1>
<br>
<h1 class="text-type-second"></h1>
</hgroup>
<div class="go-down-btn">\/</div>
</div>
Skrypt JS:
// functions to do after loading the DOM
document.addEventListener('DOMContentLoaded', function () {
typeWriter();
});
/* --- DECLARED FUNCTIONS AREA --- */
// typing animation the 'welcome' word
const txtElements = document.querySelectorAll('.banner hgroup h1');
const words = ['Welcome!', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'];
let currentPosition = 0;
let myIndex = 0;
const delayTime = [300, 90];
function typeWriter() {
let visibleWord = words[myIndex].substring(0, currentPosition);
txtElements[myIndex].textContent = visibleWord;
if (currentPosition < words[myIndex].length) {
currentPosition++;
setTimeout("typeWriter()", delayTime[myIndex]);
} else {
txtElements[myIndex].classList.remove('typing');
if(myIndex < words.length){
myIndex++;
txtElements[myIndex].classList.add('typing');
currentPosition = 0;
setTimeout("typeWriter()", 400);
}
}
}