wagerfield/parallax
Parallax
Parallax is a device motion parallax engine and interactive depth effect library. It provides the core logic and interfaces necessary to simulate visual depth by shifting scene layers based on a smart device gyroscope or mouse movement.
The system functions as a device orientation controller that maps physical device rotation and cursor position to programmatic offsets. It distinguishes itself through a motion interface that handles relative orientation calibration, allowing the engine to calculate movement based on a cached starting position.
The library covers motion behavior configuration, including the tuning of friction, axis limits, and movement speed. It includes mechanisms for layer selection using CSS selectors and controls to manage whether scenes respond to pointer events.
Features
- Parallax Layering Systems - Provides a system for offsetting multiple scene layers based on device orientation or mouse movement to simulate visual depth.
- Motion Physics Configurations - Provides programmatic settings to adjust speed, range, friction, and axis limits of layer movement.
- Dynamic Depth Simulations - Offsets multiple image layers at different speeds to create a sense of distance and perspective.
- Interactive Depth Effect Libraries - Provides a set of tools for creating multi-layered visual experiences that react to hardware motion sensors.
- Parallax Layering Offsets - Implements depth simulation by shifting multiple scene elements at varying speeds relative to input movement.
- Sensor-Driven Coordinate Mappings - Translates real-time device orientation data into precise pixel offsets for elements within a scene.
- Physics and Motion Dynamics - Provides tools to tune movement feel using friction and range limits to simulate physical motion dynamics.
- Background Effects - Builds layered backgrounds that react to mouse cursor movement to simulate a three-dimensional space.
- Gyroscope Motion Interfaces - Maps physical device orientation and rotation to programmatic movement and offsets in a web scene.
- Device Orientation Controllers - Manages calibration, friction, and axis limits for elements reacting to physical device movement.
- Input Binding Libraries - Binds motion effects to specific elements, the gyroscope, or the mouse cursor using clipping constraints.
- Relative Orientation Calibrations - Calculates movement by comparing current sensor readings against a cached initial starting position.
- Mobile Motion Effects - Creates visual depth in mobile web pages by moving layers based on the device gyroscope.
- Gyroscope-Driven Interfaces - Enables the development of interfaces that respond to physical device tilting and rotation for immersion.
- Input-Agnostic Motion Bindings - Abstracts movement sources so the same animation logic works for both gyroscopes and mouse cursors.
- Motion Sensor Readers - Utilizes motion sensor reading capabilities to cache initial orientation for relative movement calculations.
- Scroll Effects - Parallax engine reacting to device orientation.
- 视差滚动(Parallax Scrolling) - Listed in the “视差滚动(Parallax Scrolling)” section of the Awesome Frontend awesome list.
- Scrolling Effects - Parallax engine for smart devices.
