Skip to content

Instantly share code, notes, and snippets.

@fahim0623

fahim0623/Split-Images-in-Tiles.markdown

Last active August 29, 2015 14:05
Show Gist options
  • Save fahim0623/a2874800172d3d29b294 to your computer and use it in GitHub Desktop.
Save fahim0623/a2874800172d3d29b294 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Fahim Akhtar.
Raw
index.html
<div class="container">
<div id="anim-wrapper" style="width:100%; height: 450px ">
<div class="animContainer" style="width:100%; height:100%;">
<div class="animBanner">
See in fire bug its splitted 10 columns and 10 rows.
Its done using background-position with a percent calculation. Its responsive also.
Now each splitted div with background image. can be used for animation.
</div>
<div class="animNode"> <!-- style="background-color: violet; visibility: hidden;" -->
<img src="http://www.dearingfilm.com/galleries/Midnight-of-a-Million-Zillion-Dreams/Midnight-of-a-Million-Zillion-Dreams-top.jpg"
alt="Cute Ones"
class="bg-image"
data-ca-bgsize="100% 100%"
data-ca-tanim="left"
data-ca-rows="10"
data-ca-columns="10"
data-ca-bgposition="0 0"
data-ca-bgrepeat="no-repeat"
/>
</div>
</div>
</div>
</div>
Raw
script.js
/*global TimelineMax, alert, TweenMax, window, getComputedStyle, TweenLite*/
function calixAnimator() {
var animContainer = document.querySelector(".animContainer"),
animNode = animContainer.children,
a = 0;
function getStyle(oElm, css3Prop) {
var strValue = "";
if (window.getComputedStyle) {
strValue = getComputedStyle(oElm).getPropertyValue(css3Prop);
} else if (oElm.currentStyle) {
try {
strValue = oElm.currentStyle[css3Prop];
} catch (ignore) {
}
}
return strValue;
}
function calixCreateTiles(rows, columns, divid) {
var left = 0,
top = 0,
bPositionCol = 0,
bPositionRow = 0,
imgHeight = getStyle(document.getElementById(divid), "height"),
imgWidth = getStyle(document.getElementById(divid), "width"),
imgSrc = getStyle(document.getElementById(divid), "background-image"),
i = 0,
j = 0,
//targetElementID = "divid",
NewDivID = "NewDivID",
targetElement = document.getElementById(divid).parentNode,
newDivElement = [];
//alert("imgHeight :" + imgHeight + " imgWidth :" + imgWidth + " imgSrc :" + imgSrc);
//alert("targetElement" + targetElement + " imgHeight : " + imgHeight + " imgWidth :" + imgWidth + " imgSrc :" + imgSrc);
var columnWidthSize = 100 / columns;//imgWidth.replace("px", "") / columns;
var columnHeightSize = 100 / rows;//imgHeight.replace("px", "") / rows;
//alert(columnWidthSize);
//alert(columnHeightSize);
for (i = 0; i < rows; i += 1) {
for (j = 0; j < columns; j += 1) {
newDivElement[[i, j]] = document.createElement('div');
newDivElement[[i, j]].setAttribute("id", NewDivID + Math.floor((Math.random() * 7896) + 1.567));
newDivElement[[i, j]].style.width = columnWidthSize + "%";
newDivElement[[i, j]].style.height = columnHeightSize + "%";
newDivElement[[i, j]].style.backgroundImage = imgSrc;
newDivElement[[i, j]].setAttribute("class", "bg-image");
newDivElement[[i, j]].style.backgroundSize = (100 * columns) + "% " + (100 * rows) + "%"; //"500% 100%";
if ((i === 0) && (j === 0)) {
newDivElement[[i, j]].style.backgroundPosition = bPositionCol + "% " + bPositionRow + "%";
} else if ((j === 0) && (i !== 0)) {
newDivElement[[i, j]].style.backgroundPosition = bPositionCol + "% " + ((100 / (rows - 1)) * i) + "%";
} else if ((i === 0) && (j !== 0)) {
newDivElement[[i, j]].style.backgroundPosition = ((100 / (columns - 1)) * j) + "% " + bPositionRow + "%";
} else {
newDivElement[[i, j]].style.backgroundPosition = ((100 / (columns - 1)) * j) + "% " + ((100 / (rows - 1)) * i) + "%";
}
newDivElement[[i, j]].style.top = top + "%";
newDivElement[[i, j]].style.left = left + "%";
//alert("left :" + left + " top :" + top + " bPositionCol :" + bPositionCol + "bPositionRow" + bPositionRow);
// add the div's
targetElement.appendChild(newDivElement[[i, j]]);
left += columnWidthSize; // Add + 1
//bPositionCol = bPositionCol ;
}
bPositionCol = 0;
left = 0;
top += columnHeightSize; // Add + 1
//bPositionRow = bPositionRow ;
}
}
//This is the first function and it converts all the first sibling image
//Inside animNode. Its uses data attributes and sets them back to the div created.
function calixImagetoBackground(animationNode) {
var caBgImage = [], //Background Image Array
caImageSrc = [], //Image Source
caB = 0, // Image Length
caC = 0, // Animation Node Length
caDivForImage = [], //Newly created div from image
caBgSize, // Get Background Size
caBgPosition, // Background Position
caBgRepeat, // Background Repeat
caRows, // Rows
caColumns, // Columns
caTanim, // Transition Animation
caBgImageID, // Background Div ID
caHeight, // Div height
caWidth; // Width
for (caC = 0; caC < animationNode.length; caC += 1) {
caBgImage = animationNode[caC].querySelectorAll("img.bg-image");
for (caB = 0; caB < caBgImage.length; caB += 1) {
caHeight = getStyle((caBgImage[caB]), "height");
caWidth = getStyle((caBgImage[caB]), "width");
//alert("caHeight " + caHeight + " caWidth " + caWidth);
caImageSrc = caBgImage[caB].src;
caBgSize = caBgImage[caB].getAttribute("data-ca-bgsize") || "100% 100%";
caBgPosition = caBgImage[caB].getAttribute("data-ca-bgposition") || "0 0";
caBgRepeat = caBgImage[caB].getAttribute("data-ca-bgrepeat") || "no-repeat";
caRows = caBgImage[caB].getAttribute("data-ca-rows") || 1;
caColumns = caBgImage[caB].getAttribute("data-ca-columns") || 1;
caTanim = caBgImage[caB].getAttribute("data-ca-tanim") || "CALEFT";
caDivForImage[caB] = document.createElement('div');
caDivForImage[caB].setAttribute("class", "bg-image");
caDivForImage[caB].setAttribute("data-ca-rows", caRows);
caDivForImage[caB].setAttribute("data-ca-columns", caColumns);
caDivForImage[caB].setAttribute("data-ca-tanim", caTanim);
caDivForImage[caB].setAttribute("id", "caImageID" + Math.floor((Math.random() * 7896) + 1.567));
caDivForImage[caB].style.height = "100%";
caDivForImage[caB].style.width = "100%";
caDivForImage[caB].style.backgroundSize = caBgSize;
caDivForImage[caB].style.backgroundPosition = caBgPosition;
caDivForImage[caB].style.backgroundRepeat = caBgRepeat;
caDivForImage[caB].style.backgroundImage = "url(" + caImageSrc + ")";
//caDivForImage[caB].style.display = "none";
animationNode[caC].appendChild(caDivForImage[caB]);
caBgImageID = caDivForImage[caB].getAttribute('id');
if (caRows > 1 || caColumns > 1) {
//alert("caRows :" + caRows + " caColumns :" + caColumns);
calixCreateTiles(caRows, caColumns, caBgImageID);
}
animationNode[caC].removeChild(caBgImage[caB]);
}
}
}
calixImagetoBackground(animNode);
}
//window.onload = ;
window.onload = function () {
calixAnimator();
};
Raw
Split-Images-in-Tiles.markdown

Split Images in Tiles

This is just to split and image into rows and columns to and properly place next to each other for symmetrical look. Its a simple javascript function invoked on button click. rows and column variable must have minimum 1 as value.

 See in fire bug its splitted 10 columns and 10 rows.
        Its done using background-position and background-size  with a percent calculation. Its responsive also.
        Now each splitted div can be used for animation.

A Pen by Fahim Akhtar on CodePen.

License.

Raw
style.css
/* relative div to hold all the splitted image in absolute */
/*calix Animator css */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
@media (min-width: 768px) {
.container {
width: 750px;
overflow: hidden;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
overflow: hidden;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
overflow: hidden;
}
}
.container-wide {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
img {
vertical-align: middle;
}
img {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
.anim-wrapper {
padding: 0px;
margin: 0 0 10px 0;
position:relative;
overflow: hidden;
}
.animContainer {
padding: 0px;
margin: 0;
position:relative;
}
.animBanner{
position: absolute;
width :100%;
height: 100%;
z-index:10000;
line-height: 100%;
font-size :28px;
color: white;
text-align:center;
margin: 100px auto;
}
.animContainer > * {
position: absolute;
}
.animNode {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
opacity:1;
}
.animNode > .bg-image{
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment