Dynamically switching the color palette used on a page can make for a really interesting experience for the user, raising visual interest and offering the designer some very novel possibilities. View demo.
In Palette stack's Advanced settings, the option to activate this feature can be toggled on.
With this option active, the page will observe the content for sections with a particular value coming into view in the viewport. When this is triggered the active palette will be switched to the newly specified one.
For this to work a custom attribute has to be added to sections on the page to specify where the change should happen and also to what palette the switch should be made. For example, by adding data-theme="palette1" to the data-attributes field of a Container stack, a switch to Palette 1 will be triggered when the section moves into view. All of Source's container stacks have the option to add a data attribute. An alternative to this approach is to simply add <div data-theme="palette1"></div> to an html stack. The only difference between these 2 approaches is that the html stack will be a single trigger point whereas the full container is the trigger when using a container (and the trigger only activates when the specified amount / threshold of that container has entered the viewport).
Transitions
When using this option it will make sense to activate one of the Transition options so that the switch between palettes is nice and smooth. You can opt to use a 'Targeted' approach or a 'Blanket' approach. Targeted is recommended as it provides more focused rules for what elements should be transitioned. The blanket approach is far less efficient as it targets everything (though a performance hit would likely only be noticed on very large pages).
When using Targeted then 2 class names become available for use: pal-trans and pal-trans-all. pal-trans can be added to any element that will switch colours when the palette changes - it will affect only that element. pal-trans-all will activate a transition for all content within the stack that the class is added to.
If using the Targeted approach in the Source Palette stack then most elements that would need to be targeted will automatically be set. As such you would only need to use the above class names (or your own CSS) to include any additional elements where you would like the transition to be smoother. If using the F6 Palette stack then you may find manually adding your own custom css / swatches to handle the color transitions to be easiest.
