HTML 및 CSS만 사용하는 슬라이더로 이미지 클립 애니메이션

6444 단어 imageslidercssimageeffectclipanimation
독자 여러분, 오늘 이 블로그에서는 HTML 및 CSS만 사용하여 슬라이더 컨트롤로 이미지 클립 애니메이션을 만드는 방법을 배웁니다. 이전에 how to create an Image Slider with Controls but there is no clip animation and now it's time to create a clip animation on an image slide.

Clip animation is done with a clip-path CSS property that allows you to specify a specific region of an image or any element to display, rather than showing the complete area. It helps to cover up the section you want in many shapes like square, circle, polygon, rectangular, etc.

In this tutorial [Image Clip Animation with Sliders], on the webpage, there is a total of five images but four images are cover up with clip-path and there are slider buttons to show or slide images one by one. When you clicked on the particular slide button, the image will show up with a clip effect or animation.

You can copy the codes from the given boxes or download the code files from the given link because you won't get images if you only copy-paste the codes so I recommend you to download the source code files instead of copying codes. Click here to download code files.에 대한 블로그도 공유했습니다.

당신은 이것을 좋아할 것입니다:



Animated Blog Card Slider
Responsive Owl-carousel Slider
Pure CSS 3D Flip Card On Hover
Automatic Image Slidehsow Effect


HTML 코드:



<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Image Clip Animation | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <input type="radio" name="slide" id="one" checked>
      <input type="radio" name="slide" id="two">
      <input type="radio" name="slide" id="three">
      <input type="radio" name="slide" id="four">
      <input type="radio" name="slide" id="five">
      <div class="img img-1">
        <!-- <img src="images/img-1.jpg" alt=""> -->
      </div>
      <div class="img img-2">
        <!-- <img src="images/img-2.jpg" alt=""> -->
      </div>
      <div class="img img-3">
        <!-- <img src="images/img-3.jpg" alt=""> -->
      </div>
      <div class="img img-4">
        <!-- <img src="images/img-4.jpg" alt="">  -->
      </div>
      <div class="img img-5">
        <!-- <img src="images/img-5.jpg" alt="">  -->
      </div>
      <div class="sliders">
        <label for="one" class="one"></label>
        <label for="two" class="two"></label>
        <label for="three" class="three"></label>
        <label for="four" class="four"></label>
        <label for="five" class="five"></label>
      </div>
    </div>

  </body>
</html>




CSS 코드:



*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: -webkit-linear-gradient(136deg, rgb(224,195,252) 0%, rgb(142,197,252) 100%);
}
.wrapper{
  position: relative;
  width: 700px;
  height: 400px;
}
.wrapper .img{
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper .img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  clip-path: circle(0% at 0% 100%);
  transition: all 0.7s;
}
#one:checked ~ .img-1 img{
  clip-path: circle(150% at 0% 100%);
}
#two:checked ~ .img-1 img,
#two:checked ~ .img-2 img{
  clip-path: circle(150% at 0% 100%);
}
#three:checked ~ .img-1 img,
#three:checked ~ .img-2 img,
#three:checked ~ .img-3 img{
  clip-path: circle(150% at 0% 100%);
}
#four:checked ~ .img-1 img,
#four:checked ~ .img-2 img,
#four:checked ~ .img-3 img,
#four:checked ~ .img-4 img{
  clip-path: circle(150% at 0% 100%);
}
#five:checked ~ .img-1 img,
#five:checked ~ .img-2 img,
#five:checked ~ .img-3 img,
#five:checked ~ .img-4 img,
#five:checked ~ .img-5 img{
  clip-path: circle(150% at 0% 100%);
}
.wrapper .sliders{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex;
}
.wrapper .sliders label{
  border: 2px solid rgb(142,197,252);
  width: 13px;
  height: 13px;
  margin: 0 3px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
#one:checked ~ .sliders label.one,
#two:checked ~ .sliders label.two,
#three:checked ~ .sliders label.three,
#four:checked ~ .sliders label.four,
#five:checked ~ .sliders label.five{
  width: 35px;
  border-radius: 14px;
  background: rgb(142,197,252);
}
.sliders label:hover{
  background: rgb(142,197,252);
}
input[type="radio"]{
  display: none;
}
디자인 패턴: 공장
MongoDB 치트 시트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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