이미지

[gyun님]

https://foolishdeveloper.com/3d-image-slider-using-html-css-and-javascript/


HTML, CSS, JavaScript를 사용한 3D 이미지 슬라이더
게시물 작성자:어리석은 개발자
게시된 게시물:2021년 8월 6일
게시물 카테고리:Best_JavaScript / css / html / image_sideshow / image_slider / javascript / m1 / 슬라이더

여기에서는 Html CSS와 자바스크립트를 사용하여 3D 이미지 슬라이더를 만드는 방법을 배웁니다. 3D 이미지 슬라이드쇼는 이미지를 아름답게 보이게 할 수 있는 간단한 웹 요소입니다. 

이는 웹사이트의 아름다움을 향상시킬 뿐만 아니라 사용자 만족도도 향상시킵니다. 이전에 더 많은 유형의 이미지 슬라이더 , 자동 이미지 슬라이드쇼 등  을 만드는 방법을 공유했습니다.


HTML, CSS 및 JavaScript 코드를 사용하여 3D 이미지 슬라이더를 만드는 방법을 보여드리는 것은 이번이 처음입니다 . JQuery나 JavaScript 라이브러리를 사용하지 않았습니다. 저는 Pure JavaScript 와 css3을 사용하여 이 프로젝트를 만들었습니다 . 결과적으로, 초보자라도 이 프로젝트를 이해할 수 있습니다.

 위의 그림에서 볼 수 있듯이 여기에 있는 많은 이미지는 원 모양으로 배열되어 있습니다. 또한 다음 및 사전 검토 버튼도 있습니다. 이 두 버튼을 클릭하면 이미지를 변경할 수 있습니다. 저는 8개의 이미지를 사용했고 , 변환:rotateY()를 사용하여 각 이미지를 45도 각도로 배열했습니다 .


HTML CSS를 사용한 3D 이미지 슬라이더
모든 분들의 첫 번째 웹페이지 배경색은 07bdf4 입니다 . 그런 다음 여기서는 8개의 이미지를 사용했습니다. 45도 각도 로 이미지를 서로 배열했습니다 . 또한 이미지 의 아름다움을 강화하기 위해 border: 2px Solid White를
사용하여 이미지 주위에 테두리를 만들었습니다 .

다음은 작동 방식을 더 잘 이해하는 데 도움이 되는 라이브 데모입니다. 여기서는 프로젝트에서 복사하고 사용할 수 있는 필수 소스 코드를 찾을 수 있습니다 . 또한 기사 하단에 CSS3 이미지 슬라이더의 소스 코드를 다운로드하는 데 사용할 수 있는 다운로드 링크도 제공했습니다.


CodePen 에서 Foolish Developer( @fghty ) 가 자바스크립트를 사용하는 펜
3D 이미지 슬라이더를 참조하세요 .



 
위의 디자인이 마음에 드셨으면 좋겠습니다. 이제 제가 만든 방법을 단계별로 보여드렸습니다. 여기서는 각 단계마다 가능한 결과를 제공하므로 이해하실 수 있습니다.

HTML, CSS 및 JS를 사용하여 3D 이미지 슬라이드쇼 만들기
 먼저 HTML과 CSS 파일을 만들었습니다. 이 경우에는 별도의 JavaScript 파일을 생성하지 않았습니다. 하지만 원한다면 별도의 js 파일 (index.js) 을 생성할 수도 있습니다 .

1단계:  기본 구조 만들기
다음 HTML 및 CSS 코드는 기본 구조입니다. 여기서는 background-color: # 07bdf4 를 사용했고 최소 높이는 100vh 입니다 . 여기서 이미지 슬라이더의 높이는 20rem이고 너비는 20rem입니다.

<div 클래스=”회전식 슬라이드”>
  <div 클래스=”carousel__cards”>
 
  </div>
