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

(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 11

size : 390,

weight : 10,

color: '#E65454',

duration: 0.8,

fade: 2,

delay: 0.1,

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')),

wordRect = word.getBoundingClientRect(),

wordWidth = wordRect.width,

wordHeight = wordRect.height,

letterOffsetPosition = 0;

timelines = new mojs.Timeline();

letters.forEach(function(letter, i) {

var letterRect = letter.getBoundingClientRect(),

letterWidth = letterRect.width,

letterHeight = letterRect.height,

letterWidthPercentage = letterWidth*100/wordWidth;

letterOffsetPosition += letterWidthPercentage;

var burst = new mojs.Burst({

parent: word,

duration: 1000,

delay: 600 + 115*i,

shape : 'circle',

fill : '#E65454',

x: letterOffsetPosition + '%',

y: randomIntFromInterval(20, 80) + '%',

childOptions: {

radius: {'rand(90,20)':0}

},

radius: {50:160},

opacity: 0.3,

count: randomIntFromInterval(5,20),

isSwirl: true,

isRunLess: true,

easing: mojs.easing.bezier(0.1, 1, 0.3, 1)

});

timelines.add(burst);

});

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});

});

})();

سون لرن • آموزش...