Lesson 6: Mobile Styles & Random Subtitles (5:20)

<!-- Subtitle Cycle from Will-Myers.com -->
<script>
(function() {
    const options = [
      "Sed hendrerit.",
      "Vivamus laoreet.",
      "In ut quam vitae odio lacinia tincidunt.",
      "Etiam feugiat lorem non metus.",
      "Duis leo."
    ];

    //Build Subtitle Element
    const siteTitle = document.querySelector('.header-display-desktop #site-title') || document.querySelector('.header-display-desktop .header-title-logo');
    const mobileSiteTitle = document.querySelector('.header-display-mobile #site-title') || document.querySelector('.header-display-mobile .header-title-logo');
    const subtitle = document.createElement('div');
    subtitle.classList.add('cycle-subtitle');
    const mobileSubtitle = subtitle.cloneNode(true);
    siteTitle.append(subtitle);
    mobileSiteTitle.append(mobileSubtitle);

    // Get Random subtitle each time page loads, great for touch devices
    const getRandom = () =>  Math.floor(Math.random() * (options.length - 1));
    let index = getRandom(); // Initialize with the first option
    let canChangeSubtitle = true;

    const setNewSubTitle = () => {
      if (canChangeSubtitle) {

        if (index > options.length - 1) { index = 0 }
        let newSubtitle = options[index];

        subtitle.innerHTML = '<span>' + options[index] + '</span>';
        mobileSubtitle.innerHTML = '<span>' + options[index] + '</span>';
        index += 1; 
        canChangeSubtitle = false;
        setTimeout(() => {
          canChangeSubtitle = true;
        }, 500);
      }
    }

    siteTitle.addEventListener('mouseenter', setNewSubTitle);
    mobileSiteTitle.addEventListener('mouseenter', setNewSubTitle);

    setNewSubTitle();
}());
</script>

.cycle-subtitle {
  font-size: 14px;
}
.cycle-subtitle span {
  display: block;
  animation: subtitleAnimateIn 0.3s ease forwards;
}

@keyframes subtitleAnimateIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}