CoordiScroll

Scroll the Number Line

Try scrolling the number line!

See Creating Scroll Functions section for more information.

Default Scroll Functions and Their Usage

Proportional: `proportional`

Scrolls are coordinated by proportion of the scrollable content.

Relative Springy: `relSpring`

Relative springy scrolls the elements, keeping their intial offsets synced. When an element reaches an end, it stays at the end, but if a channel the element is listening to moves, it "springs" back to its synced position.

Start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque massa justo, eget mattis leo dapibus quis. In hac habitasse platea dictumst. Morbi sit amet volutpat elit, euismod suscipit felis. Nam eget luctus ligula. Praesent vehicula volutpat dui, ornare elementum neque aliquet in. Ut malesuada ante eu dapibus commodo. Quisque lorem turpis, posuere ut turpis eget, placerat porttitor elit. Quisque ultrices augue at tristique dapibus. Aenean eget turpis vitae nulla accumsan rutrum nec nec lacus. Proin quam leo, aliquam non tristique in, feugiat id tortor. Donec vel euismod turpis. Aliquam eu diam laoreet, imperdiet enim in, facilisis dolor. Phasellus et elit orci. Ut commodo lacinia urna sed interdum. Nam nec aliquet sem. Etiam tempor fringilla justo, in efficitur purus.

Pellentesque mattis, erat vel venenatis efficitur, sem nibh lacinia turpis, egestas aliquam magna nunc sit amet quam. Sed neque justo, commodo vel suscipit elementum, condimentum quis neque. Vivamus maximus et eros quis pellentesque. Etiam eleifend mauris lacus, sed consequat lectus viverra sit amet. Aliquam viverra viverra cursus. Curabitur lobortis dolor nec felis fermentum, nec scelerisque mi bibendum. Morbi quis est ultricies, pharetra nisi id, suscipit dolor. Sed fringilla condimentum scelerisque. Proin nec ligula enim. Nunc cursus luctus nisl vel pulvinar. In hac habitasse platea dictumst. Praesent tempor iaculis dui finibus dignissim. Cras consectetur sem a risus consectetur, eget ornare nulla convallis. Morbi mattis pulvinar mattis. Nullam fermentum condimentum ipsum, vulputate placerat tellus vehicula scelerisque. Aliquam gravida leo et purus consequat, a accumsan ipsum scelerisque. Pellentesque sit amet egestas sem. Maecenas et tortor non diam rhoncus maximus. Nam ultrices nisi ac risus iaculis sagittis. Vestibulum ac mattis magna. Duis laoreet aliquam cursus. Phasellus venenatis, nunc ut cursus fermentum, elit lectus iaculis ex, ut hendrerit lectus ante in odio. Vivamus sit amet ornare elit. Donec pharetra dolor est, at tempus massa dignissim quis. Phasellus sed ex ac augue convallis placerat maximus vitae risus. Sed rhoncus sapien tellus, sed iaculis ante molestie quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ultricies dignissim risus tincidunt pellentesque. Quisque accumsan luctus augue, sed semper nisl convallis lacinia. Fusce efficitur, eros eu pellentesque porta, sapien leo tincidunt dolor, et dignissim augue orci a arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis vestibulum aliquam. Maecenas consequat odio vitae sem molestie, sed rhoncus sem tincidunt. Quisque blandit sed leo eu blandit. Etiam nulla magna, ullamcorper in laoreet vel, varius vel nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim bibendum

turpis a vehicula. Sed vitae ultricies tellus. Fusce sagittis pharetra aliquet. Cras nec tincidunt tortor, id suscipit neque. Aliquam at orci ut enim tempor ornare in vel neque. Vivamus tempus dolor a quam maximus accumsan vitae tristique diam. Nulla commodo purus a accumsan ornare. Nunc rhoncus a nunc vel finibus. Nullam augue erat, convallis sed ultricies eget, condimentum non odio. Nullam lectus libero, blandit at scelerisque a, placerat in quam. Mauris at placerat arcu. In ac odio vitae eros consequat tincidunt. Curabitur viverra ut lacus at scelerisque. Quisque consectetur interdum dolor, nec aliquam purus faucibus a. Integer sit amet odio risus. Proin tincidunt et lectus vitae volutpat. Suspendisse viverra at velit et auctor. Donec tristique leo non erat maximus auctor. Phasellus dictum, eros vitae imperdiet molestie, sapien tellus vestibulum nulla, nec posuere leo ligula in augue. Nullam auctor ac est sit amet condimentum. Suspendisse condimentum libero vel mi ornare laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ac tincidunt lacus. Duis quis purus libero. Integer magna orci, auctor eget aliquet sit amet, feugiat eget ipsum. Suspendisse sed posuere tortor, nec aliquam arcu. Fusce consequat justo sed tincidunt condimentum. Sed in finibus orci, nec maximus augue.

End

Start

End

1. Integer magna orci

2. Curabitur viverra ut lacus at scelerisque. Quisque consectetur interdum dolor, nec aliquam purus faucibus a.

3. Nunc facilisis vestibulum aliquam. Maecenas consequat odio vitae sem molestie, sed rhoncus sem tincidunt.

4. Cras nec tincidunt tortor, id suscipit neque.

5. Sed fringilla condimentum scelerisque. Proin nec ligula enim.

Relative Loopy: `relLoop, relLoopDxy`

Relative Loopy also keeps initial offsets synced, but when an element reaches an end, it loops back to the other side.

Start

End

Start

End

1. Integer magna orci

2. Curabitur viverra ut lacus at scelerisque. Quisque consectetur interdum dolor, nec aliquam purus faucibus a.

3. Nunc facilisis vestibulum aliquam. Maecenas consequat odio vitae sem molestie, sed rhoncus sem tincidunt.

4. Cras nec tincidunt tortor, id suscipit neque.

5. Sed fringilla condimentum scelerisque. Proin nec ligula enim.

Relative Soft: `relSoft`

Relative soft keeps initial offsets synced until elements reach the end. If the user continues scrolling, the subscriber element will lose its offset.

Start

End

Start

End

1. Integer magna orci

2. Curabitur viverra ut lacus at scelerisque. Quisque consectetur interdum dolor, nec aliquam purus faucibus a.

3. Nunc facilisis vestibulum aliquam. Maecenas consequat odio vitae sem molestie, sed rhoncus sem tincidunt.

4. Cras nec tincidunt tortor, id suscipit neque.

5. Sed fringilla condimentum scelerisque. Proin nec ligula enim.

In addition there are several more default scroll functions defined in scrollfuncs.js!

Creating Scroll Functions

A scroll function returns x and a y position where the element will scroll to. Scroll functions activate when the channel the element's account is subscribed to broadcasts a message. You can think of it as $x_{el}, y_{el} := f(x_{msg}, y_{msg})$ . For the number line demo we are only using the x scroll, so you can think of msg.x as the $t$ in a parametric equation.

Don't forget that the y axis starts from the top left, and consider any possible unit conversions. Check out scrollfuncs.js to see how the default scroll functions are implemented.

Scroll the Number Line

Default Scroll Functions and Their Usage

Proportional: proportional

Relative Springy: relSpring

Start

End

Start

End

Relative Loopy: relLoop, relLoopDxy

Start

End

Start

End

Relative Soft: relSoft

Start

End

Start

End

Creating Scroll Functions

Start

End

Proportional: `proportional`

Relative Springy: `relSpring`

Relative Loopy: `relLoop, relLoopDxy`

Relative Soft: `relSoft`