Managing the Hero Text in Hydro

Hydro has a JavaScript-controlled text rotator in the .hero section of the HTML files. This rotator allows you to display different sentences for a few seconds before transitioning to a different sentence.

Modifying the Hero Text

You can modify the .hero text by following these instructions:

  1. Open the jquery.main.js file in your code editor.
  2. Search for the text rotation section (section 1.3).
  3. Search for the following variable: var rotator_words
  4. Customize each sentence. If you need less than four, simply comment out the unnecessary sentences.
  5. Save the jquery.main.js file and view the changes in your web browser.

Adjusting the Text Rotation Speed

The text rotator is pre-configured to change every three seconds in Hydro. You can adjust the rotation speed by following these instructions:

  1. Open the jquery.main.js file in your code editor.
  2. Search for the text rotation section (section 1.3).
  3. Search for the following function: $(“.title-hero”).fadeOut(function()
  4. Change the default value of 3000 to a new value. For example, if you want to slow down the speed to five seconds, change 3000 to 5000.
  5. Save the jquery.main.js file and view the changes in your web browser.
Tagged: