PlaxBone Readme

PlaxBone is minimalist parallax plugin. Clarification for job interview: All the code except code in vendor folder is written by Konstantin Kirillov. Code in vendor/btb is also fully Konstantin's. Live and most recent version is at landkey.net/sand/zz/plaxbone

Concept

User can scroll web page using any tools: scrollbar, drag, touch-drag. Plugin calculates position of the viewport ( plainly browser window ) and detects visibility of paralax-frame { pframe }. If pframe is visible, plugin calculates %-phase of visibility and positions child elements of pframe according parallax-scenario. Plugin is configurable through HTML attibutes prefixed with data-config-... prefix. Plugin is fully responsive and adjusts width and hight of pframes. However, web-master is responsible in setting aspect-ratio for pframe. Automation of aspect-ratio is possible, but scheduled in next versions of plugin. "Realistic" parallax ( scaling by depth according the distance ) is scheduled in next versions of plugin. It is felt that there is a lot of "room" to improve the performance, but perhaps in next versions.

Demos

Default options. With translate3d and af-throttler. See frame timings from Google timelines No throttle. Not good for Andr ... Best for Android 2.3.5: timedelay = 10 ms and no AnimationFrame. Timedelay throttle. You can see JavaScript debug messages right over mobile screens. Timedelay throttle, debug. This link has video adopted to Android 2.3.5 by converting from another mp4 video. This video cannot be played on FF. Fallback to FF is added as a second choice. video for Android 2.3.5 with controls. video for Android 2.3.5 no controls.

Optional Features

There are few optional features added to plugin. 1. animationFrame. It is widely discussed that using request/cancel AnimationFrame improves performance. requestAnimationFrame mode is a hard-coded default. This code is in: vendor/btb/throttled-animation-frame.js 2. web-master can disable animationFrame and even disable throttling at all. For example, animationFrame fails on "mainstream" Android 2.3.5. The best mode for this Android is data-conf-app='{ "antichoking":"timedelay", "antichoking-delay":10 }' See demo. 3. Web master can set "parallax-up", left, right by adding "speed" parameter with corresponding negative or positive values. All the *.html front pages call the same JavaScript Application. The differences in configuration are only in HTML-script itself. These differences are scripted in attribute data-conf... There are two data-conf... attributes. data-conf and data-conf-app For example in file: index-timedelay-throttle.html default settings are overriden with attributes. For example: data-conf='{ "perspective": 100, "aratio":1.5 }' and data-conf-app='{ "antichoking":"timedelay", "antichoking-delay":10 }' >

Configuration

Page pattern is "parent-HTML-element" which is a parallax frame and "children-HTML-elements" which are actual sprites which move accoring parallax scenario "distance": XXXX and perspectiv: YYYY define sliding speed, "speed:[X, Y, Z] is a speed relative to page-body, it adds up on "top" of native parallax speed; in other words setting speed to [0,0,0] enables natural parallax speeds; example: <div data-conf='{ "aratio":1.5 }' data-conf-app='{ "antichoking":"animFrame" }' ... <div data-conf='{}' style='background-image:url("../img/buildings.png"); background-size:cover; ' ... <div data-conf='{ "distance": 0.8, "phase0":[0, 0.25] }' style='background-image:url("../img/post.png"); background-size:cover; ' <div data-conf='{ "speed":[0, 1, 0] }' ...

* setting
class="parallax-frame"
makes html-element a parallax-frame

Change log