[HTML, CSS, JS] 제이쿼리(jQuery)를 이용하여 독특한 이미지 캐러셀 구현하기 : RAINBOW FLIP

클릭 시 접힌 이미지가 펼쳐지는 갤러리 구현하기

이 포스팅에서는 제이쿼리(jQuery) 사용하여 독특한 이미지 캐러셀를 만들어보겠습니다.
css blur 효과와 이미지 그리고 간단한 텍스트 배치를 통하여 간단하지만 시각적으로 독특한 퍼포먼스를 보여줄 수 있습니다.

HTML
<div id="content">
  <div class="grid-box">
    <div class="box open">
      <img src="이미지">
      <h2>red</h2>
    </div>
    <div class="box">
      <img src="이미지">
      <h2>orange</h2>
    </div>
    <div class="box">
      <img src="이미지">
      <h2>yellow</h2>
    </div>
    <div class="box">
      <img src="이미지">
      <h2>green</h2>
    </div>
    <div class="box">
      <img src="이미지">
      <h2>blue</h2>
    </div>
    <div class="box">
      <img src="이미지">
      <h2>navy</h2>
    </div>
    <div class="box">
      <img src="이미지">
      <h2>purple</h2>
    </div>
  </div>
</div>

HTML 코드에서는 전체를 감싸는 “#content” 요소에 “.grid-box” 를 배치합니다.
“.grid-box” 안에는 이미지와 텍스트를 감싸고 있는 “.box” 요소를 나열합니다.

CSS
* {
  margin: 0;
  padding: 0;
  transition: all 0.3s;
}
body {
  font: 0.75em Roboto, Noto Sans KR, sans-serif;
  background: #333;
  color: #fff;
}
#content {
  width: 100%;
  height: 100vh;
}
#content .grid-box {
  height: 415px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
}

#content .grid-box .box {
  width: 30px;
  height:415px;
  display: inline-block;
  overflow: hidden;
  border-radius: 10px;
  margin: 0 5px 0 0;
  cursor: pointer;
  position: relative;
}
#content .grid-box .box.open {
  width: 200px;
}
#content .grid-box .box.open img {
  filter: blur(0px);
}
#content .grid-box .box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px);
}
#content .grid-box .box:hover img {
  filter: blur(0px);
}
#content .grid-box .box h2 {
  font-size: 40px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  opacity: 0;
  text-transform: capitalize;
}
#content .grid-box .box.open:hover h2 {
  opacity: 1;
}

CSS 스타일링을 통해 이미지와 텍스트가 적절하게 표시되도록 설정합니다.
전체 문서에 대한 기본 스타일링은 * 선택자를 사용하여 설정됩니다.
각 박스에 대한 스타일은 “.box” 클래스로 지정되며, 이미지와 텍스트가 적절하게 배치될 수 있도록 다양한 속성들이 설정되어 있습니다.

JS
$(".box").on("click", function () {
  // 클릭된 .box 엘리먼트에 open 클래스 추가
  $(this).addClass("open");
  // 다른 .box 엘리먼트들의 open 클래스 제거
  $(".box").not(this).removeClass("open");
});

제이쿼리를 사용하여 이미지를 클릭했을 때 해당 이미지가 펼쳐지도록 기능을 구현합니다.
클릭 이벤트가 발생하면 클릭된 이미지에 “open” 클래스가 토글되도록 설정되어 있습니다. 즉, 이미 “open” 클래스를 가진 박스를 클릭하면 클래스가 제거되고, “open” 클래스가 없는 박스를 클릭하면 클래스가 추가됩니다.

결과보러가기 (풀페이지)

이를 활용하여 사용자들에게 독특하고 매력적인 경험을 선사하는 이미지 갤러리를 구현해보세요!
적절한 스타일과 효과를 추가하면 더욱 멋진 갤러리를 구현할 수 있을 것입니다.

Leave a Comment

%d