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:
- Open the jquery.main.js file in your code editor.
- Search for the text rotation section (section 1.3).
- Search for the following variable: var rotator_words
- Customize each sentence. If you need less than four, simply comment out the unnecessary sentences.
- 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:
- Open the jquery.main.js file in your code editor.
- Search for the text rotation section (section 1.3).
- Search for the following the .title-hero class (that’s calling the fadeOut function).
- 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.
- Save the jquery.main.js file and view the changes in your web browser.