BanbaYa備忘録 HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ

参照元  コリス

HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ

参照URL  https://coliss.com/articles/build-websites/operation/css/css-only-carousel.html

@keyframes tonext {

  75% {

    left: 0;

  }

  95% {

    left: 100%;

  }

  98% {

    left: 100%;

  }

  99% {

    left: 0;

  }

}

 

@keyframes tostart {

  75% {

    left: 0;

  }

  95% {

    left: 300%;

  }

  98% {

    left: 300%;

  }

  99% {

    left: 0;

  }

}

 

@keyframes snap {

  96% {

    scrollsnapalign: center;

  }

  97% {

    scrollsnapalign: none;

  }

  99% {

    scrollsnapalign: none;

  }

  100% {

    scrollsnapalign: center;

  }

}

 

body {

  maxwidth: 37.5rem;

  margin: 0 auto;

  padding: 0 1.25rem;

  fontfamily: ‘Lato’, sansserif;

}

 

* {

  boxsizing: borderbox;

  scrollbarcolor: transparent transparent; /* thumb and track color */

  scrollbarwidth: 0px;

}

 

*::webkitscrollbar {

  width: 0;

}

 

*::webkitscrollbartrack {

  background: transparent;

}

 

*::webkitscrollbarthumb {

  background: transparent;

  border: none;

}

 

* {

  msoverflowstyle: none;

}

 

ol, li {

  liststyle: none;

  margin: 0;

  padding: 0;

}

 

.carousel {

  position: relative;

  paddingtop: 75%;

  filter: dropshadow(0 0 10px #0003);

  perspective: 100px;

}

 

.carousel__viewport {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  display: flex;

  overflowx: scroll;

  counterreset: item;

  scrollbehavior: smooth;

  scrollsnaptype: x mandatory;

}

 

.carousel__slide {

  position: relative;

  flex: 0 0 100%;

  width: 100%;

  backgroundcolor: #f99;

  counterincrement: item;

}

 

.carousel__slide:nthchild(even) {

  backgroundcolor: #99f;

}

 

.carousel__slide:before {

  content: counter(item);

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate3d(50%,40%,70px);

  color: #fff;

  fontsize: 2em;

}

 

.carousel__snapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  scrollsnapalign: center;

}

 

@media (hover: hover) {

  .carousel__snapper {

    animationname: tonext, snap;

    animationtimingfunction: ease;

    animationduration: 4s;

    animationiterationcount: infinite;

  }

 

  .carousel__slide:lastchild .carousel__snapper {

    animationname: tostart, snap;

  }

}

 

@media (prefersreducedmotion: reduce) {

  .carousel__snapper {

    animationname: none;

  }

}

 

.carousel:hover .carousel__snapper,

.carousel:focuswithin .carousel__snapper {

  animationname: none;

}

 

.carousel__navigation {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  textalign: center;

}

 

.carousel__navigationlist,

.carousel__navigationitem {

  display: inlineblock;

}

 

.carousel__navigationbutton {

  display: inlineblock;

  width: 1.5rem;

  height: 1.5rem;

  backgroundcolor: #333;

  backgroundclip: contentbox;

  border: 0.25rem solid transparent;

  borderradius: 50%;

  fontsize: 0;

  transition: transform 0.1s;

}

 

.carousel::before,

.carousel::after,

.carousel__prev,

.carousel__next {

  position: absolute;

  top: 0;

  margintop: 37.5%;

  width: 4rem;

  height: 4rem;

  transform: translateY(50%);

  borderradius: 50%;

  fontsize: 0;

  outline: 0;

}

 

.carousel::before,

.carousel__prev {

  left: 1rem;

}

 

.carousel::after,

.carousel__next {

  right: 1rem;

}

 

.carousel::before,

.carousel::after {

  content: ;

  zindex: 1;

  backgroundcolor: #333;

  backgroundsize: 1.5rem 1.5rem;

  backgroundrepeat: norepeat;

  backgroundposition: center center;

  color: #fff;

  fontsize: 2.5rem;

  lineheight: 4rem;

  textalign: center;

  pointerevents: none;

}

 

.carousel::before {

  backgroundimage: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 100 100′ xmlns=’https://ift.tt/2u2ZOcc points=’0,50 80,100 80,0′ fill=’%23fff’/%3E%3C/svg%3E”);

}

 

.carousel::after {

  backgroundimage: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 100 100′ xmlns=’https://ift.tt/2u2ZOcc points=’100,50 20,100 20,0′ fill=’%23fff’/%3E%3C/svg%3E”);

}

@memo

webデザイン

https://ift.tt/2FQJnCd

January 15, 2020 at 09:26AM

Follow me!