استایل زیبا برای منوی خطی - AnimatedLetters ( نمونه 9)

(function() {

/**

* checks if a number is Odd

*/

function isOdd(n) {

retu Math.abs(n % 2) == 1;

}

/**

* retus a random number between min and max

*/

function randomIntFromInterval(min,max) {

retu Math.floor(Math.random()*(max-min+1)+min);

}

var word = document.querySelector('.list__text'),

playCtrl = document.querySelector('.control__button--play'),

myText = new Letters(word, { // word 9

size : [400,300,200,100],

weight : [28,23,18,13],

color: '#41424C',

duration: [1.1,1.2,1.3,1.4],

delay: 0.05,

fade: 1.5,

easing: d3_ease.easeExpInOut.ease

}),

endPlayCallback = function() {

playCtrl.className = 'control__button control__button--play';

word.setAttribute('data-state', 'stop');

};

// show word

myText.showInstantly();

// moo.js configurations for some of the buttons

var timelines = {};

var letters = [].slice.call(word.querySelectorAll('svg')),

lettersTotal = letters.length,

distanceFactor = 40;

timelines = new mojs.Timeline();

letters.forEach(function(letter, i) {

var ty = -1 * distanceFactor * (lettersTotal - i)

tween = new mojs.Tween({

duration : 2000,

delay: 50 + 50*i,

easing: mojs.easing.elastic.out,

onUpdate: function(progress) {

letter.style.WebkitTransform = letter.style.transform = 'translate3d(0,' + ty * (1-progress) + '%,0)';

}

});

timelines.add(tween);

});

playCtrl.addEventListener('click', function() {

if( word.getAttribute('data-state') === 'play' ) {

retu false;

}

word.setAttribute('data-state', 'play');

playCtrl.className = 'control__button control__button--play control__button--active';

myText.hideInstantly();

timelines.start();

myText.show({callback : endPlayCallback});

});

})();