</div>
 HTML {
  상자 크기 조정: 테두리 상자;
}
*, *::전 후 {
  상자 크기 조정: 상속;
  여백: 0;
  패딩: 0;
}
몸 {
  배경 크기: 표지;
  배경: #07bdf4;
  디스플레이: 플렉스;
  내용 정당화: 센터;
  글꼴 모음: 산세리프;
  최소 높이: 100vh;
  배경 부착: 고정;
  항목 정렬: 중앙;
}
    
.캐러셀 {
  항목 정렬: 중앙;
  내용 정당화: 공백 사이;
  관점: 100rem;
  높이: 60vh;
  너비: 100%;
  디스플레이: 플렉스;
  플렉스 방향: 열;
}
.carousel__cards {
  위치: 상대;
  폭: 20rem;
  높이: 20rem;
  변환 스타일: 보존-3D;
  변환: 번역Z(-25rem);
  전환: 0.3초 완화 변환;
}
2단계:  필수 이미지 추가
 이제 여기에 필요한 이미지를 추가했습니다. 여기에 총 8개의 이미지를 추가했습니다. 저는 해당 이미지 주위에 2픽셀 테두리를 사용했습니다. 내가 100% 사용한 높이와 너비는 높이와 너비가 슬라이더와 동일하게 유지된다는 의미입니다.

    <div 클래스=”carousel__card”>
      <img 클래스=”carousel__img”
           src=”img1.jpg” alt=”#”>
    </div>
    <div 클래스=”carousel__card”>
      <img 클래스=”carousel__img”
           src=”img2.jpg” alt=”#”>
    </div>
    <div 클래스=”carousel__card”>
      <img 클래스=”carousel__img”
           src=”img3.jpg” alt=”#”>
    </div>
    <div 클래스=”carousel__card”>
      <img 클래스=”carousel__img”
           src=”img4.jpg” alt=”#”>
    </div>
    <div 클래스=”carousel__card”>
      <img 클래스=”carousel__img”
           src=”img5.jpg” alt=”#”>
    </div>
    <div 클래스=”carousel__card”>
      <img 클래스=”carousel__img”
           src=”img6.jpg” alt=”#”>
    </div>
    <div 클래스=”carousel__card”>
      <img 클래스=”carousel__img”
           src=”img7.jpg” alt=”#”>
    </div>
    <div 클래스=”carousel__card”>
      <img 클래스=”carousel__img”
           src=”img8.jpg” alt=”#”>
    </div>
.carousel__card {
  너비: 100%;
  높이: 100%;
  위치: 절대;
  테두리: 2px 단색 흰색;
  국경 반경: 0.2rem;
  글꼴 크기: 3em;
  글꼴 두께: 700;
}
.carousel__img {
  디스플레이: 인라인 블록;
  너비: 100%;
  높이: 100%;
}

3단계:  특정 각도로 이미지 정렬 
이제 변환:rotateY를 사용하여 각 이미지를 45도 각도로 배열하여 원을 만듭니다 . 이를 위해 nth-child()를 각각 45도 각도로  배치했습니다 .

첫 번째 이미지는 0도입니다. 두 번째 이미지는 45° 각도입니다. 세 번째 이미지는 90도 각도입니다. 마찬가지로 아트 이미지도 이런 식으로 정리했습니다.

 8개 이상의 이미지를 사용하려면 이미지 수를 360으로 나눕니다. 그 몫을 각도로 사용하세요. 10개의 이미지를 사용하는 경우 각 이미지를 360/10 = 36 도 각도로 배열하세요.

