css – Problem z przewijaniem poziomym po kliknięciu przycisku
Chcę odtworzyć sekcję dla mojej witryny. Inspiracją, którą zaczerpnąłem, jest [clay.com][1] i chcę to powtórzyć Sekcja Jak to działa. Jak dotąd mój kod ma dwa główne problemy: funkcjonalność przycisków nie działa prawidłowo, a po drugie, po odświeżeniu strony, gdy przewijam całą sekcję, zostaje ona zakłócona. Kod jest niestandardowy i zostanie zaimplementowany w Elementorze. Moja strona jest taka:
Dokument
body {
margin: 0;
background: #15151e;
overflow-x: hidden;
}
.racesWrapper {
position: relative;
height: 100vh; / Adjust based on the number of slides /
overflow: hidden;
transition: background-color 1s ease; / Add this line for smooth color transition /
}
.swiper-container {
height: 100%;
}
.swiper-wrapper {
display: flex;
flex-direction: row;
}
.swiper-slide {
font-family: 'Staatliches', cursive;
/*font-size: 30vw;*/
/*color: #e10600;*/
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 80vh;
width: 100vw; / Full width for horizontal scroll /
/*background: #e1e1ff;*/
/*background: #e1e1ff36;*/
}
.button-container {
position: absolute;
top: 10px;
z-index: 1000;
display: flex;
justify-content: space-around;
width: 100%;
}
.button-container button {
display: block;
margin-bottom: 5px;
width: 24%;
height: 50px;
}
.progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 5px;
background: #333;
width: 100%;
z-index: 1000;
}
.progress-bar-inner {
height: 100%;
background: #e10600;
width: 0;
transition: width 0.2s ease, background-color 0.2s ease;
}
/*Content styling start*/
.swiper-slide .row {
/*border: 1px solid red;*/
width: 100%;
height: 100%;
margin: 0 auto;
}
.swiper-slide .col-md-6 {
/*border: 1px solid blue;*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-inline: 50px;
}
.swiper-slide .col-md-6 :is(p,h2){
text-align: left;
}
.swiper-slide .img-wrapper {
width: 75%;
}
.swiper-slide .img-col{
align-items: center !important;
justify-content: center !important;
}
.swiper-slide a.cta-btn {
background: #222;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
Niezrównana wydajność 14X szybsza prędkość
Devrims oferuje zarządzane serwery w chmurze klasy korporacyjnej dostosowane do konkretnych wymagań Twojej witryny i projektu. Platforma oferuje wydajne pamięci masowe, lekkie stosy technologii zoptymalizowane pod kątem aplikacji PHP.
Rozpocznij bezpłatny okres próbny
Elastyczność Niezawodność Kosztowanie Wydajność Elastyczność Niezawodność Kosztowanie
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); const swiper = new Swiper('.swiper-container', { kierunek: 'poziomy', pętla: fałsz, prędkość: 1000, liczba slajdów na widok: 1, odstęp między: 0, }); funkcja getSwiperWrapperWidth() { return document.querySelector(".swiper-wrapper").scrollWidth; } const horizontalScroll = gsap.to(".swiper-wrapper", { xPercent: -100 * (swiper.slides.length - 1), łatwość: "brak", scrollTrigger: { wyzwalacz: ".racesWrapper", pin: true, szorowanie: 1, znaczniki: true, początek: 'góra góra', koniec: () => `+=${getSwiperWrapperWidth()}`, invalidateOnRefresh: true, onUpdate: self => { const progress = self.progress; document.querySelector(".progress-bar-inner").style.width = `${progress * 100}%`; const colorIndex = Math.floor(progress * (colors.length - 1)); document.querySelector(".racesWrapper").style.backgroundColor = colors[colorIndex]; gsap.to(".racesWrapper", { backgroundColor: kolory[colorIndex]czas trwania: 0,05, // W razie potrzeby dostosuj czas trwania ease: "power1.inOut" // Funkcja wygładzania }); } } }); const colors = [
"#DADDEF", "#D6DAEE", "#D2D5EC", "#CDD3EB", "#CACFE9",
"#C6CAE7", "#C1C7E5", "#BDC3E3", "#B9C0E1", "#ADB5DC",
"#A9B1DA", "#A5AED8", "#A2ABD6", "#9DA6D4", "#98A3D2",
"#919CCF", "#9EA4D3", "#A7AAD5", "#B1AEC8", "#BCB2B6",
"#C8B7A3", "#D3BB91", "#DFC07D", "#EAC36A", "#F6C85A",
"#FFCC4A", "#F3C264", "#E9B780", "#DDAC9C", "#D2A1B9",
"#C697D2", "#BB8BEF", "#B384FE", "#B384FE", "#B384FE",
"#B384FE", "#B384FE", "#B384FE"
]; funkcja updateProgressBar() { const progress = (swiper.activeIndex / (swiper.slides.length - 1)) * 100; document.querySelector(".progress-bar-inner").style.width = `${progress}%`; const colorIndex = Math.floor((swiper.activeIndex / (swiper.slides.length - 1)) * (colors.length - 1)); document.querySelector(".racesWrapper").style.backgroundColor = kolory[colorIndex]; gsap.to(".racesWrapper", { backgroundColor: kolory[colorIndex]duration: 0.05, // W razie potrzeby dostosuj czas trwania ease: "power1.inOut" // Funkcja płynnego wygładzania }); } function goToSlide(index) { // Przesuń do żądanego indeksu swiper.slideTo(index); // Zdefiniuj szerokość opakowania przesuwacza const swiperWrapperWidth = 5616; // Określ pozycję przewijania na podstawie klikniętego przycisku let scrollPosition; switch (index) { case 0: // Stała pozycja przewijania dla pierwszego przycisku scrollPosition = 1400; break; case 1: // 26% szerokości opakowania przesuwacza // scrollPosition = swiperWrapperWidth * 0.26; scrollPosition = 3108; break; case 2: // 52% szerokości opakowania suwaka // scrollPosition = swiperWrapperWidth * 0.52; scrollPosition = 4812; break; case 3: // 76% szerokości opakowania suwaka // scrollPosition = swiperWrapperWidth * 0.76; scrollPosition = 6520; break; default: // Domyślna obliczona pozycja dla innych slajdów scrollPosition = (index / (swiper.slides.length - 1)) * swiperWrapperWidth; break; } // Rejestrowanie pozycji przewijania w celu debugowania console.log("Pozycja przewijania: ", scrollPosition); // Płynne przewijanie do obliczonej pozycji gsap.to(window, { scrollTo: { y: scrollPosition, autoKill: false }, duration: 0.5, ease: "linear" }); // Aktualizuj pasek postępu i kolor tła updateProgressBar(); // Odśwież ScrollTrigger, aby uwzględnić zmiany ScrollTrigger.refresh(); } swiper.on('slideChange', () => { updateProgressBar(); }); // Początkowa aktualizacja updateProgressBar();