spz-interact-observer#

#When to use

spz-interact-observer observes scroll or mousemove interactions and applies CSS transform effects (parallax, sticky positioning, hover 3D, etc.) to a target element.

Use it when you need to:

• Create parallax scroll effects (translate, scale)
• Implement sticky header / footer that stacks with other sticky elements
• Add 3D tilt effects on mouse hover
• Toggle element visibility based on scroll distance

#Supported layout

• All layouts are supported

#Usage

<!-- Parallax: translate the target as the user scrolls -->
<spz-interact-observer
  target-id="hero-image"
  from="translateY:0"
  to="translateY:-100"
  smoothness="20"
  layout="nodisplay">
</spz-interact-observer>

#Example

#Scroll parallax

<div id="parallax-target">I move with the scroll</div>
<spz-interact-observer
  target-id="parallax-target"
  from="translateY:0;scaleX:1"
  to="translateY:-80;scaleX:1.1"
  smoothness="25"
  layout="nodisplay">
</spz-interact-observer>

#Sticky positioning

<div id="sticky-bar">Sticky bar</div>
<spz-interact-observer
  target-id="sticky-bar"
  to="position:top"
  layout="nodisplay">
</spz-interact-observer>

#Rely on another sticky element

<div id="primary-header" style="position:sticky;top:0;">Header</div>
<div id="sub-nav">Sub-navigation</div>
<spz-interact-observer
  target-id="sub-nav"
  observe-id="primary-header"
  to="position:top"
  layout="nodisplay">
</spz-interact-observer>

#Mousemove 3D tilt

<div id="card">Hover me</div>
<spz-interact-observer
  target-id="card"
  interact="mousemove"
  to="rotateX:15;rotateY:15"
  layout="nodisplay">
</spz-interact-observer>

#Scroll-distance toggle (show/hide elements)

When from and to are not transform properties but elementId.attributeName pairs, the component toggles boolean attributes on those elements based on scroll distance.

<div id="list">Main content</div>
<div id="list1" hidden>Alternate content</div>
<spz-interact-observer
  target-id="list"
  from="list.show;list1.hide"
  to="list.hide;list1.show"
  layout="container">
</spz-interact-observer>

#Attributes

#Supported transform properties

translateX, translateY, translateZ, scaleX, scaleY, rotateX, rotateY, rotateZ

#Actions

#change

Recalculate position based on the observe-id / rely-id element. Useful when the observed element's size changes dynamically.

Example:

<button @tap="observer.change">Recalculate</button>

#Behavior

1. Parallax mode — When both from and to contain transform properties (e.g. translateY, scaleX), the component interpolates between them as the element scrolls through the viewport.
2. Sticky mode — When to contains position:top or position:bottom, the component manages sticky visibility and stacks with other sticky elements.
3. Rely/observe mode — When observe-id or rely-id is set, the target element's top/bottom offset is adjusted based on the observed element's height and sticky state.
4. Scroll-distance mode — When from/to are not transform properties, the component toggles boolean attributes on referenced elements based on scroll distance.
5. Mousemove mode — When interact="mousemove", the component applies 3D rotation and translation based on cursor position within the target element.

#Notes

• This component does not emit custom events.
• In mousemove mode, transforms reset to none on mouseout.
• iOS Safari bottom bar compensation is automatically applied in bottom-sticky mode.