<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Carousel with reversed easing curve</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div data-carousel>
<ul class="slide__list Wallop-list">
<li class="slide__item Wallop-item Wallop-item--current">
<h2 class="slide__heading">Testimonial 1</h2>
<blockquote>
<p class="slide__quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. In est ante in nibh mauris cursus mattis molestie.</p>
<cite class="slide__cite">AN Author</cite>
</blockquote>
</li>
<li class="slide__item Wallop-item">
<h2 class="slide__heading">Testimonial 2</h2>
<blockquote>
<p class="slide__quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<cite class="slide__cite">AN Author</cite>
</blockquote>
</li>
<li class="slide__item Wallop-item">
<h2 class="slide__heading">Testimonial 3</h2>
<blockquote>
<p class="slide__quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. In est ante in nibh mauris cursus mattis molestie.</p>
<cite class="slide__cite">AN Author</cite>
</blockquote>
</li>
<li class="slide__item Wallop-item">
<h2 class="slide__heading">Testimonial 4</h2>
<blockquote>
<p class="slide__quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. In est ante in nibh mauris cursus mattis molestie.</p>
<cite class="slide__cite">AN Author</cite>
</blockquote>
</li>
</ul>
<button class="button--prev Wallop-buttonPrevious" title="previous">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.9 50.2"><path d="M25.1 50.2L0 25.1 25.1 0l2.8 2.8L5.7 25.1l22.2 22.2z"/></svg>
</button>
<button class="button--next Wallop-buttonNext" title="next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.9 50.2"><path d="M25.1 50.2L0 25.1 25.1 0l2.8 2.8L5.7 25.1l22.2 22.2z"/></svg>
</button>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/wallop/2.4.1/js/Wallop.min.js'></script><script src="./script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
* {
box-sizing: border-box;
}
body {
background-color: #141316;
color: #FAFAFA;
}
p {
margin-top: 0;
margin-bottom: 30px;
}
/* List reset */
ul {
padding: 0;
margin: 0;
}
button {
background-color: transparent;
border: none;
width: 65px;
padding: 20px;
transition: opacity 200ms;
position: absolute;
top: 50%;
left: 0;
transform: translate3d(0, -50%, 0);
z-index: 2;
}
button svg {
fill: #FAFAFA;
}
button:hover, button:focus {
opacity: 0.6;
}
.button--next {
left: auto;
right: 0;
transform: translate3d(0, -50%, 0) rotate(180deg);
}
.wrapper {
height: 100vh;
min-height: 600px;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
}
.slide__list {
width: calc(100vw - 40px);
height: calc(100vw / 2);
font-family: Lato, sans-serif;
}
.slide__list::before, .slide__list::after {
content: '';
width: 180px;
height: 100%;
display: block;
position: absolute;
top: 0;
z-index: 1;
}
.slide__list::before {
left: 0;
background: linear-gradient(to right, #141316 60%, transparent);
}
.slide__list::after {
right: 0;
background: linear-gradient(to left, #141316 60%, transparent);
}
.slide__item {
width: 100%;
height: 100%;
padding: 40px 65px;
text-align: center;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
}
.slide__item > * {
width: 100%;
}
.slide__heading,
.slide__quote,
.slide__cite {
opacity: 0;
animation-timing-function: var(--originalCurve);
width: calc(100% - 120px);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.slide__heading {
--delay: 300ms;
text-transform: uppercase;
font-size: 1.2rem;
letter-spacing: 0.05em;
}
.slide__quote {
--delay: 420ms;
font-size: 1.1rem;
line-height: 1.4;
letter-spacing: 0.03em;
}
.slide__cite {
--delay: 540ms;
display: block;
}
/*
Customised Wallop styles with customised animations
@author http://pedroduarte.me/wallop
*/
[data-carousel] {
position: relative;
}
.Wallop-list {
position: relative;
overflow: hidden;
}
.Wallop-item {
--x1: 0.1;
--y1: 0.67;
--x2: 0.29;
--y2: 0.98;
--originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));
--reversedCurve: cubic-bezier(calc(1 - var(--x2)), calc(1 - var(--y2)), calc(1 - var(--x1)), calc(1 - var(--y1)));
--length: 1300ms;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.Wallop-item--current {
visibility: visible;
position: relative;
}
.Wallop-item--current .slide__heading,
.Wallop-item--current .slide__quote,
.Wallop-item--current .slide__cite {
animation: slideIn var(--length) forwards var(--originalCurve);
}
.Wallop-item--showPrevious .slide__heading,
.Wallop-item--showPrevious .slide__quote,
.Wallop-item--showPrevious .slide__cite {
animation: slideOut var(--length) var(--delay) forwards reverse var(--reversedCurve);
}
.Wallop-item--showNext .slide__heading,
.Wallop-item--showNext .slide__quote,
.Wallop-item--showNext .slide__cite {
animation: slideIn var(--length) var(--delay) forwards var(--originalCurve);
}
.Wallop-item--hidePrevious,
.Wallop-item--hideNext {
--length: 500ms;
visibility: visible;
}
.Wallop-item--hidePrevious .slide__heading,
.Wallop-item--hidePrevious .slide__quote,
.Wallop-item--hidePrevious .slide__cite {
animation: slideOut var(--length) forwards var(--originalCurve);
}
.Wallop-item--hideNext .slide__heading,
.Wallop-item--hideNext .slide__quote,
.Wallop-item--hideNext .slide__cite {
animation: slideIn var(--length) forwards reverse var(--reversedCurve);
}
/* Custom keyframe animation */
@keyframes slideIn {
0% {
transform: translate3d(50%, 0, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideOut {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(-50%, 0, 0);
opacity: 0;
}
}
const slider = document.querySelector('[data-carousel]');
const slides = [...document.querySelectorAll('.Wallop-item')]
this.wallop = new Wallop(slider);
let prev = 0
const removePrevClasses = (index) => {
let prevClass
if (slides[index].classList.contains('Wallop-item--hidePrevious')) {
prevClass = 'Wallop-item--hidePrevious'
} else if (slides[index].classList.contains('Wallop-item--hideNext')) {
prevClass = 'Wallop-item--hideNext'
}
if (prevClass) {
setTimeout(() => {
slides[index].classList.remove(prevClass)
}, 600)
}
}
const onChange = () => {
removePrevClasses(prev)
prev = this.wallop.currentItemIndex
}
this.wallop.on('change', onChange);