Rhye

# On Scroll Theme Change

To bring more attention to a certain content you can create a section with color theme change effect when visitor is starting to scroll a section. Use .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 that section. Can be dark or light.
  • data-arts-default-theme – default background class of that section. Examples: bg-white, bg-dark-1, bg-light-3, etc.
  • data-arts-scroll-theme-text – text color theme that the section will switch on scroll. Can be dark or light.
  • data-arts-scroll-theme – background class that the section will switch 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 →