Permalink
Browse files

A flipper experiment using -moz-element.

  • Loading branch information...
1 parent bf51bc8 commit 40e81937c6ddbff63ee362c46ba880bcd622b0c5 @joseph joseph committed Jan 31, 2012
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>-moz-element Flipper test</title>
+ <link rel="stylesheet" type="text/css" href="../../tests.css" />
+ <link rel="stylesheet" href="styles.css" />
+ <script src="script.js"></script>
+ </head>
+ <body onclick="jump()">
+
+ <a href="../../index.html" class="backToGuide">&larr; Back to Guide</a>
+ <h1><code>-moz-element</code> Flipper test</h1>
+
+ <p>
+ Designed for recent versions of Firefox (11+?). A bit stuttery.
+ Only goes forward.
+ </p>
+
+ <hr />
+
+ <section>
+ <div id="imp1" class="imposter"></div>
+ <div id="gate">
+ <div id="imp2" class="imposter"></div>
+ <div id="imp3" class="imposter"></div>
+ </div>
+ <div id="imp4" class="imposter"></div>
+ </section>
+
+ <div class="colCntr">
+ <div id="origin" class="columns">
+ <p> Lorem ipsum dolor.
+ The Mole had been working very hard all the morning, spring-cleaning his
+ little home. First with brooms, then with dusters; then on ladders and
+ steps and chairs, with a brush and a pail of whitewash; till he had dust
+ in his throat and eyes, and splashes of whitewash all over his black
+ fur, and an aching back and weary arms. Spring was moving in the air
+ above and in the earth below and around him, penetrating even his dark
+ and lowly little house with its spirit of divine discontent and longing.
+ It was small wonder, then, that he suddenly flung down his brush on the
+ floor, said 'Bother!' and 'O blow!' and also 'Hang spring-cleaning!'
+ and bolted out of the house without even waiting to put on his coat.
+ Something up above was calling him imperiously, and he made for
+ the steep little tunnel which answered in his case to the gaveled
+ carriage-drive owned by animals whose residences are nearer to the sun
+ and air. So he scraped and scratched and scrabbled and scrooged and
+ then he scrooged again and scrabbled and scratched and scraped, working
+ busily with his little paws and muttering to himself, 'Up we go! Up we
+ go!' till at last, pop! his snout came out into the sunlight, and he
+ found himself rolling in the warm grass of a great meadow.
+ </p>
+ <p>
+ 'This is fine!' he said to himself. 'This is better than whitewashing!'
+ The sunshine struck hot on his fur, soft breezes caressed his heated
+ brow, and after the seclusion of the cellarage he had lived in so long
+ the carol of happy birds fell on his dulled hearing almost like a shout.
+ Jumping off all his four legs at once, in the joy of living and the
+ delight of spring without its cleaning, he pursued his way across the
+ meadow till he reached the hedge on the further side.
+ </p>
+ <p>
+ 'Hold up!' said an elderly rabbit at the gap. 'Sixpence for the
+ privilege of passing by the private road!' He was bowled over in an
+ instant by the impatient and contemptuous Mole, who trotted along the
+ side of the hedge chaffing the other rabbits as they peeped hurriedly
+ from their holes to see what the row was about. 'Onion-sauce!
+ Onion-sauce!' he remarked jeeringly, and was gone before they could
+ think of a thoroughly satisfactory reply. Then they all started
+ grumbling at each other. 'How STUPID you are! Why didn't you tell
+ him——' 'Well, why didn't YOU say——' 'You might have reminded
+ him——' and so on, in the usual way; but, of course, it was then much
+ too late, as is always the case.
+ </p>
+ <p>
+ It all seemed too good to be true. Hither and thither through the
+ meadows he rambled busily, along the hedgerows, across the
+ copses, finding everywhere birds building, flowers budding, leaves
+ thrusting—everything happy, and progressive, and occupied. And instead
+ of having an uneasy conscience pricking him and whispering 'whitewash!'
+ he somehow could only feel how jolly it was to be the only idle dog
+ among all these busy citizens. After all, the best part of a holiday
+ is perhaps not so much to be resting yourself, as to see all the other
+ fellows busy working.
+ </p>
+ <p>
+ He thought his happiness was complete when, as he meandered aimlessly
+ along, suddenly he stood by the edge of a full-fed river. Never in
+ his life had he seen a river before—this sleek, sinuous, full-bodied
+ animal, chasing and chuckling, gripping things with a gurgle and
+ leaving them with a laugh, to fling itself on fresh playmates that shook
+ themselves free, and were caught and held again. All was a-shake and
+ a-shiver—glints and gleams and sparkles, rustle and swirl, chatter and
+ bubble. The Mole was bewitched, entranced, fascinated. By the side of
+ the river he trotted as one trots, when very small, by the side of a man
+ who holds one spell-bound by exciting stories; and when tired at
+ last, he sat on the bank, while the river still chattered on to him,
+ a babbling procession of the best stories in the world, sent from the
+ heart of the earth to be told at last to the insatiable sea.
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
@@ -0,0 +1,19 @@
+function jump() {
+ document.body.className = 'pageTurn';
+ setTimeout(nextPage, 420);
+}
+
+function nextPage() {
+ document.body.className = '';
+ window.pos = (window.pos || 0) + 340;
+ setBP(document.getElementById('imp1'), 0)
+ setBP(document.getElementById('imp2'), 1)
+ setBP(document.getElementById('imp3'), 2)
+ setBP(document.getElementById('imp4'), 3)
+}
+
+function setBP(elem, n) {
+ var x = n*160+window.pos;
+ if (n >= 2) { x += 20; }
+ elem.style.backgroundPosition = "-"+x+"px 0px";
+}
@@ -0,0 +1,69 @@
+body {
+ padding: 100px;
+}
+section {
+ position: relative;
+ background: -moz-linear-gradient(0deg, #FFF, #555, #FFF, #555, #FFF);
+ width: 320px;
+ height: 380px;
+}
+.columns {
+ width: 2700px;
+ -moz-column-width: 300px;
+ -moz-column-gap: 20px;
+ height: 380px;
+}
+.colCntr {
+ height: 0;
+ overflow: hidden;
+}
+.imposter {
+ background-color: white;
+ background-image: -moz-element(#origin);
+ background-repeat: no-repeat;
+ position: absolute;
+ width: 160px;
+ height: 380px;
+ top: 0;
+ left: 0;
+ -moz-backface-visibility: hidden;
+ background-color: #FFF;
+}
+#imp1 {
+ background-position: 0px 0px;
+}
+#imp2 {
+ background-position: -160px 0px;
+}
+#imp3 {
+ background-position: -340px 0px;
+ -moz-transform: rotateY(180deg);
+}
+#imp4 {
+ background-position: -500px 0px;
+ left: 160px;
+ opacity: 0.25;
+}
+#gate {
+ position: absolute;
+ -moz-transform-origin: 1px 50%;
+ -moz-transform-style: preserve-3d;
+ z-index: 1;
+ top: 0px;
+ left: 160px;
+ width: 160px;
+ height: 382px;
+ background: #FFF;
+}
+.pageTurn #gate{
+ -moz-transition: -moz-transform linear 400ms;
+ -moz-transform: perspective(500px) rotateY(-180deg);
+}
+.pageTurn #imp1 {
+ -moz-transition: opacity linear 200ms 200ms;
+ opacity: 0.25;
+}
+.pageTurn #imp4 {
+ -moz-transition: opacity linear 200ms;
+ opacity: 1;
+}
View
@@ -128,6 +128,11 @@
<a href="bugs/">Client-specific bug index</a>
&mdash; A repository of other bugs that afflict only specific clients.
</li>
+ <li>
+ <a href="experimental/">Experiments</a>
+ &mdash; Ideas and proofs-of-concept that might eventually show up
+ in core.
+ </li>
</ul>
</body>

0 comments on commit 40e8193

Please sign in to comment.