Zero Block / Custom Code / Adaptive Mechanics

Technical demo for
Tilda Zero Block

Sticky step-by-step section, vanilla JS magnetic interaction, scroll-driven marquee and adaptive layered composition.

Block 01 / Sticky Step-by-Step

The right side moves vertically according to scroll progress. The active heading is calculated from the section progress, not from arbitrary timeouts.

Step 01

Clean layout

Two-column composition with sticky behavior.

Step 02

Scroll progress

Transform-based movement without layout thrashing.

Step 03

Mobile logic

On mobile the section becomes horizontal cards.

Block 01 / Mobile Alternative

Step-by-step as horizontal cards

On mobile, sticky pin-scroll is replaced with horizontal scrolling for better browser stability and touch interaction.

01

Structure

Stable layout for small screens.

02

Motion

Native horizontal scroll instead of heavy pinning.

03

Adaptive

Readable cards without broken viewport behavior.

Block 02 / Vanilla JS + CSS

Magnetic button
and smart marquee

The button reacts to cursor proximity. The marquee changes direction depending on scroll direction and accelerates according to scroll velocity.

Implementation detail

The magnetic effect uses distance from cursor to button center. Movement is applied only via transform, so it does not trigger layout recalculation.

ZERO BLOCK / CUSTOM CODE / RESPONSIVE / VANILLA JS / ZERO BLOCK / CUSTOM CODE / RESPONSIVE / VANILLA JS / ZERO BLOCK / CUSTOM CODE / RESPONSIVE / VANILLA JS / ZERO BLOCK / CUSTOM CODE / RESPONSIVE / VANILLA JS /
Block 03 Adaptive layered composition

Layered visual
system

Photo 01
Photo 02
Photo 03
Photo 04
Delivery note

The second block is implemented with isolated vanilla JavaScript: the magnetic button calculates cursor distance from the element center and moves only with transform. The marquee reads scroll direction and velocity from scrollY changes, then updates movement inside requestAnimationFrame.