아임웹 코드 삽입

[아임웹 코드] 연도 클릭에 따라 반응하는 히스토리 갤러리 섹션

시연 동영상 보기

<div class="aboutsection3title">HISTORY</div>

</div>

</div>

<span style=" font-size: 1.4rem; font-family: Sandoll GretaSans;

font-weight: 400;">24.06.</span><br>

아임웹 코드<br>

히스토리 갤러리<br>

구현해보기

</div>

</div>

<span style=" font-size: 1.4rem; font-family: Sandoll GretaSans;

font-weight: 400;">24.02.</span><br>

아임웹 코드<br>

히스토리 갤러리<br>

구현해보기

</div>

</div>

<span style=" font-size: 1.4rem; font-family: Sandoll GretaSans;

font-weight: 400;">24.01.</span><br>

아임웹 코드<br>

히스토리 갤러리<br>

구현해보기

</div>

</div>

<span style=" font-size: 1.4rem; font-family: Sandoll GretaSans;

font-weight: 400;">23.11.</span><br>

아임웹 코드<br>

히스토리 갤러리<br>

구현해보기

</div>

</div>

<span style=" font-size: 1.4rem; font-family: Sandoll GretaSans;

font-weight: 400;">23.10.</span><br>

아임웹 코드<br>

히스토리 갤러리<br>

구현해보기

</div>

</div>

<span style=" font-size: 1.4rem; font-family: Sandoll GretaSans;

font-weight: 400;">23.08.</span><br>

아임웹 코드<br>

히스토리 갤러리<br>

구현해보기

</div>

</div>

<span style=" font-size: 1.4rem; font-family: Sandoll GretaSans;

font-weight: 400;">23.08.</span><br>

아임웹 코드<br>

히스토리 갤러리<br>

구현해보기

</div>

</div>

<span style=" font-size: 1.4rem; font-family: Sandoll GretaSans;

font-weight: 400;">23.08.</span><br>

아임웹 코드<br>

히스토리 갤러리<br>

구현해보기

</div>

<style>

.history2023, .history2024 {

position: relative;

border-right: 1px solid #CFCFCF;

width: auto;

padding-left: 2rem;

padding-right: 2rem;

}

.historydescription {

font-size: 1.3rem;

font-weight: 300;

text-align: left;

margin-top: 2rem;

user-select: none;

}

.historycardcontainer {

display: flex;

gap: 2rem;

user-select: none;

}

.historyindex {

font-size: 3rem;

font-family: Sandoll GretaSans;

font-weight: 400;

position: relative;

left: 0;

top: 0;

margin-bottom: 2rem;

user-select: none;

}

.historyimage {

width: 100%;

height: 100%;

object-fit: cover;

pointer-events: none;

-webkit-user-drag: none;

-moz-user-drag: none;

-ms-user-drag: none;

}

.historyimagecontainer {

width: 100%;

height: 30.7rem;

user-select: none;

}

.historycard {

width: 23rem;

height: 100%;

top: 15rem;

user-select: none;

}

.aboutsection3history {

width: 100%;

height: 50rem;

margin-top: 5rem;

display: flex;

overflow: hidden;

overflow-x: hidden;

cursor: grab;

}

.aboutsection3history:active {

cursor: grabbing;

}

#choosenyear {

color: red;

cursor: pointer;

}

#basicyear {

color: #9E9E9E;

cursor: pointer;

}

#basicyear:hover {

color: red;

}

.aboutsectionyearscontainer {

display: flex;

gap: 2rem;

font-size: 1.5rem;

font-family: Sandoll GretaSans;

font-weight: 400;

}

.aboutsectiontitlebox {

display: flex;

justify-content: space-between;

}

.aboutsection3title {

font-size: 2.4rem;

font-family: Sandoll GretaSans;

font-weight: 400;

}

.aboutsection3 {

margin-top: 10rem;

margin-bottom: 10rem;

overflow: hidden;

padding-left: 160px;

padding-right: 160px;

}

</style>

window.onload = function() {

attachYearClickHandlers();

makeHistorySectionDraggable();

};

function attachYearClickHandlers() {

var yearElements = document.querySelectorAll('.aboutsectionyear');

yearElements.forEach(function(yearElement) {

yearElement.addEventListener('click', function() {

var chosenYear = yearElement.getAttribute('data-year');

scrollToYear(chosenYear);

updateYearStyles(yearElement);

});

}

function scrollToYear(year) {

var historySection = document.querySelector('.aboutsection3history');

var targetElement = document.querySelector('.history' + year);

var scrollLeft = targetElement.offsetLeft - historySection.offsetLeft;

historySection.scrollTo({ left: scrollLeft, behavior: 'smooth' });

}

function updateYearStyles(selectedElement) {

var yearElements = document.querySelectorAll('.aboutsectionyear');

yearElements.forEach(function(yearElement) {

if (yearElement === selectedElement) {

yearElement.setAttribute('id', 'choosenyear');

} else {

yearElement.setAttribute('id', 'basicyear');

}

});

}

function makeHistorySectionDraggable() {

const slider = document.querySelector('.aboutsection3history');

let isDown = false;

let startX;

let scrollLeft;

slider.addEventListener('mousedown', (e) => {

isDown = true;

slider.classList.add('active');

startX = e.pageX - slider.offsetLeft;

scrollLeft = slider.scrollLeft;

slider.style.scrollBehavior = 'auto'; // Disable smooth scroll during drag

});

slider.addEventListener('mouseleave', () => {

isDown = false;

slider.classList.remove('active');

slider.style.scrollBehavior = 'smooth'; // Re-enable smooth scroll

});

slider.addEventListener('mouseup', () => {

isDown = false;

slider.classList.remove('active');

slider.style.scrollBehavior = 'smooth'; // Re-enable smooth scroll

updateActiveYearOnScroll();

});

slider.addEventListener('mousemove', (e) => {

if (!isDown) return;

e.preventDefault();

const x = e.pageX - slider.offsetLeft;

const walk = (x - startX) * 2; //scroll-fast

slider.scrollLeft = scrollLeft - walk;

updateActiveYearOnScroll();

});

slider.addEventListener('scroll', () => {

updateActiveYearOnScroll();

});

}

function updateActiveYearOnScroll() {

const slider = document.querySelector('.aboutsection3history');

const scrollLeft = slider.scrollLeft;

const history2024 = document.querySelector('.history2024');

const history2023 = document.querySelector('.history2023');

const middlePosition = scrollLeft + slider.clientWidth / 2;

const is2024Active = middlePosition &gt= history2024.offsetLeft &&

middlePosition < history2024.offsetLeft + history2024.clientWidth;

const is2023Active = middlePosition &gt= history2023.offsetLeft &&

middlePosition < history2023.offsetLeft + history2023.clientWidth;

const yearElements = document.querySelectorAll('.aboutsectionyear');

yearElements.forEach(function(yearElement) {

const year = yearElement.getAttribute('data-year');

if ((year === '2024' && is2024Active) || (year === '2023' && is2023Active)) {

yearElement.setAttribute('id', 'choosenyear');

} else {

yearElement.setAttribute('id', 'basicyear');

}

});

}

</script>

[아임웹 코드] 이미지 블록 형 메뉴 구성하기 2 [아임웹 코드] 텍스트 무한 반복 슬라이드 애니메이션