Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created May 16, 2017
Embed
What would you like to do?
Side-Slide Image Gallery with clipPath and Web Animations API
<!-- works with any number of images greater than 1 (although I would suggest not using more than 6) -->
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="sidle">
<img src="elephant-2x.jpg" alt>
<img src="orangutan-2x.jpg" alt>
<img src="baboon-2x.jpg" alt>
<img src="parrot-2x.jpg" alt>
</div>
const imageArea = document.getElementById("sidle"),
images = imageArea.getElementsByTagName("img");
if (images.length > 1) {
for (var i = 0; i < images.length; i++) {
let topEdge = ((100 / images.length) * i) + 1,
bottomEdge = (topEdge + (100 / images.length)) - 1;
images[i].style.clipPath = `polygon(0% ${topEdge}%, 100% ${topEdge}%, 100% ${bottomEdge}%, 0% ${bottomEdge}%)`;
}
imageArea.classList.add("slide");
function slide(imgTarget, direction) {
let slidy = imgTarget.animate([
{ transform: 'translateX(0%)', clipPath: imgTarget.style.clipPath },
{ transform: 'translateX(101%)', clipPath: imgTarget.style.clipPath },
{ transform: 'translateX(101%)', clipPath: imgTarget.style.clipPath },
{ transform: 'translateX(101%)', clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)' }
], {
duration: 666,
easing: 'linear',
fill: 'forwards',
direction: direction
});
imgTarget.classList.toggle("full");
}
imageArea.addEventListener("click", function(e) {
let fullImage = document.querySelector(".full");
if (fullImage == null) {
slide(e.target, "normal");
} else {
slide(fullImage, "reverse");
if (e.target !== fullImage) {
setTimeout(function(){ slide(e.target, "normal"); }, 200);
}
}
})
}
* {
box-sizing: border-box;
}
body {
background: #bbb;
margin: 2rem;
}
#sidle.slide {
position: relative;
width: 45%;
}
#sidle.slide img {
position: absolute;
width: 100%;
}
#sidle.slide img:hover {
cursor: pointer;
}
#sidle.slide .full:hover {
cursor: default ;
}
#sidle:not(.slide) {
width: 98%;
margin: 0 auto;
}
#sidle:not(.slide) img {
width: 48%;
display: inline-block;
}
@media all and (max-width: 600px) {
body {
margin: 0;
}
#sidle.slide {
width: 100%;
}
#sidle.slide img {
position: static;
width: 100% !important;
display: inline-block;
-webkit-clip-path: none !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.