109 lines
2.7 KiB
JavaScript
109 lines
2.7 KiB
JavaScript
var amator = require('../../index.js');
|
|
var queryState = require('query-state');
|
|
|
|
var qs = queryState({
|
|
text: 'hello world'
|
|
});
|
|
|
|
|
|
var currentUrl = document.getElementById('current-url');
|
|
var inputText = document.getElementById('text-input');
|
|
inputText.addEventListener('keyup', updateQueryState);
|
|
inputText.addEventListener('blur', updateQueryState);
|
|
inputText.addEventListener('keydown', handleKeyDown);
|
|
|
|
document.body.addEventListener('click', function() {
|
|
inputText.focus();
|
|
})
|
|
|
|
function handleKeyDown(e) {
|
|
updateQueryState();
|
|
if (e.which === 13) {
|
|
animateText(qs.get('text'));
|
|
currentUrl.focus();
|
|
currentUrl.select();
|
|
}
|
|
}
|
|
|
|
function updateQueryState() {
|
|
qs.set('text', inputText.value);
|
|
currentUrl.value = window.location.href;
|
|
}
|
|
|
|
function updateInputBox(appState) {
|
|
inputText.value = appState.name || '';
|
|
}
|
|
|
|
qs.onChange(function(appState) {
|
|
animateText(appState.text);
|
|
updateInputBox(appState.text);
|
|
});
|
|
|
|
var scene = document.querySelector('.scene');
|
|
animateText(qs.get('text'));
|
|
function animateText(text) {
|
|
var letters = [];
|
|
amator.sharedScheduler.clearAll();
|
|
scene.innerHTML = '';
|
|
|
|
Array.from(text).forEach(function (letter, idx, arr){
|
|
let wrapper = document.createElement('span');
|
|
wrapper.classList.add('letter')
|
|
wrapper.innerText = letter;
|
|
scene.appendChild(wrapper);
|
|
letters.push(wrapper);
|
|
var translateDirection = idx < arr.length / 2 ? -1 : 1;
|
|
scheduleAnimation(wrapper, translateDirection);
|
|
});
|
|
}
|
|
|
|
function scheduleAnimation(dom, translateDirection) {
|
|
var fadeOutAfter = Math.random() * 1500 + 500;
|
|
var fadeOutDuration = Math.random() * 2000 + 500;
|
|
var offsetLength = translateDirection * (Math.random() * 35 + 35);
|
|
|
|
|
|
setTimeout(fadeOutAnimation, fadeOutAfter)
|
|
setTimeout(moveOutAnimation, fadeOutAfter * 1.1)
|
|
setTimeout(blurAnimation, fadeOutAfter * 0.9)
|
|
|
|
function fadeOutAnimation() {
|
|
amator(
|
|
{ opacity: 1.0 },
|
|
{ opacity: 0. },
|
|
{
|
|
scheduler: amator.sharedScheduler,
|
|
duration: fadeOutDuration,
|
|
step: function(v) {
|
|
dom.style.opacity = v.opacity;
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
function moveOutAnimation() {
|
|
amator(
|
|
{ left: 0.0 },
|
|
{ left: offsetLength },
|
|
{
|
|
scheduler: amator.sharedScheduler,
|
|
duration: fadeOutDuration,
|
|
step: function(v) {
|
|
dom.style.transform = 'translateX(' + v.left + 'px)';
|
|
}
|
|
});
|
|
}
|
|
|
|
function blurAnimation() {
|
|
amator(
|
|
{ blur: 0.0 },
|
|
{ blur: 5 },
|
|
{
|
|
scheduler: amator.sharedScheduler,
|
|
duration: fadeOutDuration,
|
|
step: function(v) {
|
|
dom.style.filter = 'blur(' + v.blur + 'px)';
|
|
}
|
|
});
|
|
}
|
|
}
|