This demo does not use color font technology, nor does it attempt to replicate color font functionality. Instead it demonstrates a proof-of-concept application of color design and animation to any text on the web page, typically in HTML header elements, through the use of [JS library] Scrawl-canvas snippet modules. Each header element can personalize the snippet effect applied to it using CSS custom properties, meaning each snippet can create a range of different effects.
DOM text and canvas text: These snippets work by matching the font characteristics of the DOM headers and recreating the text in a <canvas> element added inside the header element (progressive enhancement). For accessibility and user experience purposes the DOM text is not removed: users should be able to copy/paste the header text as normal. Users who disable Javascript in their devices should still be able to see the normal, CSS styled header text.
2 comments
[ 3.4 ms ] story [ 17.3 ms ] threadDOM text and canvas text: These snippets work by matching the font characteristics of the DOM headers and recreating the text in a <canvas> element added inside the header element (progressive enhancement). For accessibility and user experience purposes the DOM text is not removed: users should be able to copy/paste the header text as normal. Users who disable Javascript in their devices should still be able to see the normal, CSS styled header text.