Inside PubCoder
Published in

Inside PubCoder

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:

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’ 🤘

--

--

--

Stories, tips and tricks from the people that design and develop PubCoder every day

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
Angelo Scicolone

Angelo Scicolone

Founder & Lead Developer @ PubCoder

More from Medium

Password Validations in Rails

Quick Reference for Filter Modes in Unity3D

Celebration Of Holi with Slum Kids

Event-Driven Rock Pushing in RPG Maker MV/MZ