How to split image or divide image into parts? Solution: Split Image In JavaScript HTML CSS – Tile Effect Split.
Mostly you can see split image effect in sliders, but how we can split an image into parts with a click? Answer: You can also create this program on mouse click with jQuery which is a JavaScript library. This will be good practice to improve JavaScript skills. I know jQuery is a javascript library, but remember that jquery is written in JavaScript. Show I am saying this JS program.
So, Today I am sharing split image into parts program. This is a split image in JavaScript HTML CSS program, with tile effect. You can call this split image into tile effect. You can control delay, block count, etc after few changes. If you know javascript then you can create buttons for control, that is not a difficult job.
In this program also CSS play an important role. With JavaScript, your CSS skills will also improve. This is a pretty good effect, as we know every cool effect are built-in jQuery. The main purpose of jQuery is that, save time and easy to work. So, If you don’t understand what is the program I am talking about, or don’t get what is split image effect. See this preview to know how this program looks like.
Preview Of Tile Effect Split
See this video preview for getting an idea of how this program actually is.
Now you can see this split image effect program visually. If you like this, then get the source code of it.
Split Image In JavaScript HTML CSS Source Code
Before
sharing source code, Let’s talk about this program. I had created this program using HTML CSS & jQuery ( A JavaScript library ). I don’t have a separate category for jQuery, So I always add this type of program in
Javascript Category. This Split Image In JavaScript HTML CSS, I gave details in the title. After that, I also used an external CSS library called
normalize.css (
get) for creating this program.
For creating this program you have to create 3 files. First for HTML, second for CSS, and last for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>
<head>
<meta charset="UTF-8">
<title>Split image | Webdevtrick.com</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>
<div class="split">
<img src= "https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg"/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
|
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
/** code by webdevtrick ( https://webdevtrick.com ) **/
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
background: #ECECEC;
}
.split {
width: 850px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 400px;
cursor: pointer;
}
.split:before {
content: 'CLICK OVER IMAGE';
color: #777;
letter-spacing: 1px;
font-size: 20px;
position: absolute;
bottom: -30px;
left: 50%;
transform: translate(-50%);
}
.split img {
height: auto;
width: 100%;
opacity: 0;
}
.split 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);
}
.split.active div {
opacity: 1;
transform: rotate(0deg) translateY(0);
}
|
function.js
Finally, create a JS file named ‘function.js‘ and put these codes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
/** code by webdevtrick ( https://webdevtrick.com ) **/
var Split = function() {
this.$t = $(".split");
this.gridX = 6;
this.gridY = 4;
this.w = this.$t.width();
this.h = this.$t.height();
this.img = $("img", this.$t).attr("src");
this.delay = 0.05;
this.create = function() {
$("div", this.$t).remove();
for (x = 0; x < this.gridX; x++) {
for (y = 0; y < this.gridY; y++) {
var width = this.w / this.gridX * 101 / this.w + "%",
height = this.h / this.gridY * 101 / this.h + "%",
top = this.h / this.gridY * y * 100 / this.h + "%",
left = this.w / this.gridX * x * 100 / this.w + "%",
bgPosX = -(this.w / this.gridX * x) + "px",
bgPosY = -(this.h / this.gridY * y) + "px";
$("<div />")
.css({
top: top,
left: left,
width: width,
height: height,
backgroundImage: "url(" + this.img + ")",
backgroundPosition: bgPosX + " " + bgPosY,
backgroundSize: this.w + "px",
transitionDelay: x * this.delay + y * this.delay + "s"
})
.appendTo(this.$t);
}
}
};
this.create();
this.$t
.on("click", function() {
$(this).toggleClass("active");
})
.click();
};
window.onload = function() {
var split = new Split();
var webdev = (function datwebdev() {
var webdev = new dat.webdev();
webdev.add(split, "gridX", 1, 20).step(1).onChange(function(newValue) {
split.create();
});
webdev.add(split, "gridY", 1, 20).step(1).onChange(function(newValue) {
split.create();
});
webdev.add(split, "delay", 0, 0.3).step(0.01).onChange(function(newValue) {
split.create();
});
return webdev;
})();
};
|
That’s It. Now you have successfully created Split Image In JavaScript HTML CSS or split image into tile effect. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
0 Comments