انیمیشن زیبا برای گریدبندی تصاویر - Grid Loading Animations ( نمونه 3)

ساخت وبلاگ

;(function(window) {

/**

* GridLoaderFx obj.

*/

function GridLoaderFx(el, options) {

this.el = el;

this.items = this.el.querySelectorAll('.grid__item > .grid__link');

}

GridLoaderFx.prototype._render = function(effect) {

// Reset styles.

this._resetStyles();

var self = this,

effects = {

'Kek': {

sortTargetsFn: function(a,b) {

return b.getBoundingClientRect().left - a.getBoundingClientRect().left;

},

animeOpts: {

duration: 800,

easing: [0.1,1,0.3,1],

delay: function(t,i) {

return i * 20;

},

opacity: {

value: [0,1],

duration: 600,

easing: 'linear'

},

translateX: [-500,0],

rotateZ: [15,0]

}

}

},

effectSettings = effects[effect],

animeOpts = effectSettings.animeOpts

if( effectSettings.perspective != undefined ) {

[].slice.call(this.items).forEach(function(item) {

item.parentNode.style.WebkitPerspective = item.parentNode.style.perspective = effectSettings.perspective + 'px';

});

}

if( effectSettings.origin != undefined ) {

[].slice.call(this.items).forEach(function(item) {

item.style.WebkitTransformOrigin = item.style.transformOrigin = effectSettings.origin;

});

}

if( effectSettings.lineDrawing != undefined ) {

[].slice.call(this.items).forEach(function(item) {

// Create SVG.

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),

path = document.createElementNS('http://www.w3.org/2000/svg', 'path'),

itemW = item.offsetWidth,

itemH = item.offsetHeight;

svg.setAttribute('width', itemW + 'px');

svg.setAttribute('height', itemH + 'px');

svg.setAttribute('viewBox', '0 0 ' + itemW + ' ' + itemH);

svg.setAttribute('class', 'grid__deco');

path.setAttribute('d', 'M0,0 l' + itemW + ',0 0,' + itemH + ' -' + itemW + ',0 0,-' + itemH);

path.setAttribute('stroke-dashoffset', anime.setDashoffset(path));

svg.appendChild(path);

item.parentNode.appendChild(svg);

});

var animeLineDrawingOpts = effectSettings.animeLineDrawingOpts;

animeLineDrawingOpts.targets = this.el.querySelectorAll('.grid__deco > path');

anime.remove(animeLineDrawingOpts.targets);

anime(animeLineDrawingOpts);

}

if( effectSettings.revealer != undefined ) {

[].slice.call(this.items).forEach(function(item) {

var revealer = document.createElement('div');

revealer.className = 'grid__reveal';

if( effectSettings.revealerOrigin != undefined ) {

revealer.style.transformOrigin = effectSettings.revealerOrigin;

}

if( effectSettings.revealerColor != undefined ) {

revealer.style.backgroundColor = effectSettings.revealerColor;

}

item.parentNode.appendChild(revealer);

});

var animeRevealerOpts = effectSettings.animeRevealerOpts;

animeRevealerOpts.targets = this.el.querySelectorAll('.grid__reveal');

animeRevealerOpts.begin = function(obj) {

for(var i = 0, len = obj.animatables.length; i < len; ++i) {

obj.animatables[i].target.style.opacity = 1;

}

};

anime.remove(animeRevealerOpts.targets);

anime(animeRevealerOpts);

}

if( effectSettings.itemOverflowHidden ) {

[].slice.call(this.items).forEach(function(item) {

item.parentNode.style.overflow = 'hidden';

});

}

animeOpts.targets = effectSettings.sortTargetsFn && typeof effectSettings.sortTargetsFn === 'function' ? [].slice.call(this.items).sort(effectSettings.sortTargetsFn) : this.items;

anime.remove(animeOpts.targets);

anime(animeOpts);

};

GridLoaderFx.prototype._resetStyles = function() {

this.el.style.WebkitPerspective = this.el.style.perspective = 'none';

[].slice.call(this.items).forEach(function(item) {

var gItem = item.parentNode;

item.style.opacity = 0;

item.style.WebkitTransformOrigin = item.style.transformOrigin = '50% 50%';

item.style.transform = 'none';

var svg = item.parentNode.querySelector('svg.grid__deco');

if( svg ) {

gItem.removeChild(svg);

}

var revealer = item.parentNode.querySelector('.grid__reveal');

if( revealer ) {

gItem.removeChild(revealer);

}

gItem.style.overflow = '';

});

};

window.GridLoaderFx = GridLoaderFx;

var body = document.body,

masonry = [],

currentGrid = document.querySelector('.grid'),

// Choose effect buttons.

fxCtrl = document.querySelector('.control__btn'),

// The GridLoaderFx instances.

loadingTimeout;

function init() {

// Preload images

imagesLoaded(body, function() {

// Initialize Masonry on each grid.

var m = new Masonry(currentGrid, {

itemSelector: '.grid__item',

columnWidth: '.grid__sizer',

percentPosition: true,

transitionDuration: 0

});

masonry.push(m);

// Hide the grid.

currentGrid.classList.add('grid--hidden');

// Init GridLoaderFx.

loader = new GridLoaderFx(currentGrid);

// Show current grid.

currentGrid.classList.remove('grid--hidden');

// Init/Bind events.

initEvents();

// Remove loading class from body

body.classList.remove('loading');

});

}

function initEvents() {

// Effect selection.

fxCtrl.addEventListener('click', applyFx);

}

function applyFx(ev) {

// Simulate loading grid to show the effect.

clearTimeout(loadingTimeout);

currentGrid.classList.add('grid--loading');

loadingTimeout = setTimeout(function() {

currentGrid.classList.remove('grid--loading');

// Apply effect.

loader._render(ev.target.getAttribute('data-fx'));

}, 500);

}

init();

})(window);

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 339 تاريخ : چهارشنبه 28 تير 1396 ساعت: 22:25

خبرنامه