Customizing the Text Ticker in Sub-Zero

The text ticker in Sub-Zero is a vertically scrolling text that changes every few seconds before restarting again. This feature can be customized to adjust the scrolling speed and to allow for the ability to pause the text when your mouse hovers over it.

Adjusting the Speed of the Text Ticker

You can modify the text ticker speed as it scrolls by following these instructions:

  1. Open the style.css file in your code editor.
  2. Search for the following class: .text-ticker ul
  3. Modify the speed by changing the numeric value of the ticker.
  4. Save the style.css file and view the changes in your web browser.

Here is the original code before the change is made; the ticker changes after nine seconds:

.text-ticker ul {
    -webkit-animation:ticker 9s cubic-bezier(1, 0, .9, 0) infinite;
       -moz-animation:ticker 9s cubic-bezier(1, 0, .9, 0) infinite;
        -ms-animation:ticker 9s cubic-bezier(1, 0, .9, 0) infinite;
            animation:ticker 9s cubic-bezier(1, 0, .9, 0) infinite;
}

Here is the modified code; the ticker changes after five seconds:

.text-ticker ul {
    -webkit-animation:ticker 5s cubic-bezier(1, 0, .9, 0) infinite;
       -moz-animation:ticker 5s cubic-bezier(1, 0, .9, 0) infinite;
        -ms-animation:ticker 5s cubic-bezier(1, 0, .9, 0) infinite;
            animation:ticker 5s cubic-bezier(1, 0, .9, 0) infinite;
}

Pausing the Text Ticker on Mouse Hover

You can modify the text ticker to make the text pause as you hover over it with your mouse pointer by following these instructions:

  1. Open the style.css file in your code editor.
  2. Search for the following class: .text-ticker ul:hover
  3. Uncomment the code to enable the pausing feature.
  4. Save the style.css file and view the changes in your web browser.