Floating | Tuff Docs

Usage

Basic

depth sets how far a layer moves, sensitivity scales all of them, and easingFactor sets how quickly they follow.

Loading demo...

Disable Motion

disabled stops the listeners and the animation frame and resets every layer's offset to zero.

<template>
  <TxFloating :disabled="paused">
    <TxFloatingElement class-name="hero-card" :depth="0.08">
      Content
    </TxFloatingElement>
  </TxFloating>
</template>

Opposite Direction Layers

A negative depth moves opposite to a positive one.

<template>
  <TxFloating class-name="scene" :sensitivity="1.2">
    <TxFloatingElement class-name="background" :depth="-0.04" />
    <TxFloatingElement class-name="foreground" :depth="0.1" />
  </TxFloating>
</template>

Best Practices

Use it only for decorative parallax, guide cards, or background accents; never make critical layout depend on pointer movement.
Keep layers few; each one updates on every frame while moving.
Keep depth low for restrained motion; large values make the interface feel detached.
Give layers their static position with classes; the component only adds a transform.
Keep interactive controls out of fast-moving layers.

API Reference

TxFloating

Props

Prop	Type	Default	Description
`className`	`string`	`''`	Extra class for the container.
`sensitivity`	`number`	`1`	Overall movement multiplier.
`easingFactor`	`number`	`0.05`	Share of the remaining distance covered each frame.
`disabled`	`boolean`	`false`	Stops motion and resets registered layers' transforms.

Slots

Slot	Description
`default`	Floating layers and scene content.

TxFloatingElement

Props

Prop	Type	Default	Description
`className`	`string`	`''`	Extra class for the absolutely positioned layer.
`depth`	`number`	`1`	Movement depth; negative values move against the pointer.

Slots

Slot	Description
`default`	Layer content.

Overview

TxFloatingElement registers with TxFloating on mount, re-registers when depth changes, and unregisters on unmount; outside a TxFloating it renders but never moves.
Pointer coordinates are measured from the container's center; each frame eases layers toward pointerPosition * (depth * sensitivity / 20) by easingFactor.
With disabled or reduced motion, listeners and the animation frame stop and offsets reset to translate3d(0px, 0px, 0).
Animation pauses while the container is off-screen; the origin is re-measured after page scroll or resize.

Technologies

The animation loop runs only while a layer is still travelling and parks once all settle; window listeners are passive and guarded by hasWindow() for SSR.
Source: packages/tuffex/packages/components/src/floating/.

查看源码

packages/tuffex/packages/components/src/floating/index.ts