On-scroll Color Theme Switch

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-theme-switch class to create this effect on a section.

Markup

<section
  class="section section-scroll-theme-switch bg-white-1"
  data-arts-theme-text="dark"
  data-arts-default-theme="bg-white-1"
  data-arts-scroll-theme="bg-dark-2"
  data-arts-scroll-theme-text="light"
  data-arts-scroll-offset="200"
  data-arts-scroll-trigger-hook="center"
>
  ...
</section>

Attributes

• data-arts-theme-text [ dark | light ] – Default text color theme for the section.
• data-arts-default-theme [ bg-white-1 | class name ] – Default background class of the section.
• data-arts-scroll-theme [ bg-dark-2 | class name ] – Background class that the section will switch to on scroll.
• data-arts-scroll-theme-text [ dark | light ] – Text color theme that the section will switch to on scroll.
• data-arts-scroll-offset [ 200 | integer ] – Vertical offset for the animation start in pixels. Accepts both positive and negative values.
• data-arts-scroll-trigger-hook [ center | top | bottom ] – Defines the position of the animation trigger hook in relation to the viewport.

Showcase

• 📄 017-portfolio-details-masthead-fullwidth-horizontal.html
• 📄 021-portfolio-details-masthead-boxed-vertical.html