Cool slider animation with clip-path. Image slide show animation developed using CSS, HTML and JavaScript. Demo and Download options are available.
Author | Uwe Chardon |
---|---|
Hits | |
Created | SEPTEMBER 16, 2018 |
License | Open |
Compatible browsers | Chrome, Firefox, Safari |
HTML Snippet
<div class="slider" data-state="0">
<svg id="prev" viewBox='0 0 100 100'>
<circle cx="50" cy="50" r="85" />
<path d="M 65,2 17,50 65,98" />
</svg>
<svg id="next" viewBox='0 0 100 100'>
<circle cx="50" cy="50" r="85" />
<path d="M 35,2 82,50 35,98" />
</svg>
<div class="status">
<div class="stat" data-key="0"></div>
<div class="stat" data-key="1"></div>
<div class="stat" data-key="2"></div>
<div class="stat" data-key="3"></div>
<div class="stat" data-key="4"></div>
<div class="stat" data-key="5"></div>
</div>
<div class="image" data-key="0" >
<img src="https://picsum.photos/1200/1200/?image=111" alt=""/>
</div>
<div class="image" data-key="1">
<img src="https://picsum.photos/1200/1200/?image=112" alt=""/>
</div>
<div class="image" data-key="2">
<img src="https://picsum.photos/1200/1200/?image=116" alt=""/>
</div>
<div class="image" data-key="3">
<img src="https://picsum.photos/1200/1200/?image=125" alt=""/>
</div>
<div class="image" data-key="4" data-active>
<img src="https://picsum.photos/1200/1200/?image=122" alt=""/>
</div>
<div class="image" data-key="5">
<img src="https://picsum.photos/1200/1200/?image=120" alt=""/>
</div>
</div>
<div class="dwf">done with fun - @uchardon</div>
CSS Code
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
html {
height: 100%;
background: #1A2A3A;
color: #FFF;
}
body {
font-family: Roboto, sans-serif;
display:flex;
justify-content:center;
align-items: center;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
transition-property: clip-path, opacity;
transition-duration: 900ms, 300ms;
transition-timing-function: cubic-bezier(.5, 0, .5, 1);
}
.slider {
position:relative;
display: flex;
width: 100vw;
height: 90vh;
overflow: hidden;
.status {
position: absolute;
bottom: 10px;
left:10px;
display:flex;
.stat {
width:10px;
height:10px;
background-color:transparent;
border-radius:50%;
z-index:11;
margin: 0px 5px;
border: 2px solid #fff;
}
.stat[data-active] {
background-color:#fff;
}
}
img {
object-fit: cover;
object-position: center 80%;
width: 100%;
height: 100%;
display: block;
}
.image {
width: 100%;
margin-right: -100%;
opacity: 0;
display: block;
img {
clip-path: circle(50px at 5vw 50%);
}
}
.image[data-active] {
opacity:1;
img {
clip-path: circle(100vmax at 50% 50%);
}
}
.image[data-active] ~.image {
opacity: 0;
img{
clip-path: circle(50px at 95vw 50%);
}
}
svg {
height: 30px;
position:absolute;
top:50%;
margin-top:-15px;
z-index: 1000;
cursor: pointer;
overflow:visible;
path {
stroke: #666;
stroke-linecap:round;
stroke-width:12px;
fill:transparent;
}
circle {
fill: #fff9;
}
&#next {
right:5vw;
}
&#prev {
left:5vw;
}
}
}
.dwf {
position:fixed;
bottom:4px;
right:10px;
background-color:#0003;
padding:3px;
border-radius:3px;
}
JavaScript Snippet
console.clear();
initslider();
function initslider() {
const elPrevButton = document.querySelector('.slider #prev');
const elNextButton = document.querySelector('.slider #next');
const elImages = Array.from(document.querySelectorAll('.slider .image'));
let state = {
photo: 0
};
function send(event) {
const elActives = document.querySelectorAll('.slider [data-active]');
Array.from(elActives)
.forEach(el => el.removeAttribute('data-active'));
switch (event) {
case 'PREV':
state.photo--;
// Math.max(state.photo - 1, 0);
break;
case 'NEXT':
state.photo++;
// Math.min(state.photo + 1, elImages.length - 1);
break;
default:
state.photo = +event;
break;
}
var len = elImages.length;
// Loop Around
//state.photo = ( ( state.photo % len) + len ) % len;
state.photo = Math.max(0, Math.min( state.photo, len - 1) );
Array.from(document.querySelectorAll(`.slider [data-key="${state.photo}"]`))
.forEach( el => {
el.setAttribute('data-active', true);
});
}
elPrevButton.addEventListener('click', () => {
send('PREV');
});
elNextButton.addEventListener('click', () => {
send('NEXT');
});
const elStatus = Array.from(document.querySelectorAll('.slider .stat'));
elStatus.forEach( stat => {
stat.addEventListener('click', () => {
send(stat.dataset.key);
});
});
send(0);
};
Preview

Advertisement