Mozilla Demo Studio

  • Stjoer in Demo

Transition Reader

It's auto-brightness on a webpage!

Makke mei JavaScript, HTML5, Canvas, CSS3, Fideo,

  • 142 kear besjoen
  • 0 kommentaren

Mear oer dizze demo fan de auteur

How to use:

You need to be on a desktop version of Firefox17+, Chrome21+ or Opera12+ to use getUserMedia. You also need a web cam of course.

This time, the demo just serves news from Feedzilla which you can read anywhere, anytime, and any lighting condition!

Concept:

It's similar to the auto-brightness of a smartphone. It uses the video streamed from the web cam to calculate the brightness of the surrounding area. In this demo, the values are used to toggle styles. The brighter the surroundings, a brighter style is applied. If the surroundings are dark, then a darker style is applied. It also uses CSS transitions to smoothen style changes.

Code:

This demo uses the same code I used in my previous demo, minus the canvas libraries. And in place of the motion-detection code is the code that calculated for luminosity.

- jQuery
- RequireJS
- requestAnimationFrame polyfill by Erik Möller
- Twitter Bootstrap

Off-Site Demo:

A mirror demo is currently hosted at http://transreader.ap01.aws.af.cm/

Noch gjin kommentaren.

Register or log in to add your own.

Krij de boarnekoade

Laad de boarnekoade yn 190.61 KB · ZIP-bestân

Browse the Source

Dizze demo is frijjûn ûnder de BSD lisinsje.

More by fskreuz