https://yazaar.github.io/js/index.js

1(function () {
2  function defaultedInt(raw, defaultValue) {
3    let v = parseInt(raw);
4
5    return Number.isNaN(v) ? defaultValue : v;
6  }
7
8  function setAge() {
9    var today = new Date();
10    var birthday = new Date('2001-01-28T23:00:00.000Z');
11    var yearToday = today.getUTCFullYear();
12    var thisYearBirthday = new Date(birthday).setUTCFullYear(yearToday);
13
14    var years = today.getUTCFullYear() - birthday.getUTCFullYear();
15    if (today - thisYearBirthday > 0) {
16      var lastBirthdayYear = yearToday;
17    } else {
18      var lastBirthdayYear = yearToday - 1;
19      years--;
20    }
21
22    var lastBirthday = new Date(birthday).setUTCFullYear(lastBirthdayYear);
23
24    var days = Math.floor((today - lastBirthday) / (1000 * 60 * 60 * 24));
25    var ageStr = years + ' (+' + days + ' days)';
26    var ageElement = document.querySelector('#age');
27    if (ageElement !== null) {
28      ageElement.innerText = ageStr;
29    }
30  }
31
32  document.querySelectorAll('.delayedCharAnimation').forEach((e) => {
33    const chars = e.innerText.split('');
34    e.innerHTML = '';
35
36    const step = defaultedInt(e.getAttribute('data-step'), 200);
37    const base = defaultedInt(e.getAttribute('data-base'), 500);
38
39    const duration = defaultedInt(e.getAttribute('data-duration'), Math.abs(step));
40    const endDuration = defaultedInt(e.getAttribute('data-endDuration'), duration);
41
42    for (let i = 0; i < chars.length; i++) {
43      let s = document.createElement('span');
44      const delay = base + step * i;
45      s.innerText = chars[i];
46      s.style.animationDelay = `${delay}ms`;
47      s.style.animationDuration = `${duration}ms`;
48      e.appendChild(s);
49    }
50
51    const delay = step > 0 ? base + step * chars.length : base + step * -1;
52    e.style.animationDelay = `${delay}ms`;
53    e.style.animationDuration = `${endDuration}ms`;
54  });
55
56  document.querySelectorAll('.name-switch').forEach((e) => {
57    let version = 0;
58    let isIn = true;
59
60    const onAnimationEnd = () => {
61      if (isIn) {
62        setTimeout(() => {
63          e.classList.remove('fadeInDown');
64          e.classList.add('fadeOutUp');
65        }, 3000);
66      } else {
67        e.classList.add('fadeInDown');
68        e.classList.remove('fadeOutUp');
69
70        version = (version + 1) % 2;
71        switch (version) {
72          case 0:
73            e.innerText = 'Yazaar';
74            break;
75          case 1:
76            e.innerText = 'Jesper';
77            break;
78        }
79      }
80      isIn = !isIn;
81    };
82
83    e.addEventListener('animationend', onAnimationEnd);
84    setTimeout(onAnimationEnd, Math.floor(Math.random() * 3000));
85  });
86
87  setAge();
88})();