Scrollin’ & Scratchin’

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:

on scroll switch image.pubcoder

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)

on scroll switch image.xpub

Have fun! 😃

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