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;
}