.carousel__card:nth-child(1) {
  변환: 회전Y(0deg) 변환Z(25rem);
}
.carousel__card:nth-child(2) {
  변환: 회전Y(45deg) 변환Z(25rem);
}
.carousel__card:nth-child(3) {
  변환: 회전Y(90deg) 변환Z(25rem);
}
.carousel__card:nth-child(4) {
  변환:rotateY(135deg)translateZ(25rem);
}
.carousel__card:nth-child(5) {
  변환:rotateY(180deg)translateZ(25rem);
}
.carousel__card:nth-child(6) {
  변환: 회전Y(225deg) 변환Z(25rem);
}
.carousel__card:nth-child(7) {
  변환: 회전Y(270deg) 변환Z(25rem);
}
.carousel__card:nth-child(8) {
  변환: 회전Y(315deg) 변환Z(25rem);
}

4단계: 다음 및 이전 버튼 만들기 
이제 이미지를 변경하기 위해 두 개의 버튼을 추가했습니다. 하나는 이전이고 다른 하나는 다음입니다. 버튼은 배경색: # 00599c 이고 텍스트 색상은 흰색입니다. margin: 0 2rem은 둘을 서로 약간 멀리 유지하는 데 사용됩니다. 글꼴 크기 1.2 em은 텍스트 크기를 조정하는 데에도 사용되었습니다.

  <div 클래스=”carousel__control”>
    <버튼 클래스=”carousel__btn carousel__btn–back”>⇦ 이전</button>
    <button class=”carousel__btn carousel__btn–next”>다음 ⇨</button>
  </div>
.carousel__btn {
  개요: 없음;
  테두리: 없음;
  국경 반경: 0.2rem;
  배경: #00599c;
  패딩: 0.5em 1em;
  글꼴 크기: 1.2em;
  글꼴 두께: 500;
  색상: #ffffff;
  커서: 포인터;
  마진: 0 2rem;
  여백 상단: 20px;
}
.carousel__btn:hover {
  변환: scale(1.04);
  배경: #000000;
}

5단계:  JavaScript를 사용하여 두 개의 버튼 활성화
지금까지는 디자인 작업만 수행했으며 이제 JavaScript 코드를 사용하여 이 두 개의 버튼을 구현해야 합니다. 

여기서 다음 버튼은 다음 이미지를 표시하는 데 도움이 되고 이전 버튼은 이전 이미지를 표시하는 데 도움이 됩니다. 우선 두 개의 버튼과 슬라이더의 상수를 하나씩 설정해 주었습니다.

 const next = document.querySelector(“.carousel__btn–next”),
 back = document.querySelector(“.carousel__btn–back”),
 carousel = document.querySelector(“.carousel__cards”);
각도 = 0으로 놔두세요;
 먼저 Next 버튼을 실행했습니다. 여기에서 첫 번째 각도가 결정됩니다. 즉, 다음 버튼을 클릭할 때 각도가 얼마나 달라질지 결정됩니다. 

각 이미지를 45도 각도로 배치했기 때문에 다음 버튼을 클릭하면 45도의 차이가 발생합니다. 그런 다음 변환을 사용하여 구현했습니다.

next.addEventListener(“클릭”, () => {
  각도 -= 45;
  carousel.style.transform = `translateZ(-25rem)rotateY(${angle}deg)`;
});
 같은 방법으로 Previs 버튼을 구현했습니다. 여기에서는 먼저 각도를 결정하고 각각을 구현했습니다.

back.addEventListener(“클릭”, () => {
  각도 += 45;
  carousel.style.transform = `translateZ(-25rem)rotateY(${angle}deg)`;
});

 아주 심플하고 심플한 디자인이에요. 기본적으로 저는 버튼이 작동하도록 하기 위해 JavaScript를 거의 사용하지 않았습니다. 3D 이미지 슬라이더를 만드는 방법을 단계별로 알고 싶다면 위의 비디오 튜토리얼을 시청하세요. 다음은 이 프로젝트를 생성하는 데 필요한 코드를 다운로드하는 데 사용할 수 있는 다운로드 링크입니다.

코드 다운로드

https://foolishdeveloper.com/3d-image-slider-using-html-css-and-javascript/

[gyun님]

https://foolishdeveloper.com/3d-image-slider-using-html-css-and-javascript/