Scroll & Hover Text (WIP)

The Scroll & Hover Text widget connects important headline text on your site to the site visitor's scrolling action. As the visitor scrolls, text is revealed across the screen in dramatic fashion.


Also, when the site visitor hovers over lines of text, the text is highlighted and alternate text is displayed while hovered. This effect is great for displaying descriptive adjectives, important mottos, or just getting customers excited about products or services.


Preview: https://demo.wocode.com/scroll-and-hover-text

TUTORIAL VIDEO

SETUP

WIDGET PLACEMENT

  • Drop the widget onto your site and place it in a row where you would like the Scroll & Hover Text widget to be seen.

WIDGET OPTIONS

  • Open the widget option panel.

  • Text Items: Within this section, you can add the text items along with their corresponding hover label and link:

    • Text Item Label: The default visible text for this label.

    • Hover Text Item Label: The text that appears when the label is hovered.

    • Text Item Link:  The link associated with the label when clicked.


  • Add Item: Adds additional labels to the text items list.


  • Scrolling Settings: This section controls the scrolling behavior of the widget.

    • Scroll Trigger Position: Determines the specific point within the text that serves as the trigger for the animation. 

    • Scroll Trigger Speed: Sets the speed in which the scroll trigger will begin animating the next label on the page.

    • Debug Markers: Debug markers serve the purpose of visually indicating where the widget’s scroll animations will take place on the page.


DESIGN SETTINGS

The Design section allows you to customize the look and feel of the Scroll & Hover Text. Most of these options are related to padding and text styling and are self explanatory. However, there are a number of design options worth mentioning specifically.

  • Widget Styling: This section controls the styling for the widgets container.

    • Background Color: Sets the background color that is visible behind the text within the widget.


  • Text Item Styling: This section controls the styling for the text in the widget.

    • Scroll Animation Color Left: Sets the color on the left side of the text overlay during page scrolling.

    • Scroll Animation Color Right: Sets the color on the right side of the text overlay during page scrolling.

    • Text Hover Background Color: Determines the background color when the text is hovered.

    • Hover Text Styling > Font Color: Specifies the text color within the widget during hover.