Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
BrochurePhone tour

Phone tour

A phone between its selling points. Each point is a button that swaps the phone to its own screen, and the tour moves on by itself.

<koala-phone-tour>

Tour

Each koala-phone-tour-item takes a title and a lead, and its child content is the screen the phone shows while it is chosen. The first half of the items sit to the left of the phone and the rest to the right from lg; below it the phone leads and the items follow. The chosen item carries a bar that fills while its screen plays: the tour reads each screen's longest sequence, adds a short hold, and moves on when the bar is full, so a screen always finishes before the next one starts. A screen with no sequence stays for interval. The screen and its bar restart together on a click and whenever the tour scrolls back into view, and under reduced motion the tour waits for a click. It needs mockup-sequence.js.

API

interval milliseconds an item whose screen has no sequence stays chosen (default 6000)
class merged onto the tour, e.g. mt-12 lg:mt-16
koala-phone-tour-item title text
koala-phone-tour-item lead text