BearPanther.com

Abusing hue-rotate with NodeList

Introduction

user

bear


LATEST POSTS

Using jsformat with Sublime Text 26th July, 2014

There are many d3 demos like this but this one is mine 08th June, 2014

Blog

Abusing hue-rotate with NodeList

Posted on .

There’s a cool demo out there from Rene Rubalcava called MapTileSytler (source on github). The CSS used there only works in webkit browsers but it’s cool nonetheless.

After playing around, I put together a terrible example of what you can do with some of this stuff: check it out. Click the map to make it stop.

That page is changing each map tile’s hue-rotate CSS filter effect every 50ms.

Other than adding a little disco to a map, there is one other cool thing going on in that example. Notice that Dojo’s NodeList is used to manipulate the CSS for a collection of elements:

require([
  "dojo/query", "dojo/NodeList-dom", ...
], function(query) {
  ...
  query("img.layerTile").style("-webkit-filter", filter);
  ...
});

Concise and readable.

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (0) ...