Skip to content

Set preserve3d on IsoGrid main element optional #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
elrumordelaluz wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Set preserve3d on IsoGrid main element optional #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions index2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -592,9 +592,10 @@ <h3 class="media-item__title">Grid Item Animation Layout</h3>
}
}
});

new IsoGrid(document.querySelector('.isolayer--deco2'), {
perspective: 3000,
preserve3d: false,
transform : 'translateY(-150px) rotateX(55deg) rotateZ(-45deg)',
stackItemsAnimation : {
properties : function(pos) {
Expand All @@ -614,7 +615,7 @@ <h3 class="media-item__title">Grid Item Animation Layout</h3>
}
}
});

new IsoGrid(document.querySelector('.isolayer--deco3'), {
transform : 'translateX(40vw) translateY(100px) rotateX(15deg) rotateY(0) rotateZ(40deg)',
stackItemsAnimation : {
Expand All @@ -633,7 +634,7 @@ <h3 class="media-item__title">Grid Item Animation Layout</h3>
}
}
});

new IsoGrid(document.querySelector('.isolayer--deco4'), {
perspective: 3000,
transform : 'translate3d(-200px,-200px,0) scale3d(0.8,0.8,1) rotateY(45deg) rotateZ(-10deg)',
Expand Down
39 changes: 22 additions & 17 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
*
* Copyright 2016, Codrops
* http://www.codrops.com
*/
Expand Down Expand Up @@ -64,24 +64,24 @@
/**********************************************/

var docElem = window.document.documentElement;

// some helper functions
function scrollY() { return window.pageYOffset || docElem.scrollTop; }
function extend( a, b ) {
for( var key in b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}

/**
* Isometric grid obj
*/
function IsoGrid(el, options) {
this.isolayerEl = el;

this.options = extend( {}, this.options );
extend( this.options, options );

Expand All @@ -90,7 +90,7 @@
// grid items
this.gridItems = [].slice.call(this.gridEl.querySelectorAll('.grid__item'));
this.gridItemsTotal = this.gridItems.length;

this.didscroll = false;

this._init();
Expand All @@ -101,6 +101,8 @@
type: 'static',
// grid perspective value
perspective: 0,
// preserve-3d on container element
preserve3d: true,
// grid transform
transform: '',
// each grid item animation (for the subitems)
Expand All @@ -122,7 +124,7 @@
}
},
// callback for loaded grid
onGridLoaded : function() { return false; }
onGridLoaded : function() { return false; }
};

IsoGrid.prototype._init = function() {
Expand All @@ -134,22 +136,25 @@
itemSelector: '.grid__item',
isFitWidth : true
});

// the isolayer div element will be positioned fixed and will have a transformation based on the values defined in the HTML (data-attrs for the isolayer div element)
if( self.options.type === 'scrollable' ) {
self.isolayerEl.style.position = 'fixed';
self.isolayerEl.style.position = 'fixed';
}

// assign preserve-3d to isolayer div element
if (self.options.preserve3d) {
self.isolayerEl.style.WebkitTransformStyle = self.isolayerEl.style.transformStyle = 'preserve-3d';
}

self.isolayerEl.style.WebkitTransformStyle = self.isolayerEl.style.transformStyle = 'preserve-3d';

var transformValue = self.options.perspective != 0 ? 'perspective(' + self.options.perspective + 'px) ' + self.options.transform : self.options.transform;
self.isolayerEl.style.WebkitTransform = self.isolayerEl.style.transform = transformValue;

// create the div element that will force the height for scrolling
if( self.options.type === 'scrollable' ) {
self._createPseudoScroller();
}

// init/bind events
self._initEvents();

Expand Down Expand Up @@ -178,7 +183,7 @@
// insert it inside the main container (same level of isolayerEl)
this.isolayerEl.parentNode.insertBefore(this.pseudoScrollerEl, this.isolayerEl);
// set the height of the pseudoScroller (grid´s height + additional space between the top of the rotated isolayerEl and the page - value set for the translation on the Y axis)
this.pseudoScrollerEl.style.height = this.gridEl.offsetHeight + getComputedTranslateY(this.isolayerEl) * Math.sqrt(2) + 'px';
this.pseudoScrollerEl.style.height = this.gridEl.offsetHeight + getComputedTranslateY(this.isolayerEl) * Math.sqrt(2) + 'px';
};

/**
Expand Down Expand Up @@ -222,11 +227,11 @@
IsoGrid.prototype._expandSubItems = function(item) {
var self = this,
itemLink = item.querySelector('a'),
subItems = [].slice.call(itemLink.querySelectorAll('.layer')),
subItems = [].slice.call(itemLink.querySelectorAll('.layer')),
subItemsTotal = subItems.length;

itemLink.style.zIndex = item.style.zIndex = this.gridItemsTotal;

subItems.forEach(function(subitem, pos) {
dynamics.stop(subitem);
dynamics.animate(subitem, self.options.stackItemsAnimation.properties(pos), self.options.stackItemsAnimation.options(pos, subItemsTotal));
Expand Down Expand Up @@ -255,4 +260,4 @@

window.IsoGrid = IsoGrid;

})(window);
})(window);