44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const title = document.querySelector('#title');
|
|
const subtitle = document.querySelector('#subtitle');
|
|
const blahaj = document.querySelector('#blahaj');
|
|
|
|
function handleClick() {
|
|
// Move elements up and fade them out
|
|
title.animate(
|
|
[
|
|
{ transform: 'translateY(0)', opacity: 1 },
|
|
{ transform: 'translateY(-50px)', opacity: 0 }
|
|
],
|
|
{ duration: 1000, easing: 'ease-out', fill: 'forwards' }
|
|
);
|
|
|
|
subtitle.animate(
|
|
[
|
|
{ transform: 'translateY(0)', opacity: 1 },
|
|
{ transform: 'translateY(-50px)', opacity: 0 }
|
|
],
|
|
{ duration: 1000, easing: 'ease-out', fill: 'forwards', delay: 200 }
|
|
);
|
|
|
|
blahaj.animate(
|
|
[
|
|
{ transform: 'translateY(-50px)', opacity: 0 },
|
|
{ transform: 'translateY(-0px)', opacity: 1 }
|
|
],
|
|
{ duration: 500, easing: 'ease-out', fill: 'forwards', delay: 400 }
|
|
);
|
|
|
|
// Remove the event listener after it has been triggered
|
|
document.body.removeEventListener('click', handleClick);
|
|
|
|
title.addEventListener('animationend', function () {
|
|
title.remove();
|
|
});
|
|
|
|
subtitle.addEventListener('animationend', function () {
|
|
subtitle.remove();
|
|
});
|
|
}
|
|
});
|