Browsing Posts in UI / Front-End

Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the ) and do totally rad things. IE dropped that.

These days, customizing scrollbars is back, but it's WebKit this time. It's a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the "Shadow DOM". This has been around for a couple of years. David Hyatt blogged it in early 2009 and put together an example page of just about every combination of scrollbar possibilities you could ever want.

- https://css-tricks.com/custom-scrollbars-in-webkit/

With the HTML5 spec' finally completed and standardized on Oct 28th 2014, it seems logical that work should begin on it's successor, the next iteration of HTML, or simply HTML.next!

HTML6 is somewhat of a reversion back to the earlier concept of XML namespaces in HTML4. You're probably all familiar with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - http://www.w3schools.com/tags/tag_DOCTYPE.asp.

HTML6 really plays on the idea of namespaces rather than "tags" for semantic markup. In concept it allows the freedom to define any tag you want as only it's namespace is reserved.

Example: <my_tag:body>, think of it as <[custom_tag]:[namespace (traditional HTML tag)]>

It's still incredibly early days and I'm sure, just like with HTML5, which spent a good few years in draft but was implemented anyway through countless vendor prefixes/polyfills in most A+ browsers. So shall HTML6 when it get's off the starting grid.

Some of benefits it brings are:

  • Improved browser sizing of imagery. On the fly-optimization for different devices - RWD rejoice!
  • More control over the video object, and other media types
  • Seamless camera incorporation.
  • Possibility of including certain JS libraries. Notably jQuery.
  • Hardened Authentication and Security.
  • Solidification of Microformats (such as RDFa, MicroData "Rich Snippets" - Google).

HTML6 - Further Reading

CSS4 - Further Reading

Update - Feb 2015

After implementing Scroll n' Scrub on one of our own websites here's a few things I learnt along the way. In the end we opted for a video piece that was exported into single images as "frames", we reduced the frame rate and heavily optimized the images for decreased image count and faster load times. Very similar concept to animated "flick books". Different frame on each page, as you flick through the book the illusion of animation is created. In this analogy, scrolling is our paradigm to flicking through the pages.

The hardest part was seamlessly getting the images to load in the background as the user scrolled/animated. We didn't want to pre-load all 320 images upfront with more traditional Javascript, it kind of defeated the purpose of a seamless animation. In the end we opted for a "double buffering (Slide #25)" technique using the canvas tag. Two canvases are created, one hidden/off-screen; the other being the actual canvas the animation takes place in. Loading images into canvas is surprisingly easy.

Animation was handled through Javascript's requestAnimationFrame(); (rAF) method, but a polyfill was used for cross browser compatibility. rAF has the advantage of leveraging GPU instead of regular client-side processing/CPU.

Some simple Javascript scroll calculation was used to compute user scroll as a % of total scroll, based on total number of frames. As the user scrolled images were preloaded into the canvas off screen and painted onto the main canvas once they were loaded. This had the benefit of reducing "black-outs" or "tearing". These were issues we came across using regular JS preload techniques and then injecting to DOM. If an image (frame) had only half-loaded as the (user) scroll requested it, it resulted in some undesirable flickering or "blacking out". With the canvas technique, the image was only rendered once fully loaded creating a much more seamless animation.

We also added in some gravity to the scroll "Kinetic Scroll" for good measure based on this work by Ariya Hidayat, it uses the same computation as the iOS kinetic scroll.

Original

Scroll n' Scrub™. A phrase I feel sums up this technique beautifully, a technique I'm noticing a lot more on the Internet that introduces some really stunning and immersive front-end presentations.

With numbers for IE8 slowly dwindling and front-end support for this browser falling, front-end developers can now really begin to look forward to some true cross-browser HTML5. IE9, the lethargic example of modern browsers, finally allows front-end developers to introduce some of the more exciting features of HTML5.

This particular technique focuses on the ability to "scrub" HTML5 video using Javascript events such as defaultPlaybackRate(), playbackRate(), and currentTime(). (http://www.w3schools.com/tags/ref_av_dom.asp).

The concept is simple. Take a well directed, orchestrated video. Hide the controls and turn the vertical scroll-bar into the play seek bar. As a user scrolls the video plays forwards or backwards to create a truly immersive experience.

Combine that with some well-timed and placed div overlays, some parallax action and you have some really compelling webpages.

  • Next