Product Tape, rows of products that the scrolling page pushes

How it moves

Each row is a looping ticker with its own direction. The page's scrolling adds to the speed, and what is being pushed gives way a little, as the images stretch and split with the speed and settle when the page stops. Pointing at a row slows it to a quarter of its speed, so that a shopper can aim at the button. Scroll direction turns all rows round.

What you can set

The source of products, as in the Product Slider, up to the count you want; how many rows; the angle (0 for straight, about -7 for tilted); the speed; how much the scrolling pushes; and the size of a card as a share of the screen's width. Start with 18 products in three rows. With few products the repeats become obvious, and two rows work better.

Where to put it

Full width, between two calmer sections, on a long page people scroll anyway: a home page or a campaign. It does not suit a category page, where people want to compare products in a fixed order, since nothing here stays put. For that, use a Morph Grid or the normal shop list. See the tilted wave for the angled version people tend to stop at.

For visitors who asked for less motion

The rows then stand still and scroll by hand, with everything still clickable. Without JavaScript they are also plain rows that scroll, and the prices and buttons are part of the HTML, so search engines and visitors both see the same products.

Questions