Rhye

# On Scroll Theme Change

To bring more attention to certain content, you can create a section with a color theme change effect when a visitor starts to scroll. Use the .section-scroll class to create that effect on a section.

# Markup

<section
  class="section section-scroll bg-white" 
  data-arts-theme-text="dark"
  data-arts-default-theme="bg-white"
  data-arts-scroll-theme-text="light"
  data-arts-scroll-theme="bg-dark-1"
  data-arts-scroll-trigger-hook="0.0"
  data-arts-scroll-offset="-100"
>
  ...
</section>
# Section Attributes
  • data-arts-theme-text – Default text color theme for the section. Can be dark or light.
  • data-arts-default-theme – Default background class of the section. Examples: bg-white, bg-dark-1, bg-light-3, etc.
  • data-arts-scroll-theme-text – Text color theme that the section will switch to on scroll. Can be dark or light.
  • data-arts-scroll-theme – Background class that the section will switch to on scroll. Examples: bg-light-2, bg-dark-3, etc.
  • data-arts-scroll-trigger-hook – A float number between 0.0 and 1.0 defining the position of the trigger hook in relation to the viewport.
  • data-arts-scroll-offset – Animation start vertical offset in pixels. Accepts both positive and negative values.

← Contact Form →