Slow Life|oruna.jp

cover_page
cover_page

Slider の実装とパーツ化

 WebDegign 2024/11/03

トップぺーにスライダー(フェードイン・アウト)を付けたいと思い試行錯誤。
CSSのみと画像の指定はHTMLに配置するようにしたいと思う。
そして、HTMLとCSSをパーツ化して実装することにしました。

参考HP  https://pa-tu.work/t/7503

HTML

    <div class="slider">

      <div class="slider-wrap">

        <div class="slider-item"><img src="<?php echo DOMAIN_THEME_IMG.'1.jpg'; ?>"></div>

        <div class="slider-item"><img src="<?php echo DOMAIN_THEME_IMG.'2.jpg'; ?>"></div>

        <div class="slider-item"><img src="<?php echo DOMAIN_THEME_IMG.'3.jpg'; ?>"></div>

      </div>

    </div>

CSS

.slider {

  width: 100%;

  height: 60vh;

}

.slider-wrap {

  position: relative;

  width: 100%;

  height: 60vh;

  overflow: hidden;

  background-color: #fff;

}

.slider-item {

  position: absolute;

  inset: 0;

  opacity: 0;

  z-index: 0;

  animation: sliderAnime 30s linear infinite 0s;

}

.slider-item:nth-child(2) {

  animation-delay: 10s;

}

.slider-item:nth-child(3) {

  animation-delay: 20s;

}

.slider-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

@keyframes sliderAnime {

  0% {

      opacity: 0;

      animation-timing-function: ease-in;

  }

  8% {

      opacity: 1;

      animation-timing-function: ease-out;

  }

  20% {

      opacity: 1;

      transform: scale(1.1);

  }

  40%,

  100% {

      opacity: 0;

      transform: scale(1.2);

  }

}

@media screen and (max-width:800px) {

  .slider {

    height: 40vh;

    }

  

  .slider-wrap {

    height: 40vh;

  }

}