Storytelling with CSS

This gallery is also available as an article: Cutting edge web development with CSS Shapes and CSS Regions.

I had the pleasure of participating in a one-on-one Adobe Connect webinar presentation given by Arno Gourdol, Sr. Director of Product Development at Adobe. Arno presented many tools from the Adobe Creative Cloud, and he followed up his presentation with several demonstrations representing progressive work within the web developer sphere, in particular HTML5 and CSS3 examples.

Along with a Q&A session during the accompanying telephone conversation, Arno demoed several technologies that Adobe has been helping to spearhead in recent months. One example that struck me was the demonstrated use of modules for CSS Shapes (which defines and contains the features of CSS relating to wrapping content around and inside shapes) and CSS Regions (which allows content to flow across multiple areas called regions); both of these modules are W3C Editor’s Drafts. (Read my related article: Experiment with CSS3 Exclusions and Shapes module.)

The demo highlights a storytelling technique that uses the CSS Shapes and CSS Regions modules and was created using Adobe Edge Code CC. Edge Code CC, also known as a “Design in the browser” tool, allows you to code HTML, CSS, and JavaScript faster with live development and offers quick editing code intelligence and integrated visual design tools. Another Adobe tool was used in the process of creating the demo website, but I have been told to hold off mentioning it until the beta release has been fully tested.

Alice in Wonderland demo

This is a screen capture of the top of the demo page, as seen in Canary with the experimental features enabled.

Warning message

If you view the demo webpage without using Chrome Canary and enabling the experimental features, you’ll see the warning message that’s in this shot.

Enable Chrome Canary and experimental web platform features

The website of the CSS storytelling technique is entitled Demo for Alice in Wonderland by Lewis Carroll Using CSS Shapes to enhance visual storytelling, and requires Chrome Canary to be installed along with several experimental features — Shapes, Regions, and Blend Modes — to be viewed correctly. To enable the three features, paste this text string into the address bar in Chrome Canary and press Enter:

chrome://flags/#enable-experimental-web-platform-features

Now ‘Enable’ the link within that section, and then click Relaunch at the bottom of Chrome Canary. The Enable Experimental Web Platform Features is shown in this figure.

Under the hood

When you explore under the hood of the demo website using the web developer tools in Chrome Canary, the Inspect Element console Resources panel shows the HTML5 doctype, the use of an overlay, keyframes, alternate navigation for input devices, and the introduction slide and feature detection message. The top level view of the web page resource is displayed in this screen.

Elements pane view

In the Elements tab of the developer tool, we see the first content div, which is contained within another div with an id equals “scene1”, with the CSS shape style applied to the following HTML code snippet:

\r\n   
\r\n     Alice in Wonderland\r\n   
\r\n
Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'\r\n

So she was considering in her own mind whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.\r\n

In another moment down went Alice after it, never once considering how in the world she was to get out again.\r\n      
\r\n

.content {\r\nposition: relative;\r\nwidth: 33em;\r\nheight: 75em;\r\nbox-sizing: border-box;\r\nmargin-left: 37.5em;\r\npadding-top: 9em;\r\n-webkit-shape-inside: polygon(0em 0em, 33em -0.06em, 33.13em 23.75em, 30em 23.88em, 28em 25.88em, 28em 28.75em, 32.88em 33em, 31.38em 37.5em, 27.75em 37.88em, 23.31em 42.56em, 22.56em 45.88em, 24.5em 46.81em, 21.19em 49.56em, 24em 53.13em, 27em 53.13em, 28.81em 61.13em, 26.31em 74.88em, 0em 75em, 0em 65.94em, 2em 58em, 11.94em 53.5em, 11.25em 49.69em, 8.75em 47.25em, 9.44em 44.94em, 1.81em 43.75em, 0em 40em, 6.38em 40em, 12.44em 38.5em, 15.75em 35.25em, 9.88em 35.25em, 8.69em 33.5em, 5.63em 31.75em, 10.75em 30.19em, 5.44em 28.75em, 3.44em 25.19em, 7.25em 23.75em, 4em 23.44em, 1em 20.63em, 2.88em 18.5em, 1.25em 15.63em, 5.63em 11.69em, 6.13em 6.94em, 3.25em 2.44em);\r\n}

Alice in the Caterpillar's mushroom lair

The script list

The demo uses jQuery and JavaScript resources to assist with the scrolling and animation effects, which also help to provide a sense of parallax scrolling throughout the storytelling sequences. Script resources include the following:

• jQuery (jquery-2.0.3.min.js)
• Superscrollorama jQuery plugin (jquery.superscrollorama.js) by John Polacek for doing scroll animations.
• scroll-driver.js, which is licensed by Adobe and is used to position a fixed element to the viewport using @param {String} position with optional edge of the element to pin settings.
• ScrollToPlugin.min.js by @author: Jack Doyle.
• TweenMax.min.js plugin by GreenSock, which includes: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, and DirectionalRotationPlugin.

The part of the storytelling seen in this screen shot takes you down the rabbit hole with Alice and into the Caterpillar’s mushroom lair; this is where the demo starts scrolling from left to right as the story and document progresses. The Caterpillar’s story line continue to scroll up and into the shapes of wafting smoke clouds that eventually accumulate above their heads during their conversation. 

Cheshire Cat

As you continue to scroll into the next scene, we see the Cheshire Cat falling down the rabbit hole.