Мобильная версия
Идея состоит в том, чтобы иметь «скользящую» панель выбора, а не границу, которая появляется только на выбранном или наведенном элементе на панели навигации. У меня это работает на странице разработки: например, если я прокручиваю указатель мыши до «кабаре», граница вокруг элемента «разработка» правильно «скользит» вправо от страницы, в конечном итоге обтекая «кабаре».
Выше вы можете увидеть мои снимки экрана. на полпути после того, как я навел указатель мыши на «кабаре».
Проблема, с которой я столкнулся, связана с другими страницами, которые по причине, которая сбивала меня с толку в течение нескольких часов, не работает как страница разработки. Вот пример:
Как видите, когда я Если вы решите перейти на эту страницу, ползунок не инициализируется правильно, вместо этого он загружается в виде вертикальной линии в середине панели навигации и не отображает никакого дальнейшего поведения, например, если я попытаюсь навести указатель мыши на другой элемент на панели навигации.< /p>
Но почему! Я использовал console.log в своем JS, чтобы гарантировать передачу правильной активной ссылки при выборе опции, и я вижу это при проверке консоли во время выполнения.
Вот то, что я считаю релевантным HTML, CSS и JS:
Код: Выделить всё
// Add event listeners for option clicks
const options = document.querySelectorAll('.option');
let selectedOption = null;
options.forEach((option) => {
option.addEventListener('click', () => {
// Deselect previous option
if (selectedOption) {
selectedOption.classList.remove('selected');
}
// Select the clicked option
option.classList.add('selected');
selectedOption = option;
// Get page ID from data attribute in HTML
const pageId = option.getAttribute('data-page');
const activeLinkId = option.getAttribute('data-active-link');
const activeLink = document.getElementById(activeLinkId);
navigateToPage(pageId, activeLink);
});
});
// PAGE NAVIGATION
function navigateToPage(pageId, activeLink) {
const portfolioPageContent = document.getElementById('portfolio-page').children; // children so not background, goal to swipe text elements up
const selectedPage = document.getElementById(pageId);
if (!selectedPage) {
console.error(`Page with ID "${pageId}" not found.`);
return;
}
// Update navbar links for active state
const links = document.querySelectorAll('.navbar a');
links.forEach(link => link.classList.remove('active')); // Remove 'active' from all links
if (activeLink) {
activeLink.classList.add('active'); // Add 'active' to the selected link
moveSlider(activeLink); // Move slider to active link
}
// Swipe the portfolio page content up, not the background
gsap.to(portfolioPageContent, {
y: '-200%',
opacity: 0,
duration: 0.8,
ease: 'power2.inOut',
onComplete: () => {
if (selectedPage) {
selectedPage.style.display = 'block';
gsap.to(selectedPage, { opacity: 1, duration: 0});
} else {
console.error(`Page with ID "${pageId}" not found.`);
}
// Fade in new page first, then hide old page
gsap.to(selectedPage, { opacity: 1, duration: 1 }, "fade-in")
.then(() => {
document.getElementById('portfolio-page').style.visibility = 'hidden';
});
console.log(activeLink);
if (activeLink) {
setTimeout(() => {
moveSlider(activeLink);
}, 100);
}
// Add hover-over effect to move the slider
links.forEach(link => {
link.addEventListener('mouseenter', () => moveSlider(link));
});
// Keep slider on the active link when not hovering
navbar.addEventListener('mouseleave', () => {
if (activeLink) moveSlider(activeLink);
});
},
});
}
const navbar = document.querySelector('.navbar');
const slider = document.querySelector('.slider');
const links = document.querySelectorAll('.navbar a');
console.log(links);
// Function to move the slider
function moveSlider(link) {
const rect = link.getBoundingClientRect(); // Get the link's position
const navbarRect = navbar.getBoundingClientRect(); // Get navbar's position
const sliderWidthAdjustment = 1.5; // Shrink the width slightly
const sliderLeftAdjustment = -1.5; // Offset to the left slightly
slider.style.width = `${rect.width - sliderWidthAdjustment}px`; // Adjust width
slider.style.left = `${rect.left - navbarRect.left + sliderLeftAdjustment}px`; // Adjust position
}Код: Выделить всё
#page-development,
#page-messagetomountains,
#page-cabaret {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #202020;
text-align: center;
z-index: 10;
opacity: 0;
transition: opacity 1s ease-in-out;
/* text-shadow: 0.001rem 0 0.1rem #c8fcfc; */
text-shadow: none;
font-family: "Lucida Console", "Courier New", monospace;
}
#page-development {
background: radial-gradient(circle, #f4d4b4 0%, #e9ceb3 100%);
}
#page-messagetomountains {
/* background: radial-gradient(circle, #F5C7C7 0%, #e0bdbd 100%); */
background: radial-gradient(circle, #94d0e8 0%, #82c1db 100%);
color: white ;
}
#page-cabaret {
background: radial-gradient(circle, #8E98F9 0%, #868ed6 100%);
}
.navbar {
position: relative;
display: flex;
justify-content: center;
/* align-items: center;
flex-wrap: wrap; */
background-color: #82c1db;
padding: 10px 20px;
}
.navbar a {
position: relative;
color: white;
text-decoration: none;
padding: 8px 20px;
margin: 0 150px;
border: 2px solid transparent;
border-radius: 20px;
z-index: 1; /* links above slider */
transition: color 0.3s, transform 0.3s;
}
.navbar a:hover {
color: #eeffff;
}
.navbar a.active {
color: #ffffff;
}
/* moving border */
.slider {
position: absolute;
height: calc(100% - 23px); /* try match link padding */
border: 2px solid #ffffff;
border-radius: 20px;
background: none;
transition: all 0.4s ease;
z-index: 0; /* sits behind the links */
}Код: Выделить всё
[url=#development]development[/url]
[url=#messagetomountains]messagetomountains[/url]
[url=#cabaret]the cabaret[/url]
dev page
this is the development page.
[url=#development]development[/url]
[url=#messagetomountains]messagetomountains[/url]
[url=#cabaret]the cabaret[/url]
messagetomountains page
this is the messagetomountains page.
[url=#development]development[/url]
[url=#messagetomountains]messagetomountains[/url]
[url=#cabaret]the cabaret[/url]
cabaret page
welcome to the cabaret.
Чтобы дать контекст, есть центральная страница портфолио, на которой размещены 3 варианта. При нажатии на опцию страница портфолио исчезает, проведя пальцем по тексту вверх на странице портфолио, а затем исчезает содержимое одной из опций (разработка страницы, страница-кабаре и т. д.). Только при отображении «разработки страницы» слайдер ведет себя правильно, а в двух других случаях — нет.
Что я пробовал?
Я пробовал переписать функцию moveSlider и добился успеха в изменении способа работы слайдера, но он по-прежнему будет работать только для страницы разработки. Независимо от того, какое поведение я пытаюсь выполнить. Я попытался переработать функцию навигацииToPage так, чтобы я пытался инициализировать только панель навигации внутри нее, и это тоже не сработало. Мой код во время этого процесса превратился в беспорядок, к сожалению, из-за того, что я пытался включить этот параметр activeLink, который раньше не был частью кода.
Это произошло Я впервые использовал GSAP, а также имел страницу, которая «появляется» и «затухает» другие страницы поверх нее, а не просто переходит к определенной странице параметров при нажатии на параметр, например. /разработка. Я думаю, что пытаясь сделать это таким образом, я слишком усложнил ситуацию и сделал переход между страницами довольно неудобным.
Я был бы очень признателен за любые рекомендации о том, как исправить ползунок таким образом, чтобы он ведет себя так, как задумано, и так же, как в настоящее время на странице разработки, на всех других страницах, где он присутствует. Еще раз повторим, что выбранная страница будет иметь рамку, и перетаскивание мыши на другой параметр «сдвинет» эту границу к этому параметру. Если ее не щелкнуть и утащить мышь, граница автоматически вернется в исходное положение, остановившись вокруг параметра выбранной в данный момент страницы.
Если ничего другого, мне действительно любопытно. что касается почему это работает только на странице разработки. Меня это так беспокоит! Я предполагаю, что это как-то связано с тем, что это первая страница, указанная в моем HTML… но почему? Большое спасибо за любую помощь
Подробнее здесь: https://stackoverflow.com/questions/793 ... en-options
