안녕하세요 오늘은 가로나 세로가 아니라 화면이 따로 움직이는 분할 슬라이드를 함께 만들어보겠습니다.
아래는 완성 시 모습입니다. 버튼을 누를 때마다 서로 다른 방향으로 슬라이드가 움직이는 것을 확인할 수 있습니다.
아래는 전체 코드입니다.
splitSlider.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--화살표 아이콘 사용을 위한 링크 삽입-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"/>
<title>화면 분할 슬라이드 예제</title>
</head>
<body>
<div class="container">
<div class="slider-container">
<div class="left-slide">
<div style="background-color:#9b726e">
<h1>판다</h1>
<p>판다 ? 이름도 귀여워</p>
</div>
<div style="background-color: #354f32">
<h1>고양이</h1>
<p>남의 집 고양이 귀여워</p>
</div>
<div style="background-color: #2F2F2F">
<h1>작은 새</h1>
<p>작고 소중해</p>
</div>
<div style="background-color: #072f5f">
<h1>멋진 개</h1>
<p>인간의 좋은 친구.</p>
</div>
</div>
<!--이미지는 픽사베이 사용-->
<div class="right-slide">
<div style=" background-image: url('https://cdn.pixabay.com/photo/2023/07/27/04/46/border-collie-8152437_1280.jpg'); " ></div>
<div style=" background-image: url('https://cdn.pixabay.com/photo/2023/08/26/22/44/brewers-blackbird-8215850_1280.jpg'); " ></div>
<div style=" background-image: url('https://cdn.pixabay.com/photo/2023/09/09/11/55/cat-8243079_1280.jpg'); " ></div>
<div style=" background-image: url('https://cdn.pixabay.com/photo/2023/08/05/15/42/panda-8171354_1280.jpg'); " ></div>
</div>
<!--버튼 영역-->
<div class="action-buttons">
<button class="down-button">
<i class="fas fa-arrow-down"></i>
</button>
<button class="up-button">
<i class="fas fa-arrow-up"></i>
</button>
</div>
</div>
</div>
</body>
</html>
splitSlider.css
/* 전체 페이지 설정 */
body {
height: 100vh; /* 화면 높이를 전체 뷰포트 높이로 설정 */
margin: 0; /* 바깥 여백 제거 */
padding: 0; /* 안쪽 여백 제거 */
}
/* 슬라이더 컨테이너 설정 */
.slider-container {
position: relative; /* 상대적 위치 설정 */
overflow: hidden; /* 넘치는 부분 가림 */
width: 100vw; /* 가로 너비를 전체 뷰포트 너비로 설정 */
height: 100vh; /* 높이를 전체 뷰포트 높이로 설정 */
}
/* 왼쪽 슬라이드 설정 */
.left-slide {
height: 100%; /* 높이를 100%로 설정 (부모 컨테이너 높이에 맞춤) */
width: 35%; /* 너비를 35%로 설정 */
position: absolute; /* 절대 위치 설정 */
top: 0; /* 위쪽 여백 없앰 */
left: 0; /* 왼쪽 여백 없앰 */
transition: transform 0.5s ease-in-out; /* 변환 효과 설정 */
}
/* 왼쪽 슬라이드 내부 설정 */
.left-slide > div {
height: 100%; /* 높이를 100%로 설정 (부모 슬라이드 높이에 맞춤) */
width: 100%; /* 너비를 100%로 설정 (부모 슬라이드 너비에 맞춤) */
display: flex; /* 플렉스 박스로 설정 */
flex-direction: column; /* 컬럼 방향으로 설정 */
align-items: center; /* 가운데 정렬 */
justify-content: center; /* 가운데 정렬 */
color: #fff; /* 텍스트 색상 설정 */
}
/* 왼쪽 슬라이드 제목 설정 */
.left-slide h1 {
font-size: 40px; /* 글꼴 크기 설정 */
margin-bottom: 10px; /* 아래쪽 여백 설정 */
margin-top: -30px; /* 위쪽 여백 설정 */
}
/* 오른쪽 슬라이드 설정 */
.right-slide {
height: 100%; /* 높이를 100%로 설정 (부모 컨테이너 높이에 맞춤) */
position: absolute; /* 절대 위치 설정 */
top: 0; /* 위쪽 여백 없앰 */
left: 35%; /* 왼쪽 여백 설정 */
width: 65%; /* 너비를 65%로 설정 */
transition: transform 0.5s ease-in-out; /* 변환 효과 설정 */
}
/* 오른쪽 슬라이드 이미지 설정 */
.right-slide > div {
background-repeat: no-repeat; /* 이미지 반복 없음 */
background-size: cover; /* 이미지 크기 커버로 설정 */
background-position: center center; /* 이미지 중앙 정렬 */
height: 100%; /* 높이를 100%로 설정 (부모 슬라이드 높이에 맞춤) */
width: 100%; /* 너비를 100%로 설정 (부모 슬라이드 너비에 맞춤) */
}
/* 버튼 스타일 설정 */
button {
background-color: #fff; /* 배경색 설정 */
border: none; /* 테두리 없음 */
color: #aaa; /* 글꼴 색상 설정 */
cursor: pointer; /* 커서 스타일 변경 */
font-size: 16px; /* 글꼴 크기 설정 */
padding: 15px; /* 안쪽 여백 설정 */
}
/* 버튼 호버 효과 설정 */
button:hover {
color: #222; /* 호버 시 글꼴 색상 변경 */
}
/* 버튼 포커스 효과 설정 */
button:focus {
outline: none; /* 포커스 시 외곽선 제거 */
}
/* 슬라이더 컨테이너 내부의 버튼 위치 설정 */
.slider-container .action-buttons button {
position: absolute; /* 절대 위치 설정 */
left: 35%; /* 왼쪽 위치 조정 */
top: 50%; /* 위쪽 위치 조정 */
z-index: 100; /* Z-인덱스 설정 */
}
/* 아래로 버튼 스타일 설정 */
.slider-container .action-buttons .down-button {
transform: translateX(-100%); /* 왼쪽으로 숨김 */
border-top-left-radius: 5px; /* 상단 좌측 모서리 둥글게 설정 */
border-bottom-left-radius: 5px; /* 하단 좌측 모서리 둥글게 설정 */
}
/* 위로 버튼 스타일 설정 */
.slider-container .action-buttons .up-button {
transform: translateY(-100%); /* 위로 숨김 */
border-top-right-radius: 5px; /* 상단 우측 모서리 둥글게 설정 */
border-bottom-right-radius: 5px; /* 하단 우측 모서리 둥글게 설정 */
}
splitSlider.js
// 슬라이더와 버튼 요소들을 선택하여 변수에 할당합니다.
const sliderContainer = document.querySelector(".slider-container");
const slideRight = document.querySelector(".right-slide");
const slideLeft = document.querySelector(".left-slide");
const upButton = document.querySelector(".up-button");
const downButton = document.querySelector(".down-button");
// 오른쪽 슬라이드에 있는 div 요소의 개수를 구합니다.
const slidesLength = slideRight.querySelectorAll("div").length;
// 현재 활성화된 슬라이드의 인덱스를 나타내는 변수입니다.
let activeSlideIndex = 0;
// 왼쪽 슬라이드의 top 속성을 설정하여 초기 위치를 조정합니다.
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`;
// 슬라이드 방향에 따른 변화를 처리하는 함수입니다.
const changeSlide = (direction) => {
// 슬라이더 컨테이너의 높이 값을 가져옵니다.
const sliderHeight = sliderContainer.clientHeight;
// 'up' 버튼을 클릭한 경우
if (direction === "up") {
activeSlideIndex++;
if (activeSlideIndex > slidesLength - 1) activeSlideIndex = 0;
// 'down' 버튼을 클릭한 경우
} else if (direction === "down") {
activeSlideIndex--;
if (activeSlideIndex < 0) activeSlideIndex = slidesLength - 1;
}
// 오른쪽과 왼쪽 슬라이드의 위치를 조정합니다.
slideRight.style.transform =
`translateY(-${activeSlideIndex * sliderHeight}px)`;
slideLeft.style.transform =
`translateY(${activeSlideIndex * sliderHeight}px)`;
};
// 각 버튼에 이벤트 리스너를 추가하여 클릭 시 changeSlide 함수가 호출되도록 합니다.
upButton.addEventListener("click", () => changeSlide("up"));
downButton.addEventListener("click", () => changeSlide("down"));
'JavaScript' 카테고리의 다른 글
| [javascript] 마우스 이벤트를 이용하여 옮겨다니는 포스트잇 만들기 (2) | 2023.10.29 |
|---|---|
| [JavaScript] Phaser 객체에 애니메이션 적용하기 (0) | 2023.10.24 |
| [JavaScript]싱글톤 패턴 구현 (0) | 2023.10.16 |
| [JavaScript] 네이버 Map API 커스텀 마커 구현하기 (0) | 2023.10.06 |
| [JavaScript] 카카오 Map API 키워드로 장소검색하기 (0) | 2023.09.27 |
