Image for post
Image for post

Scrollin’ & Scratchin’

Angelo Scicolone
Oct 13, 2017 · 2 min read

Today one of our users asked if the effect of this New York Times article, where things happen when the user scrolls the text in certain zones, can be replicated in PubCoder.

The short answer is yes, using a scrollable text box, a smart object and some action list objects.

The action list objects will contain whatever PubCoder actions you want to be performed when the active zones are reached, while the smart object will contain the code to execute them at the right time:

var previousScroll = 0;
var textbox = $("#obj4");
var actionList1 = $("#obj16");
var actionList2 = $("#obj6");
var actionList3 = $("#obj27");
var zones = [
{ start: 0, end: 800, actions: actionList1 },
{ start: 800, end: 1600, actions: actionList2 },
{ start: 1600, end: 9999, actions: actionList3 }
];
textbox.scroll(function() {
var actualScroll = textbox.scrollTop();
zones.forEach(function(zone) {
if ((actualScroll >= zone.start && actualScroll <= zone.end) && (previousScroll < zone.start || previousScroll > zone.end)) {
zone.actions.trigger(PubCoder.Events.Run);
}
});
previousScroll = actualScroll;
});

First, we save references to our text box and action list objects into some more human-readable variables. Then we define our list of scroll-active zones, each having a start/end interval (in pixels), and a corresponding action list to execute.

Finally, we attach a function to the scroll event of our text box, which will eventually trigger the zone’s actions when we scroll from one zone to another.

Here you can download the PubCoder project:

Here’s the same project exported as an XPUB that you can read on your mobile devices using PubReader (download it from App Store or Google Play)

Have fun! 😃

If you’re curious about the title of the article, it’s a tribute to Daft Punk’s Rollin’ & Scratchin’ 🤘

Inside PubCoder

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store