Cycling Site Subtitles

Final Code & Installation Instructions

Complete & Continue Next Lesson Learn More

Cycle through multiple subtitles for your website as you hover over your site title of logo.

Directions:

  1. Paste in the Custom CSS to your Website » Website Tools » Custom CSS area.

  2. Paste in the Javascript to your Website » Website Tools » Code Injection Site Footer Code Injection area.

  3. In the javascript, replace the options array in with your comma separated list of subtitles. Keep each subtitle to a separate line, ending in a comma. Your text should be surrounded by single quotes (or single quotes, but keep consistent).

 

Installation Instructions

 

Cycling Site Subtitles

/**
* Cycling Site Subtitles
* From Will-Myers.com
**/
#header {
  --sub-font-size: 14px;
  --sub-mobile-font-size: 12px;

  --sub-font-family: var(--site-title-font-font-family);
  --sub-font-style: var(--site-title-font-font-style);
  --sub-font-weight: var(--site-title-font-font-weight);
  --sub-color: currentColor;
  --sub-text-transform: var(--site-title-font-text-transform);

  .cycle-subtitle {
    font-size: var(--sub-font-size);
    position: relative;
    display: block;
    font-family: var(--sub-font-family);
    font-weight: var(--sub-font-weight);
    color: var(--sub-color);
    text-transform: var(--sub-text-transform);
    font-style: var(--sub-font-style);
    line-height: var(--sub-font-size);
  }
  .cycle-subtitle span {
    display: block;
    animation: subtitleAnimateIn 0.3s ease forwards;
  }
  .header-display-mobile .cycle-subtitle {
    font-size: var(--sub-mobile-font-size);
    line-height: var(--sub-mobile-font-size);
  }
  @keyframes subtitleAnimateIn {
    from {
      transform: translateX(10px);
      opacity: 0;
    }
    to {
      transform: translateX(0px);
      opacity: 1;
    }
  }
}
 

Javascript

<!-- 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 currentIndex = getRandom(); // Initialize with the first option
    let canChangeSubtitle = true;

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

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

        subtitle.innerHTML = `<span>${newSubtitle}</span>`;
        mobileSubtitle.innerHTML = `<span>${newSubtitle}</span>`;
        currentIndex += 1; 
        canChangeSubtitle = false;
        setTimeout(() => {
          canChangeSubtitle = true;
        }, 500); 
      }
    }

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

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