This is a scroll and background color animation. Add ".bg-changeable" to any element and add "data-background-color-selector" to the sections. The background color of the element will vary with the visible area.

You can add this feature to any element you want. And you can change the color according to the element you want on the screen.

You can use this feature in every element. We recommend to use on fixed elements or body & main sections.

You can add data-background-color-selector attribute to any element. And when that element appears, elements with the ".bg-changeable" class appear in any color you want.

The heights of these areas are not important. If you use this feature on the "body" as in this template, the elements on it must be transparent. You can use elements such as PNG, SVG above these sections.

You do not need to set any CSS or Javascript to use this feature on your website. Quadra users can only use the ".bg-changeable" class and the "data-background-color-selector" attributes. It will work directly.

When changing color with animation, we recommend that there is more space between elements than a screen. Then this feature will work more accurately and provide a smoother experience for the browser.

Please be free to ask any questions you may have. You can always contact our support team and get support on all Quadra related issues. We'il always be here for help.

Please tell us if you want to see more creative elements in Quadra. We really care about it.
website logo template
Drop us a message

You're at the right place now! How can we help?