Sadece CSS ile slideshow yapmak

Bir HTML web sitesi için slide show/slayt gösterisi deyince akla ilk gelen şey JavaScript oluyor ancak bir CSS kompetanı olarak ben eğer basitçe yalnızca görseller görünecek ise JavaScipt’e ihtiyaç duymuyorum.

Yalnızca CSS kullanarak/Pure CSS Slideshow yapımı için aşağıda benim hazırladığım kodları kullanabilirsiniz.

main {
  height: 100vh;
  min-height: 30rem;
  cursor: pointer;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slideshows {
  background-color: #1116;
}
.slideshow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}
.slideshow--hero {
  z-index: 3;
  left: 0;
  top: 50%;
  height: 85%;
  transform: translateY(-50%) skewY(-10deg);
  transform-origin: center;
  overflow: hidden;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}
.slideshow--hero .slides {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100vw;
  height: 100vh;
  animation: 11s slideshow-hero-mobile -3s infinite;
}

.slideshow--hero .slide1 {
  background-image: url(https://source.unsplash.com/collection/3697116/1600x900);
  animation: 20s slides-set-1 -0.1s infinite;
}
.slideshow--hero .slide2 {
  background-image: url(https://source.unsplash.com/collection/9995415/1600x900);
  animation: 20s slides-set-2 -0.1s infinite;
}
.slideshow--hero .slide3 {
  background-image: url(https://source.unsplash.com/1600x900/?wordpress);
  animation: 20s slides-set-3 -0.1s infinite;
}

@media (min-width: 768px) {
  .slideshow--hero {
    left: 50%;
    top: 0;
    width: 67%;
    height: 100%;
    transform: translateX(-50%) skewX(-10deg);
  }
  .slideshow--hero .slides {
    top: 0;
    left: -25%;
    height: 100%;
    animation: 11s slideshow-hero -3s infinite;
  }
}

.slideshow--contrast {
  z-index: 1;
  width: 100%;
  height: 50%;
  transform: none;
}
.slideshow--contrast--before {
  left: 0;
}
.slideshow--contrast--before .slides {
  width: 100vw;
}
.slideshow--contrast--after {
  z-index: 2;
  left: auto;
  right: 0;
}
.slideshow--contrast--after .slides {
  width: 100vw;
  left: auto;
  right: 0;
}
.slideshow--contrast .slides {
  animation: 14s slideshow-contrast -5s infinite;
}

.slideshow--contrast .slide1 {
  background-image: linear-gradient(
      to bottom,
      rgba(200, 200, 75, 0.25) 0,
      rgba(200, 75, 75, 0.5) 100%
    ),
    url(https://source.unsplash.com/collection/3697116/1600x900);
  animation: 20s slides-set-1 -0.2s infinite;
}
.slideshow--contrast .slide2 {
  background-image: linear-gradient(
      to bottom,
      rgba(200, 200, 75, 0.25) 0,
      rgba(200, 75, 75, 0.5) 100%
    ),
    url(https://source.unsplash.com/collection/9995415/1600x900);
  animation: 20s slides-set-2 -0.2s infinite;
}
.slideshow--contrast .slide3 {
  background-image: linear-gradient(
      to bottom,
      rgba(200, 200, 75, 0.25) 0,
      rgba(200, 75, 75, 0.5) 100%
    ),
    url(https://source.unsplash.com/1600x900/?wordpress);
  animation: 20s slides-set-3 -0.2s infinite;
}

.slideshow--contrast--after {
  top: auto;
  bottom: 0;
}
.slideshow--contrast--after .slides {
  animation: 13s slideshow-contrast -13s infinite;
}
.slideshow--contrast--after .slide {
  background-position: right;
}
.slideshow--contrast--after .slide1 {
  animation: 20s slides-set-1 infinite;
}
.slideshow--contrast--after .slide2 {
  animation: 20s slides-set-2 infinite;
}
.slideshow--contrast--after .slide3 {
  animation: 20s slides-set-3 infinite;
}

@media (min-width: 768px) {
  .slideshow--contrast {
    width: 50%;
    height: 100%;
  }
  .slideshow--contrast--after {
    top: 0;
    bottom: auto;
  }
  .slideshow--contrast--after .slides {
    width: 50vw;
  }
}

.slide,
.slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@keyframes slideshow-hero-mobile {
  0% {
    transform: scale(1) skewY(10deg);
  }
  50% {
    transform: scale(1.05) skewY(10deg);
  }
  100% {
    transform: scale(1) skewY(10deg);
  }
}
@keyframes slideshow-hero {
  0% {
    transform: scale(1) skewX(10deg);
  }
  50% {
    transform: scale(1.05) skewX(10deg);
  }
  100% {
    transform: scale(1) skewX(10deg);
  }
}
@keyframes slideshow-contrast {
  0% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}
@keyframes slides-set-1 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  31% {
    opacity: 1;
    transform: scale(1);
  }
  34% {
    opacity: 0;
    transform: scale(1.05);
  }
  97% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slides-set-2 {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  31% {
    opacity: 0;
    transform: scale(1.05);
  }
  34% {
    opacity: 1;
    transform: scale(1);
  }
  64% {
    opacity: 1;
    transform: scale(1);
  }
  67% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes slides-set-3 {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  64% {
    opacity: 0;
    transform: scale(1.05);
  }
  67% {
    opacity: 1;
    transform: scale(1);
  }
  97% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

Sadece CSS olduğu için daha hızlı ve kusursuz çalışacaktır. Ben bu uygulama için Unsplash’dan random resimler kullandım, siz kendi görsellerinizi kullanabilirsiniz.

Aşağıdaki uygulamanın kodlarına https://glitch.com/~slideshow-pure-css adresinden ulaşabilirsiniz.

Uygulamayı canlı tam ekran görmek için: https://slideshow-pure-css.glitch.me

wolkanca.com’da Sadece CSS ile slideshow yapmak veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, Sadece CSS ile slideshow yapmak için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.