HTML, CSS 및 JS를 사용하여 3D 이미지 슬라이드쇼 만들기

35469 단어 html webdev css javascript

이 기사에서는 개인 웹 사이트에서 이미지를 아름답게 렌더링하는 데 사용할 수 있는 HTML, CSS 및 JavaScript를 사용하여 웹에서 놀라운 3D 이미지 슬라이드쇼를 만드는 방법을 배웁니다.

HTML

HTML 파일에는 주로 이미지의 세 회전 섹션을 표시할 세 개의 다른 div를 포함하는 컨테이너 div가 있습니다. 큐브 클래스는 공통 축을 따라 회전하는 독립적인 큐브로 작동하는 이러한 각 div에 할당됩니다(루빅스 큐브와 비슷하지만 한 면을 따라서만 절단됨). face 클래스는 이미지가 있는 큐브 영역을 나타냅니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Cube</title>
</head>
<body>

    <div class="container">
        <div class="viewport">
            <div class="control left-arrow"><i class="fas fa-arrow-left"></i></div>
            <div class="cube cube-1">
                <div class="face front"></div>
                <div class="face back"></div>
                <div class="face top"></div>
                <div class="face bottom"></div>
                <div class="face left"></div>
                <div class="face right"></div>
            </div>
            <div class="cube cube-2">
                <div class="face front"></div>
                <div class="face back"></div>
                <div class="face top"></div>
                <div class="face bottom"></div>
                <div class="face left"></div>
                <div class="face right"></div>
            </div>
            <div class="cube cube-3">
                <div class="face front"></div>
                <div class="face back"></div>
                <div class="face top"></div>
                <div class="face bottom"></div>
                <div class="face left"></div>
                <div class="face right"></div>
            </div>
            <div class="control right-arrow"><i class="fas fa-arrow-right"></i></div>
            <div class="control play-pause"><i class="fas fa-play"></i></div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

CSS

본문, 배경 및 뷰포트에 기본 스타일을 제공합니다. 여기에 하이테크 CSS 마법사 기술이 어느 정도의 수학과 함께 등장합니다. CSS 파일은 아래에 제공되며 거의 자명하다고 생각합니다. img라는 폴더를 만들고 CSS 파일에서 사용된 이름으로 일부 이미지를 그 안에 저장합니다.

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .8)), url(images/bg.jpg) no-repeat;
    background-size: cover;
}

.viewport {
    height: 21vw;
    width: 42vw;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    perspective: 1300px;
}

.viewport::after {
    width: 120%;
    height: 20%;
    top: 140%;
    left: -10%;
    content: '';
    position: absolute;
    background-color: #000;
    z-index: -1;
    filter: blur(50px);
}

.cube {
    width: 100%;
    height: 33.3333333%;
    transform-style: preserve-3d;
    position: relative;
}

.cube-1 {
    transition: transform .4s;
}

.cube-2 {
    z-index: 10;
    transition: transform .4s .2s;
}

.cube-3 {
    transition: transform .4s .4s;
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
}

.front {
    transform: translateZ(21vw);
}

.cube-1 .front {
    background: url(images/slide-img-1.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .front {
    background: url(images/slide-img-1.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .front {
    background: url(images/slide-img-1.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.back {
    transform: translateZ(-21vw) rotateY(180deg);
}

.cube-1 .back {
    background: url(images/slide-img-2.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .back {
    background: url(images/slide-img-2.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .back {
    background: url(images/slide-img-2.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.left {
    transform: translateX(-21vw) rotateY(-90deg);
}


.cube-1 .left {
    background: url(images/slide-img-3.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .left {
    background: url(images/slide-img-3.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .left {
    background: url(images/slide-img-3.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.right {
    transform: translateX(21vw) rotateY(90deg);
}


.cube-1 .right {
    background: url(images/slide-img-4.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .right {
    background: url(images/slide-img-4.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .right {
    background: url(images/slide-img-4.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.top {
    height: 42vw;
    background-color: #111;
    transform: translateY(-21vw) rotateX(90deg);
}

.bottom {
    height: 42vw;
    background-color: #111;
    transform: translateY(-14vw) rotateX(-90deg);
}

.control {
    width: 40px;
    height: 40px;
    align-items: center;
    color: #fff;
    position: absolute;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    background-color: rgba(59, 52, 50, .7);
    display: flex;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: background-color .3s;
}

.control:hover {
    background-color: rgba(42, 38, 36, .8);
}

.control i {
    pointer-events: none;
}

.left-arrow {
    top: 50%;
    left: -35%;
}

.right-arrow {
    top: 50%;
    left: 135%;
}

.play-pause {
    top: 140%;
    left: 120%;
}

자바스크립트

이 프로젝트의 자바스크립트 부분은 설정된 시간 간격 후에 슬라이드 쇼를 자동화하는 역할을 하는 페이지 하단의 작은 재생 및 일시 정지 버튼과 회전 시작을 처리합니다.

const rotate = () => {
  const cubes = document.querySelectorAll(".cube");

  Array.from(cubes).forEach(
    (cube) => (cube.style.transform = `rotateY(${x}deg)`)
  );
};

const changePlayPause = () => {
  const i = document.querySelector(".play-pause i");
  const cls = i.classList[1];
  if (cls === "fa-play") {
    i.classList.remove("fa-play");
    i.classList.add("fa-pause");
  } else {
    i.classList.remove("fa-pause");
    i.classList.add("fa-play");
  }
};

let x = 0;
let bool = false;
let interval;

const playPause = () => {
  if (!bool) {
    interval = setInterval(() => {
      x -= 90;
      rotate();
    }, 3000);
    changePlayPause();
    bool = true;
  } else {
    clearInterval(interval);
    changePlayPause();
    bool = false;
  }
};

document.querySelector(".left-arrow").addEventListener("click", () => {
  x += 90;
  rotate();
  if (bool) {
    playPause();
  }
});

document.querySelector(".left-arrow").addEventListener("mouseover", () => {
  x += 25;
  rotate();
});

document.querySelector(".left-arrow").addEventListener("mouseout", () => {
  x -= 25;
  rotate();
});

document.querySelector(".right-arrow").addEventListener("click", () => {
  x -= 90;
  rotate();
  if (bool) {
    playPause();
  }
});

document.querySelector(".right-arrow").addEventListener("mouseover", () => {
  x -= 25;
  rotate();
});

document.querySelector(".right-arrow").addEventListener("mouseout", () => {
  x += 25;
  rotate();
});

document.querySelector(".play-pause").addEventListener("click", () => {
  playPause();
});

결과

지금쯤이면 "이 거대하고 거대한 코드 집합이 무엇을 할 수 있을까?"라고 궁금해하실 것입니다. 이 모든 코드가 함께 작동하는 방식에 대한 명확한 아이디어를 얻으려면 아래 제공된 gif를 살펴보십시오.

이 기사를 읽어 주셔서 감사합니다. 전체 프로젝트는 GitHub에서 사용할 수 있습니다. 질문이 있으시면 언제든지 제 .

감사합니다!

Reference

이 문제에 관하여(HTML, CSS 및 JS를 사용하여 3D 이미지 슬라이드쇼 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kgprajwal/create-a-3d-image-slideshow-using-html-css-js-13fm

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

golang 웹소켓 긴 연결

LINUX 기본 명령

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다