How to create a split image effect using JavaScript and CSS3
This video will teach you how to create a split image effect that you see mostly on web sliders and modern websites like Apple, using JavaScript and CSS3.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>JavaScript Split Image Effect!</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='css/styles.css'>
<script src='main.js'></script>
</head>
<body>
<div id="slice">
<img src= "/images/unsplash.jpg"/>
</div>
</body>
</html>#slice {
width: 850px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 400px;
cursor: pointer;
}
#slice img {
height: auto;
width: 100%;
opacity: 0;
}
img {
width: 100%;
height: auto;
}
#slice div {
position: absolute;
z-index: 1;
background-repeat: no-repeat;
transform: rotateY(-50deg) scale(0.5);
opacity: 0;
transform-origin: bottom;
transition: all 0.6s cubic-bezier(0.71, 0.05, 0.09, 0.91);
}
#slice.active div {
opacity: 1;
transform: rotate(0deg) translateY(0);
transition-delay: 0.5s;
}var Slice = function() {
var sliceDiv = document.getElementById('slice');
var gridX = 4;
var gridY = 2;
var w = sliceDiv.offsetWidth;
var h = sliceDiv.offsetHeight;
var img = document.querySelectorAll('#slice img')[0].src;
var delay = 0.05;
console.log(w, h, img);
this.create = function() {
for (x = 0; x < gridX; x++) {
var width = x * w / gridX + "px";
var div = document.createElement("div");
document.getElementById('slice').appendChild(div);
div.style.left = width;
div.style.top = 0;
div.style.width = w / gridX + "px";
div.style.height = h + "px";
div.style.backgroundImage = "url(" + img + ")";
div.style.backgroundPosition = "-" + width;
div.style.backgroundSize = w + "px";
div.style.transitionDelay = x * delay + "s";
sliceDiv.classList.remove('active');
}
}
this.create();
document.getElementById("slice").onmouseover = function() {mouseOver()};
document.getElementById("slice").onmouseout = function() {mouseOut()};
function mouseOver() {
sliceDiv.classList.add('active');
}
function mouseOut() {
sliceDiv.classList.remove('active');
}
}
window.onload = function() {
var slice = new Slice();
};Thank you for reading this article. Share it with friends, pets and family.
Thank you for reading this article. Please consider subscribing to my YouTube Channel. It’s FREE!
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
Hi, your code doesn’t work correct…
you are using in your html /scc code “split”
Maybe you want to fix that…
Thanks for your code … I helped me very much…
Ah yes, thank you for letting me know. The code is now updated