Новичок здесь строит мой второй сайт, пытаясь разобраться с основами.
У меня есть два HTML-документа, и я пытаюсь использовать JS для навигации между ними, это, безусловно, самая продвинутая вещь, которую я сделал на сегодняшний день, поэтому я не знаю, что я могу даже попробовать!
Я проверил основы:
- , убедившись, что я вызвал правильные переменные
- проверил, что класс .page указан на странице / разделе, который я пытаюсьдля отображения.
Я следил за видео на YouTube - но мой дизайн, содержание и страницы отличаются, поэтому видео не помогло в этом случае.
Моя цель - щелкнуть по второй точке (svg в .toggle
), чтобы отобразилась страница галереи (первая страница исчезает нормально: D).Я скопировал код, который я считаю актуальным (я, вероятно, ошибаюсь?), Поэтому дайте мне знать, если нужно больше.
index.html: имеет главную страницу с классом страницы, который прекрасно исчезает
gallery.html:
<section class="page">
<div class="gallery">
<div class="image" id="beeFace"></div>
<div class="image" id="honeyComb"></div>
<div class="image" id="pollen"></div>
<div class="image" id="closeUp"></div>
<div class="image" id="nectar"></div>
<div class="image" id="hover"></div>
</div>
</section>
javascript:
function wrapperFunction() {
const slides = document.querySelectorAll(".slide");
const pages = document.querySelectorAll(".page");
let current = 0; //page tracker
function nextSlide(pageNumber) {
const nextPage = pages[pageNumber];
const currentPage = pages[current];
const currentLeft = currentPage.querySelector(".beeImage #beeLeft");
const currentRight = currentPage.querySelector(".beeImage #beeRight");
const tl = new TimelineMax();
tl.fromTo(currentLeft, 0.3, {y:"-10%"}, {y:"-100%"})
.fromTo(currentRight, 0.3, {y:"10%"}, {y:"-100%"},"-=0.2")
.fromTo(currentPage, 0.3, {opacity:1, pointerEvents:"all"}, {opacity:0, pointerEvents:"none"})
.fromTo(nextPage, 0.3, {opacity:0, pointerEvents:"none"}, {opacity:1, pointerEvents:"all"})
current = pageNumber;
}
}