Doc Section: Customization
Styling
Class names follow BEM with the vlt- prefix (block vlt-layer-menu). The plugin stylesheet contains structure only, so the menu inherits your fonts and colors. Class Element .vlt-layer-menu The container .vlt-layer-menu--clip Container modifier when clip: true .vlt-layer-menu__panel Every level (<ul>) .vlt-layer-menu__panel--root / --leaving The root level / the level leaving during a transition .vlt-layer-menu__item / __item--parent...
Custom animations
Describe the forward move. in is for the opening level, out is for the level that leaves. Going back plays both reversed.
Animations
Name Effect slide (default) Horizontal slide with fade slideZoomIn Slide + zoom in slideZoomOut Slide + zoom out roll Rolls in like a wheel shiftUp Moves through depth (Z axis) cube Rotating cube face fade Fade with scale (1.x name fadeIn still works) slideBackLayer New level slides over, the old one falls back blur Short...
Colors
Accepted formats #rgb, #rgba, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), hsla(), oklch(), oklab(), named colors (tomato) and transparent. Both comma and space syntax work. One property Plain strings animate options.property, which defaults to background-color: new SmoothBackground('.title', { property: 'color', colors: ['#111', '#D4E66A'] }); Several properties at once Use objects. Keys can be kebab-case ('border-color'), camelCase (borderColor)...
Modes
Loop (default) Cycles through the colors over time. new SmoothBackground('.hero', { colors: ['#D4E66A', '#B6CEDD', '#2A3240'], duration: 1500, hold: 1000, easing: 'ease-in-out', direction: 'alternate', // 'normal' | 'reverse' | 'alternate' | 'random' iterations: Infinity, // or a number of full cycles }); Scroll Color follows scroll progress. The first color is shown at 0% and the...
