Slider Curved Background
Lien d’origine: https://codepen.io/mrspok407/pen/NRxBWa
HTML:
<section class="sliderBackground2"> <div class="cont"> <div class="app initial"> <div class="app__bgimg"> <div class="app__bgimg-image app__bgimg-image--1"></div> </div> <div class="app__img"> <img onmousedown="return false" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/whiteTest4.png" alt="city" /> </div> <div class="app__text app__text--1"> <div class="app__text-line app__text-line--4">imperdiet</div> <div class="app__text-line app__text-line--3">ut le</div> <div class="app__text-line app__text-line--2">non tincidunt</div> <div class="app__text-line app__text-line--1"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png" alt="" /> </div> </div> <div class="app__text app__text--2"> <div class="app__text-line app__text-line--4">habitant</div> <div class="app__text-line app__text-line--3">ut eget</div> <div class="app__text-line app__text-line--2">Nam imperdiet</div> <div class="app__text-line app__text-line--1"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png" alt="" /> </div> </div> </div> <div class="pages"> <ul class="pages__list"> <li data-target="1" class="pages__item pages__item--1 page__item-active" ></li> <li data-target="2" class="pages__item pages__item--2"></li> </ul> </div> </div> <a href="https://dribbble.com/shots/2936160-Opus-Animation" target="_blank" class="icon-link" > </div> </a> <a href="https://twitter.com/mrspok407" target="_blank" class="icon-link icon-link--twitter" > </a> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://localhost/wordpress/wp-content/themes/theme-bulma-v4.1.2/js/Curved_background.js"></script> </section>
CSS:
@keyframes scroll { 100% { transform: translate(-50%, 15px); } } .sliderBackground2 .pages { margin-left: 20px; } .sliderBackground2 .pages__list { list-style-type: none; } .sliderBackground2 .pages__item { position: relative; margin-bottom: 10px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; cursor: pointer; } .sliderBackground2 .pages__item:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0, 0); width: 75%; height: 75%; border-radius: 50%; background-color: #fff; opacity: 0; transition: 500ms; } .sliderBackground2 .pages__item:hover:after { transform: translate(-50%, -50%) scale(1, 1); opacity: 1; } .sliderBackground2 .page__item-active:after { transform: translate(-50%, -50%) scale(1, 1); opacity: 1; } .sliderBackground2 .icon-link { position: absolute; left: 5px; bottom: 5px; width: 50px; } .sliderBackground2 .icon-link img { width: 100%; vertical-align: top; } .sliderBackground2 .icon-link--twitter { left: auto; right: 5px; }
JS:
$(document).ready(function () { const $app = $(".app"); const $img = $(".app__img"); const $pageNav1 = $(".pages__item--1"); const $pageNav2 = $(".pages__item--2"); let animation = true; let curSlide = 1; let scrolledUp, nextSlide; let pagination = function (slide, target) { animation = true; if (target === undefined) { nextSlide = scrolledUp ? slide - 1 : slide + 1; } else { nextSlide = target; } $(".pages__item--" + nextSlide).addClass("page__item-active"); $(".pages__item--" + slide).removeClass("page__item-active"); $app.toggleClass("active"); setTimeout(function () { animation = false; }, 3000); }; let navigateDown = function () { if (curSlide > 1) return; scrolledUp = false; pagination(curSlide); curSlide++; }; let navigateUp = function () { if (curSlide === 1) return; scrolledUp = true; pagination(curSlide); curSlide--; }; setTimeout(function () { $app.addClass("initial"); }, 1500); setTimeout(function () { animation = false; }, 4500); $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = e.originalEvent.wheelDelta; if (animation) return; if (delta > 0 || e.originalEvent.detail < 0) { navigateUp(); } else { navigateDown(); } }); $(document).on( "click", ".pages__item:not(.page__item-active)", function () { if (animation) return; let target = +$(this).attr("data-target"); pagination(curSlide, target); curSlide = target; } ); });
Carousel slider
Lien d’origine: https://codepen.io/Schepp/pen/WNbQByE
HTML:
<div class="block carouselblock"> <center><section class="carousel" aria-label="Gallery"> <ol class="carousel__viewport"> <li id="carousel__slide1" tabindex="0" class="carousel__slide"> <div class="carousel__snapper"> <a href="#carousel__slide4" class="carousel__prev">Go to last slide</a> <a href="#carousel__slide2" class="carousel__next">Go to next slide</a> </div> </li> <li id="carousel__slide2" tabindex="0" class="carousel__slide"> <div class="carousel__snapper"></div> <a href="#carousel__slide1" class="carousel__prev">Go to previous slide</a> <a href="#carousel__slide3" class="carousel__next">Go to next slide</a> </li> <li id="carousel__slide3" tabindex="0" class="carousel__slide"> <div class="carousel__snapper"></div> <a href="#carousel__slide2" class="carousel__prev">Go to previous slide</a> <a href="#carousel__slide4" class="carousel__next">Go to next slide</a> </li> <li id="carousel__slide4" tabindex="0" class="carousel__slide"> <div class="carousel__snapper"></div> <a href="#carousel__slide3" class="carousel__prev">Go to previous slide</a> <a href="#carousel__slide1" class="carousel__next">Go to first slide</a> </li> </ol> <aside class="carousel__navigation"> <ol class="carousel__navigation-list"> <li class="carousel__navigation-item"> <a href="#carousel__slide1" class="carousel__navigation-button">Go to slide 1</a> </li> <li class="carousel__navigation-item"> <a href="#carousel__slide2" class="carousel__navigation-button">Go to slide 2</a> </li> <li class="carousel__navigation-item"> <a href="#carousel__slide3" class="carousel__navigation-button">Go to slide 3</a> </li> <li class="carousel__navigation-item"> <a href="#carousel__slide4" class="carousel__navigation-button">Go to slide 4</a> </li> </ol> </aside> </section></center> </div>
CSS:
@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% { scroll-snap-align: center; } 97% { scroll-snap-align: none; } 99% { scroll-snap-align: none; } 100% { scroll-snap-align: center; } } .carouselblock { max-width: 37.5rem; margin: 0 auto; padding: 0 1.25rem; font-family: 'Lato', sans-serif; } .carouselblock .carousel { box-sizing: border-box; scrollbar-color: transparent transparent; scrollbar-width: 0px; } .carouselblock .carousel ::-webkit-scrollbar { width: 0; } .carouselblock .carousel ::-webkit-scrollbar-track { background: transparent; } .carouselblock .carousel ::-webkit-scrollbar-thumb { background: transparent; border: none; } .carouselblock .carousel { -ms-overflow-style: none; } .carouselblock .carousel ol, .carouselblock .carousel li { list-style: none; margin: 0; padding: 0; } .carouselblock .carousel { position: relative; padding-top: 75%; filter: drop-shadow(0 0 10px #0003); perspective: 100px; } .carouselblock .carousel .carousel__viewport { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; overflow-x: scroll; counter-reset: item; scroll-behavior: smooth; scroll-snap-type: x mandatory; } .carouselblock .carousel .carousel__slide { position: relative; flex: 0 0 100%; width: 100%; background-color: #f99; counter-increment: item; } .carouselblock .carousel .carousel__slide:nth-child(even) { background-color: #99f; } .carouselblock .carousel .carousel__slide:before { content: counter(item); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-40%,70px); color: #fff; font-size: 2em; } .carouselblock .carousel .carousel__snapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scroll-snap-align: center; } @media (hover: hover) { .carouselblock .carousel .carousel__snapper { animation-name: tonext, snap; animation-timing-function: ease; animation-duration: 4s; animation-iteration-count: infinite; } .carouselblock .carousel .carousel__slide:last-child .carousel__snapper { animation-name: tostart, snap; } } @media (prefers-reduced-motion: reduce) { .carouselblock .carousel .carousel__snapper { animation-name: none; } } .carouselblock .carousel:hover .carousel__snapper, .carouselblock .carousel:focus-within .carousel__snapper { animation-name: none; } .carouselblock .carousel .carousel__navigation { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; } .carouselblock .carousel .carousel__navigation-list, .carouselblock .carousel .carousel__navigation-item { display: inline-block; } .carouselblock .carousel .carousel__navigation-button { display: inline-block; width: 1.5rem; height: 1.5rem; background-color: #333; background-clip: content-box; border: 0.25rem solid transparent; border-radius: 50%; font-size: 0; transition: transform 0.1s; } .carouselblock .carousel::before, .carouselblock .carousel::after, .carouselblock .carousel .carousel__prev, .carouselblock .carousel .carousel__next { position: absolute; top: 0; margin-top: 37.5%; width: 4rem; height: 4rem; transform: translateY(-50%); border-radius: 50%; font-size: 0; outline: 0; } .carouselblock .carousel::before, .carouselblock .carousel .carousel__prev { left: -1rem; } .carouselblock .carousel::after, .carouselblock .carousel .carousel__next { right: -1rem; } .carouselblock .carousel::before, .carouselblock .carousel::after { content: ''; z-index: 1; background-color: #333; background-size: 1.5rem 1.5rem; background-repeat: no-repeat; background-position: center center; color: #fff; font-size: 2.5rem; line-height: 4rem; text-align: center; pointer-events: none; } .carouselblock .carousel::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E"); } .carouselblock .carousel::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); }
Vertical scroll snap
Lien d’origine: https://codepen.io/argyleink/pen/yLovWjz
HTML:
<center><section class="slideVertical"> <div class="containervert"> <div class="box has-background-white"> <h1 class="has-text-black">slide 1</h1> </div> <div class="box has-background-black"> <h1 class="has-text-white">slide 2</h1> </div> <div class="box has-background-white"> <h1 class="has-text-black">slide 3</h1> </div> <div class="box has-background-black"> <h1 class="has-text-white">slide 4</h1> </div> <div class="box has-background-white"> <h1 class="has-text-black">slide 5</h1> </div> </div> </section></center>
CSS:
.slideVertical{ box-sizing: border-box; height: 500px; } .slideVertical .containervert{ width: 100%; height: 100%; scroll-snap-type: y mandatory; overflow-y: scroll; scrollbar-width: none; display: block; } .slideVertical div { display: scroll; align-items: center; justify-content: center; flex: none; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; scroll-snap-align: start; }