[해피CGI][cgimall] 로고를 이용한 이미지 슬라이드 Logo Carousel Blur

로고를 이용한 이미지 슬라이드 Carousel입니다.
로고를 변경하여 다양하게 응용 가능한 슬라이드 효과입니다.

HTML 구조

<div class="carousel">

  <div class="logos"></div>

  <div class="mask"></div>

</div>

 

<div class="carousel">

  <div class="logos"></div>

  <div class="mask"></div>

</div>

 

CSS 소스

body {

  background: black;

  margin: 0;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}

 

@keyframes moveBg {

  from { background-position: 0 50%; }

  to { background-position:  -1134px 50%; }

}

 

.carousel {

  --blur: 6px;

  --contrast: 105%;

  --speed: 13s;

  height: 250px;

  max-width: 700px;

  width: 100%;

  position: relative;

 

  .mask {

    position: absolute;

    inset: 0;

    background: #0000;

    backdrop-filter: blur(var(--blur)) contrast(var(--contrast));

    -webkit-backdrop-filter: blur(var(--blur)) contrast(var(--contrast)); /* so it works on Safari */

    -webkit-mask: linear-gradient(90deg, #000 50px, #0000 175px calc(100% - 175px), #fff calc(100% - 50px));

    pointer-events: none;

  }

 

  .logos {

    animation: moveBg var(--speed) linear infinite;

    position: absolute;

    inset: 0;

    background: url(https://assets.codepen.io/1506195/brands2.webp) 0 50% / 567px 75px repeat-x;

    -webkit-mask: linear-gradient(90deg, #0000 5px, #000 50px calc(100% - 50px), #0000 calc(100% - 5px));

  }

}

 

 

/* make the second carousel larger icons and more blur*/

.carousel:nth-of-type(2) {

  --blur: 9px;

  --contrast: 125%;

 

  .logos {

    background: url(https://assets.codepen.io/1506195/brands2.webp) 0 50% / 1134px 150px repeat-x;

  }

}