diff --git a/accordion/css/experiment.css b/accordion/css/experiment.css index ca0e620..0625c61 100644 --- a/accordion/css/experiment.css +++ b/accordion/css/experiment.css @@ -1,56 +1,56 @@ -/* +/* CSS3 Accordion Experiment Date: 25th June 2009 Author: Paul Hayes */ - + .accordion { - background: #eee; - border: 1px solid #999; - padding: 0 1em 24px; - width: 500px; - margin: 2em auto; + background: #eee; + border: 1px solid #999; + padding: 0 1em 24px; + width: 500px; + margin: 2em auto; } .accordion h2 { - margin: 12px 0; + margin: 12px 0; } - + .accordion .section { - border-bottom: 1px solid #ccc; - padding: 0 1em; - background: #fff; + border-bottom: 1px solid #ccc; + padding: 0 1em; + background: #fff; } - + .accordion h3 a { - display: block; - font-weight: normal; - padding: 1em 0; + display: block; + font-weight: normal; + padding: 1em 0; } .accordion h3 a:hover { - text-decoration: none; + text-decoration: none; } - + .accordion h3 + div { - height: 0; - overflow: hidden; - -webkit-transition: height 0.3s ease-in; - -moz-transition: height 0.3s ease-in; - -o-transition: height 0.3s ease-in; - -ms-transition: height 0.3s ease-in; - transition: height 0.3s ease-in; + height: 0; + overflow: hidden; + -webkit-transition: height 0.3s ease-in; + -moz-transition: height 0.3s ease-in; + -o-transition: height 0.3s ease-in; + -ms-transition: height 0.3s ease-in; + transition: height 0.3s ease-in; } .accordion :target h3 a { - text-decoration: none; - font-weight: bold; + text-decoration: none; + font-weight: bold; } .accordion :target h3 + div { - height: 100px; + height: 100px; } .accordion .section.large:target h3 + div { - overflow: auto; + overflow: auto; } \ No newline at end of file diff --git a/accordion/index.html b/accordion/index.html index 44c0eb2..bca9489 100644 --- a/accordion/index.html +++ b/accordion/index.html @@ -1,81 +1,81 @@ - - - - - - CSS3 Accordion — Paul Hayes - - + + + + + + CSS3 Accordion — Paul Hayes + + - - + + -
-

- This is a demo, learn how it works. -

-
-
-

Accordion Demo

-
-

- Heading 1 -

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-
-
-

- Heading 2 -

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
-
-
-

- Heading 3 -

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

-
-
-
-

- Heading 4 -

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-
-
-

- Heading 5 -

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
-
-
-

- Heading 6 -

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
-
-
-
-
- - +
+

+ This is a demo, learn how it works. +

+
+
+

Accordion Demo

+
+

+ Heading 1 +

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
+

+ Heading 2 +

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+

+ Heading 3 +

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

+
+
+
+

+ Heading 4 +

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
+

+ Heading 5 +

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+

+ Heading 6 +

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+
+
+ + \ No newline at end of file diff --git a/clock/css/experiment.css b/clock/css/experiment.css index 3d0d16a..63e6de3 100644 --- a/clock/css/experiment.css +++ b/clock/css/experiment.css @@ -1,79 +1,79 @@ -/* +/* Clock Experiment Date: 24th March 2009 Author: Paul Hayes */ - + body.experiment { -background: #fff; + background: #fff; } - + .start { -text-align: center; -font-size: 2em; -font-weight: bold; -margin: 5em; + text-align: center; + font-size: 2em; + font-weight: bold; + margin: 5em; } #clock { -position: relative; -width: 378px; -height: 378px; -background-image: url('../images/clockFace.png'); -left: 50%; -margin: 5em 0 0 -189px; + position: relative; + width: 378px; + height: 378px; + background-image: url('../images/clockFace.png'); + left: 50%; + margin: 5em 0 0 -189px; } #clock div { -position: absolute; + position: absolute; } /* The magic */ #clock img[src*='second'] { --webkit-transition: -webkit-transform 600000s linear; --moz-transition: -moz-transform 600000s linear; --o-transition: -o-transform 600000s linear; --ms-transition: -ms-transform 600000s linear; -transition: transform 600000s linear; + -webkit-transition: -webkit-transform 600000s linear; + -moz-transition: -moz-transform 600000s linear; + -o-transition: -o-transform 600000s linear; + -ms-transition: -ms-transform 600000s linear; + transition: transform 600000s linear; } #clock:target img[src*='second'] { --webkit-transform: rotate(3600000deg); --moz-transform: rotate(3600000deg); --o-transform: rotate(3600000deg); --ms-transform: rotate(3600000deg); --transform: rotate(3600000deg); + -webkit-transform: rotate(3600000deg); + -moz-transform: rotate(3600000deg); + -o-transform: rotate(3600000deg); + -ms-transform: rotate(3600000deg); + -transform: rotate(3600000deg); } #clock img[src*='minute'] { --webkit-transition: -webkit-transform 360000s linear; --moz-transition: -moz-transform 360000s linear; --o-transition: -o-transform 360000s linear; --ms-transition: -ms-transform 360000s linear; -transition: transform 360000s linear; + -webkit-transition: -webkit-transform 360000s linear; + -moz-transition: -moz-transform 360000s linear; + -o-transition: -o-transform 360000s linear; + -ms-transition: -ms-transform 360000s linear; + transition: transform 360000s linear; } #clock:target img[src*='minute'] { --webkit-transform: rotate(36000deg); --moz-transform: rotate(36000deg); --o-transform: rotate(36000deg); --ms-transform: rotate(36000deg); -transform: rotate(36000deg); + -webkit-transform: rotate(36000deg); + -moz-transform: rotate(36000deg); + -o-transform: rotate(36000deg); + -ms-transform: rotate(36000deg); + transform: rotate(36000deg); } #clock img[src*='hour'] { --webkit-transition: -webkit-transform 216000s linear; --moz-transition: -moz-transform 216000s linear; --o-transition: -o-transform 216000s linear; --ms-transition: -ms-transform 216000s linear; -transition: transform 216000s linear; + -webkit-transition: -webkit-transform 216000s linear; + -moz-transition: -moz-transform 216000s linear; + -o-transition: -o-transform 216000s linear; + -ms-transition: -ms-transform 216000s linear; + transition: transform 216000s linear; } #clock:target img[src*='hour'] { --webkit-transform: rotate(360deg); --moz-transform: rotate(360deg); --o-transform: rotate(360deg); --ms-transform: rotate(360deg); -transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } \ No newline at end of file diff --git a/clock/index.html b/clock/index.html index b42e22f..5e1fdc0 100644 --- a/clock/index.html +++ b/clock/index.html @@ -1,32 +1,32 @@ - - - - - - CSS3 Analogue Clock — Paul Hayes - - + + + + + + CSS3 Analogue Clock — Paul Hayes + + - - + + -
-

- This is a demo, learn how it works. -

+
+

+ This is a demo, learn how it works. +

-

Start Clock

-
-
-
-
-
+

Start Clock

+
+
+
+
+
-
- - +
+ + \ No newline at end of file diff --git a/clock/js/experiment.js b/clock/js/experiment.js index dcef32a..9a77a0f 100644 --- a/clock/js/experiment.js +++ b/clock/js/experiment.js @@ -1,44 +1,44 @@ $(function(){ - - var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '), - prop, - el = document.createElement('div'); - - for(var i = 0, l = props.length; i < l; i++) { - if(typeof el.style[props[i]] !== "undefined") { - prop = props[i]; - break; - } - } - - if(window.location.hash === "#clock") { - startClock(); - $('p.start').remove(); - } else { - $('#start').click(function() { - startClock(); - $('p.start').remove(); - }); - } - - function startClock() { - var angle = 360/60, - date = new Date(), - hour = (function() { - var h = date.getHours(); - if(h > 12) { - h = h - 12; - } - return h - })(), - minute = date.getMinutes(), - second = date.getSeconds(), - hourAngle = (360/12) * hour + (360/(12*60)) * minute; - - if(prop) { - $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)'; - $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)'; - $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)'; - } - } + + var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '), + prop, + el = document.createElement('div'); + + for(var i = 0, l = props.length; i < l; i++) { + if(typeof el.style[props[i]] !== "undefined") { + prop = props[i]; + break; + } + } + + if(window.location.hash === "#clock") { + startClock(); + $('p.start').remove(); + } else { + $('#start').click(function() { + startClock(); + $('p.start').remove(); + }); + } + + function startClock() { + var angle = 360/60, + date = new Date(), + hour = (function() { + var h = date.getHours(); + if(h > 12) { + h = h - 12; + } + return h + })(), + minute = date.getMinutes(), + second = date.getSeconds(), + hourAngle = (360/12) * hour + (360/(12*60)) * minute; + + if(prop) { + $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)'; + $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)'; + $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)'; + } + } }); \ No newline at end of file diff --git a/cube-3d/blur.html b/cube-3d/blur.html index d7dec8f..69eeae9 100644 --- a/cube-3d/blur.html +++ b/cube-3d/blur.html @@ -1,21 +1,21 @@ - - - - - - CSS cube which blurs as it moves away — Paul Hayes - - + + + + + + CSS cube which blurs as it moves away — Paul Hayes + + - - + + -
- +
+
@@ -47,7 +47,7 @@

- +

+ + \ No newline at end of file diff --git a/cube-3d/css/experiment.css b/cube-3d/css/experiment.css index e774c87..8d459c9 100644 --- a/cube-3d/css/experiment.css +++ b/cube-3d/css/experiment.css @@ -1,98 +1,98 @@ h2 { -margin-top: 0; + margin-top: 0; } .viewport { --webkit-perspective: 800; --webkit-perspective-origin: 50% 200px; --webkit-transform: scale(0.75,0.75); + -webkit-perspective: 800; + -webkit-perspective-origin: 50% 200px; + -webkit-transform: scale(0.75,0.75); --moz-perspective: 800; --moz-perspective-origin: 50% 200px; --moz-transform: scale(0.75,0.75); + -moz-perspective: 800; + -moz-perspective-origin: 50% 200px; + -moz-transform: scale(0.75,0.75); } .cube { -position: relative; -margin: 0 auto; -height: 400px; -width: 400px; --webkit-transition: -webkit-transform 50ms linear; --webkit-transform-style: preserve-3d; --webkit-transform: rotateX(-10deg) rotateY(20deg); + position: relative; + margin: 0 auto; + height: 400px; + width: 400px; + -webkit-transition: -webkit-transform 50ms linear; + -webkit-transform-style: preserve-3d; + -webkit-transform: rotateX(-10deg) rotateY(20deg); --moz-transition: -moz-transform 50ms linear; --moz-transform-style: preserve-3d; --moz-transform: rotateX(-10deg) rotateY(20deg); + -moz-transition: -moz-transform 50ms linear; + -moz-transform-style: preserve-3d; + -moz-transform: rotateX(-10deg) rotateY(20deg); } .cube h2 { -color: #fff; -padding-top: 0; -margin-top: 0; + color: #fff; + padding-top: 0; + margin-top: 0; } .cube a { -color: #fff; + color: #fff; } .cube > div { -position: absolute; -height: 360px; -width: 360px; -padding: 20px; -background-color: rgba(50, 50, 50, 0.85); -font-size: 1em; -line-height: 1em; -color: #fff; -border: 1px solid #555; -border-radius: 3px; + position: absolute; + height: 360px; + width: 360px; + padding: 20px; + background-color: rgba(50, 50, 50, 0.85); + font-size: 1em; + line-height: 1em; + color: #fff; + border: 1px solid #555; + border-radius: 3px; } .cube > div:first-child { --webkit-transform: rotateX(90deg) translateZ(200px); --moz-transform: rotateX(90deg) translateZ(200px); + -webkit-transform: rotateX(90deg) translateZ(200px); + -moz-transform: rotateX(90deg) translateZ(200px); } .cube > div:nth-child(2) { --webkit-transform: translateZ(200px); --moz-transform: translateZ(200px); + -webkit-transform: translateZ(200px); + -moz-transform: translateZ(200px); } .cube > div:nth-child(3) { --webkit-transform: rotateY(90deg) translateZ(200px); --moz-transform: rotateY(90deg) translateZ(200px); -text-align: center; + -webkit-transform: rotateY(90deg) translateZ(200px); + -moz-transform: rotateY(90deg) translateZ(200px); + text-align: center; } .cube > div:nth-child(4) { --webkit-transform: rotateY(180deg) translateZ(200px); --moz-transform: rotateY(180deg) translateZ(200px); + -webkit-transform: rotateY(180deg) translateZ(200px); + -moz-transform: rotateY(180deg) translateZ(200px); } .cube > div:nth-child(5) { --webkit-transform: rotateY(-90deg) translateZ(200px); --moz-transform: rotateY(-90deg) translateZ(200px); + -webkit-transform: rotateY(-90deg) translateZ(200px); + -moz-transform: rotateY(-90deg) translateZ(200px); } .cube > div:nth-child(5) p { -text-align: center; -font-size: 2.77em; -margin: 40px; -line-height: 60px; + text-align: center; + font-size: 2.77em; + margin: 40px; + line-height: 60px; } .cube > div:nth-child(6) { --webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px); --moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px); + -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px); + -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px); } object { -opacity: 0.5; + opacity: 0.5; } object:hover { -opacity: 1; + opacity: 1; } /* Zoom and blur experiment */ @@ -100,9 +100,9 @@ opacity: 1; /*************************************************/ .zoom-wrapper { --webkit-animation: zoom-in 5s linear infinite alternate; --webkit-filter: blur(0); --webkit-transform-style: preserve-3d; + -webkit-animation: zoom-in 5s linear infinite alternate; + -webkit-filter: blur(0); + -webkit-transform-style: preserve-3d; } @-webkit-keyframes zoom-in { diff --git a/cube-3d/index.html b/cube-3d/index.html index 196a6d6..5703063 100644 --- a/cube-3d/index.html +++ b/cube-3d/index.html @@ -1,146 +1,146 @@ - - - - - - 3D CSS cube, use arrow keys to rotate — Paul Hayes - - - - - + + + + + + 3D CSS cube, use arrow keys to rotate — Paul Hayes + + + + + -
-

- This is a demo, learn how it works. -

+
+

+ This is a demo, learn how it works. +

-
-
+
+
- One face + One face
- Up, down, left, right + Up, down, left, right
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- New forms of navigation are fun. + New forms of navigation are fun.
- Rotating 3D cube + Rotating 3D cube
- +
-
+
-
- - + - + switch(evt.keyCode) { + case 37: // left + yAngle -= 90; + break; + + case 38: // up + xAngle += 90; + break; + + case 39: // right + yAngle += 90; + break; + + case 40: // down + xAngle -= 90; + break; + }; + document.getElementById('cube').style[prop] = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)"; +}); + \ No newline at end of file diff --git a/cube-3d/js/experiment.js b/cube-3d/js/experiment.js index 9db5ce7..59aa16e 100644 --- a/cube-3d/js/experiment.js +++ b/cube-3d/js/experiment.js @@ -1,130 +1,130 @@ $(function(){ - - var el = document.createElement('div'), - transformProps = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '), - transformProp = support(transformProps), - transitionDuration = 'transitionDuration WebkitTransitionDuration MozTransitionDuration OTransitionDuration msTransitionDuration'.split(' '), - transitionDurationProp = support(transitionDuration); - - function support(props) { - for(var i = 0, l = props.length; i < l; i++) { - if(typeof el.style[props[i]] !== "undefined") { - return props[i]; - } - } - } - - var mouse = { - start : {} - }, - touch = document.ontouchmove !== undefined, - viewport = { - x: -10, - y: 20, - el: $('.cube')[0], - move: function(coords) { - if(coords) { - if(typeof coords.x === "number") this.x = coords.x; - if(typeof coords.y === "number") this.y = coords.y; - } - - this.el.style[transformProp] = "rotateX("+this.x+"deg) rotateY("+this.y+"deg)"; - }, - reset: function() { - this.move({x: 0, y: 0}); - } - }; - - viewport.duration = function() { - var d = touch ? 50 : 500; - viewport.el.style[transitionDurationProp] = d + "ms"; - return d; - }(); - - $(document).keydown(function(evt) { - switch(evt.keyCode) - { - case 37: // left - viewport.move({y: viewport.y - 90}); - break; - - case 38: // up - evt.preventDefault(); - viewport.move({x: viewport.x + 90}); - break; - - case 39: // right - viewport.move({y: viewport.y + 90}); - break; - - case 40: // down - evt.preventDefault(); - viewport.move({x: viewport.x - 90}); - break; - - case 27: //esc - viewport.reset(); - break; - - default: - break; - }; - }).bind('mousedown touchstart', function(evt) { - delete mouse.last; - if($(evt.target).is('a, iframe')) { - return true; - } - - evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null; - mouse.start.x = evt.pageX; - mouse.start.y = evt.pageY; - $(document).bind('mousemove touchmove', function(event) { - // Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom) - if(!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) { - event.preventDefault(); - // Get touch co-ords - event.originalEvent.touches ? event = event.originalEvent.touches[0] : null; - $('.viewport').trigger('move-viewport', {x: event.pageX, y: event.pageY}); - } - }); - - $(document).bind('mouseup touchend', function () { - $(document).unbind('mousemove touchmove'); - }); - }); - - $('.viewport').bind('move-viewport', function(evt, movedMouse) { - - // Reduce movement on touch screens - var movementScaleFactor = touch ? 4 : 1; - - if (!mouse.last) { - mouse.last = mouse.start; - } else { - if (forward(mouse.start.x, mouse.last.x) != forward(mouse.last.x, movedMouse.x)) { - mouse.start.x = mouse.last.x; - } - if (forward(mouse.start.y, mouse.last.y) != forward(mouse.last.y, movedMouse.y)) { - mouse.start.y = mouse.last.y; - } - } - - viewport.move({ - x: viewport.x + parseInt((mouse.start.y - movedMouse.y)/movementScaleFactor), - y: viewport.y - parseInt((mouse.start.x - movedMouse.x)/movementScaleFactor) - }); - - mouse.last.x = movedMouse.x; - mouse.last.y = movedMouse.y; - - function forward(v1, v2) { - return v1 >= v2 ? true : false; - } - }); - - /* Just for fun */ - if(!touch) { - $('.cube > div').eq(2).html(''); - } - + + var el = document.createElement('div'), + transformProps = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '), + transformProp = support(transformProps), + transitionDuration = 'transitionDuration WebkitTransitionDuration MozTransitionDuration OTransitionDuration msTransitionDuration'.split(' '), + transitionDurationProp = support(transitionDuration); + + function support(props) { + for(var i = 0, l = props.length; i < l; i++) { + if(typeof el.style[props[i]] !== "undefined") { + return props[i]; + } + } + } + + var mouse = { + start : {} + }, + touch = document.ontouchmove !== undefined, + viewport = { + x: -10, + y: 20, + el: $('.cube')[0], + move: function(coords) { + if(coords) { + if(typeof coords.x === "number") this.x = coords.x; + if(typeof coords.y === "number") this.y = coords.y; + } + + this.el.style[transformProp] = "rotateX("+this.x+"deg) rotateY("+this.y+"deg)"; + }, + reset: function() { + this.move({x: 0, y: 0}); + } + }; + + viewport.duration = function() { + var d = touch ? 50 : 500; + viewport.el.style[transitionDurationProp] = d + "ms"; + return d; + }(); + + $(document).keydown(function(evt) { + switch(evt.keyCode) + { + case 37: // left + viewport.move({y: viewport.y - 90}); + break; + + case 38: // up + evt.preventDefault(); + viewport.move({x: viewport.x + 90}); + break; + + case 39: // right + viewport.move({y: viewport.y + 90}); + break; + + case 40: // down + evt.preventDefault(); + viewport.move({x: viewport.x - 90}); + break; + + case 27: //esc + viewport.reset(); + break; + + default: + break; + }; + }).bind('mousedown touchstart', function(evt) { + delete mouse.last; + if($(evt.target).is('a, iframe')) { + return true; + } + + evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null; + mouse.start.x = evt.pageX; + mouse.start.y = evt.pageY; + $(document).bind('mousemove touchmove', function(event) { + // Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom) + if(!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) { + event.preventDefault(); + // Get touch co-ords + event.originalEvent.touches ? event = event.originalEvent.touches[0] : null; + $('.viewport').trigger('move-viewport', {x: event.pageX, y: event.pageY}); + } + }); + + $(document).bind('mouseup touchend', function () { + $(document).unbind('mousemove touchmove'); + }); + }); + + $('.viewport').bind('move-viewport', function(evt, movedMouse) { + + // Reduce movement on touch screens + var movementScaleFactor = touch ? 4 : 1; + + if (!mouse.last) { + mouse.last = mouse.start; + } else { + if (forward(mouse.start.x, mouse.last.x) != forward(mouse.last.x, movedMouse.x)) { + mouse.start.x = mouse.last.x; + } + if (forward(mouse.start.y, mouse.last.y) != forward(mouse.last.y, movedMouse.y)) { + mouse.start.y = mouse.last.y; + } + } + + viewport.move({ + x: viewport.x + parseInt((mouse.start.y - movedMouse.y)/movementScaleFactor), + y: viewport.y - parseInt((mouse.start.x - movedMouse.x)/movementScaleFactor) + }); + + mouse.last.x = movedMouse.x; + mouse.last.y = movedMouse.y; + + function forward(v1, v2) { + return v1 >= v2 ? true : false; + } + }); + + /* Just for fun */ + if(!touch) { + $('.cube > div').eq(2).html(''); + } + }); \ No newline at end of file diff --git a/cube-3d/touch.html b/cube-3d/touch.html index 3bb63aa..7e0a423 100644 --- a/cube-3d/touch.html +++ b/cube-3d/touch.html @@ -1,23 +1,23 @@ - - - - - - 3D CSS cube, use arrow keys, touch gestures or click and drag to rotate — Paul Hayes - - + + + + + + 3D CSS cube, use arrow keys, touch gestures or click and drag to rotate — Paul Hayes + + - - + + -
-

- This is a demo, learn how it works. -

+
+

+ This is a demo, learn how it works. +

+ + \ No newline at end of file diff --git a/cube/css/experiment.css b/cube/css/experiment.css index 8040f6b..e4fd491 100644 --- a/cube/css/experiment.css +++ b/cube/css/experiment.css @@ -1,76 +1,76 @@ -/* +/* Cube Experiment Date: 26th March 2009 Author: Paul Hayes */ .cube { -position: absolute; -left: 50%; -top: 300px; -margin-left: -200px; + position: absolute; + left: 50%; + top: 300px; + margin-left: -200px; } .cube p { -line-height: 14px; -font-size: 12px; + line-height: 14px; + font-size: 12px; } .cube h2 { -font-weight: bold; + font-weight: bold; } .rightFace, .leftFace, .topFace div { -padding: 10px; -width: 180px; -height: 180px; + padding: 10px; + width: 180px; + height: 180px; } .rightFace, .leftFace, .topFace { -position: absolute; + position: absolute; } .leftFace { --webkit-transform: skew(0deg, 30deg); --moz-transform: skew(0deg, 30deg); --o-transform: skew(0deg, 30deg); --ms-transform: skew(0deg, 30deg); -transform: skew(0deg, 30deg); -background-color: #ccc; + -webkit-transform: skew(0deg, 30deg); + -moz-transform: skew(0deg, 30deg); + -o-transform: skew(0deg, 30deg); + -ms-transform: skew(0deg, 30deg); + transform: skew(0deg, 30deg); + background-color: #ccc; } .rightFace { --webkit-transform: skew(0deg, -30deg); --moz-transform: skew(0deg, -30deg); --o-transform: skew(0deg, -30deg); --ms-transform: skew(0deg, -30deg); -transform: skew(0deg, -30deg); -background-color: #ddd; -left: 200px; + -webkit-transform: skew(0deg, -30deg); + -moz-transform: skew(0deg, -30deg); + -o-transform: skew(0deg, -30deg); + -ms-transform: skew(0deg, -30deg); + transform: skew(0deg, -30deg); + background-color: #ddd; + left: 200px; } -.topFace div { --webkit-transform: skew(0deg, -30deg) scale(1, 1.16); --moz-transform: skew(0deg, -30deg) scale(1, 1.16); --o-transform: skew(0deg, -30deg) scale(1, 1.16); --ms-transform: skew(0deg, -30deg) scale(1, 1.16); -transform: skew(0deg, -30deg) scale(1, 1.16); -background-color: #eee; -font-size: 0.862em; +.topFace div { + -webkit-transform: skew(0deg, -30deg) scale(1, 1.16); + -moz-transform: skew(0deg, -30deg) scale(1, 1.16); + -o-transform: skew(0deg, -30deg) scale(1, 1.16); + -ms-transform: skew(0deg, -30deg) scale(1, 1.16); + transform: skew(0deg, -30deg) scale(1, 1.16); + background-color: #eee; + font-size: 0.862em; } .topFace { --webkit-transform: rotate(60deg); --moz-transform: rotate(60deg); --o-transform: rotate(60deg); --ms-transform: rotate(60deg); -transform: rotate(60deg); -top: -158px; -left: 100px; + -webkit-transform: rotate(60deg); + -moz-transform: rotate(60deg); + -o-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); + top: -158px; + left: 100px; } /* Optional WebKit Animations */ @@ -81,7 +81,7 @@ left: 100px; } .leftFace { --webkit-transition: -webkit-transform 1s linear; +-webkit-transition: -webkit-transform 1s linear; } .topFace { @@ -102,29 +102,29 @@ left: 100px; /* Video */ .cube video { -left: -20px; -top: -20px; -position: relative; + left: -20px; + top: -20px; + position: relative; } .cube div.rightFace video { -left: -301px; -top: -35px; -opacity: 0.9; + left: -301px; + top: -35px; + opacity: 0.9; } .cube div.leftFace video { -opacity: 0.7; -top: -35px; -left: -100px; + opacity: 0.7; + top: -35px; + left: -100px; } .cube div.rightFace, .cube div.leftFace { -overflow: hidden; + overflow: hidden; } .cube div.topFace.video div { -background-color: #000; -color: #fff; + background-color: #000; + color: #fff; } \ No newline at end of file diff --git a/cube/css/experimentMultiCube.css b/cube/css/experimentMultiCube.css index b32b3e2..ec31971 100644 --- a/cube/css/experimentMultiCube.css +++ b/cube/css/experimentMultiCube.css @@ -1,115 +1,115 @@ -/* +/* Multi Cube Experiments Date: 30th April 2009 Author: Paul Hayes */ .cube { -position: fixed; -left: 50%; -top: 300px; + position: fixed; + left: 50%; + top: 300px; } .cube p { -line-height: 14px; -font-size: 12px; + line-height: 14px; + font-size: 12px; } .cube h2 { -font-weight: bold; + font-weight: bold; } .cube.two { -top: 416px; -left: 50%; -margin-left: -200px; + top: 416px; + left: 50%; + margin-left: -200px; } .cube.three { -top: 532px; -left: 50%; -margin-left: -400px; + top: 532px; + left: 50%; + margin-left: -400px; } .rightFace, .leftFace, .topFace div { -padding: 10px; -width: 180px; -height: 180px; + padding: 10px; + width: 180px; + height: 180px; } .rightFace, .leftFace, .topFace { -position: absolute; + position: absolute; } .cube:hover .rightFace, .cube:hover .leftFace, .cube:hover .topFace div { -background-color: #ffc; + background-color: #ffc; } .cube:hover .rightFace:hover, .cube:hover .leftFace:hover, .cube:hover .topFace:hover div { -background-color: #ffa; + background-color: #ffa; } .leftFace { --webkit-transform: skew(0deg, 30deg); --moz-transform: skew(0deg, 30deg); --o-transform: skew(0deg, 30deg); --ms-transform: skew(0deg, 30deg); -transform: skew(0deg, 30deg); -background-color: #ccc; + -webkit-transform: skew(0deg, 30deg); + -moz-transform: skew(0deg, 30deg); + -o-transform: skew(0deg, 30deg); + -ms-transform: skew(0deg, 30deg); + transform: skew(0deg, 30deg); + background-color: #ccc; } .rightFace { --webkit-transform: skew(0deg, -30deg); --moz-transform: skew(0deg, -30deg); --o-transform: skew(0deg, -30deg); --ms-transform: skew(0deg, -30deg); -transform: skew(0deg, -30deg); -background-color: #ddd; -left: 200px; + -webkit-transform: skew(0deg, -30deg); + -moz-transform: skew(0deg, -30deg); + -o-transform: skew(0deg, -30deg); + -ms-transform: skew(0deg, -30deg); + transform: skew(0deg, -30deg); + background-color: #ddd; + left: 200px; } -.topFace div { --webkit-transform: skew(0deg, -30deg) scale(1, 1.16); --moz-transform: skew(0deg, -30deg) scale(1, 1.16); --o-transform: skew(0deg, -30deg) scale(1, 1.16); --ms-transform: skew(0deg, -30deg) scale(1, 1.16); -transform: skew(0deg, -30deg) scale(1, 1.16); -background-color: #eee; -font-size: 0.862em; +.topFace div { + -webkit-transform: skew(0deg, -30deg) scale(1, 1.16); + -moz-transform: skew(0deg, -30deg) scale(1, 1.16); + -o-transform: skew(0deg, -30deg) scale(1, 1.16); + -ms-transform: skew(0deg, -30deg) scale(1, 1.16); + transform: skew(0deg, -30deg) scale(1, 1.16); + background-color: #eee; + font-size: 0.862em; } .topFace { --webkit-transform: rotate(60deg); --moz-transform: rotate(60deg); --o-transform: rotate(60deg); --ms-transform: rotate(60deg); -transform: rotate(60deg); -top: -158px; -left: 100px; + -webkit-transform: rotate(60deg); + -moz-transform: rotate(60deg); + -o-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); + top: -158px; + left: 100px; } /* Optional Animations */ .cube { --webkit-transition: -webkit-transform 1s linear; --moz-transition: -moz-transform 1s linear; --o-transition: -o-transform 1s linear; --ms-transition: -ms-transform 1s linear; -transition: transform 1s linear; + -webkit-transition: -webkit-transform 1s linear; + -moz-transition: -moz-transform 1s linear; + -o-transition: -o-transform 1s linear; + -ms-transition: -ms-transform 1s linear; + transition: transform 1s linear; } .cube:hover { --webkit-transform: translate(202px, 115px); --moz-transform: translate(202px, 115px); --o-transform: translate(202px, 115px); --ms-transform: translate(202px, 115px); -transform: translate(202px, 115px); + -webkit-transform: translate(202px, 115px); + -moz-transform: translate(202px, 115px); + -o-transform: translate(202px, 115px); + -ms-transform: translate(202px, 115px); + transform: translate(202px, 115px); } \ No newline at end of file diff --git a/cube/index.html b/cube/index.html index 069b13b..a94ed41 100644 --- a/cube/index.html +++ b/cube/index.html @@ -1,41 +1,41 @@ - - - - - - CSS 3D Cube using 2D transforms — Paul Hayes - - + + + + + + CSS 3D Cube using 2D transforms — Paul Hayes + + - - + + -
-

- This is a demo, learn how it works. -

+
+

+ This is a demo, learn how it works. +

-
-
-

Top cube face

-

The top face is nested in an extra div tag to give correct rotation of skewed rectangle.

-

This face is also scaled, so the font size has been reduced to accommodate.

-
-
-

Left cube face

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-
-

Right cube face

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
-
+
+
+

Top cube face

+

The top face is nested in an extra div tag to give correct rotation of skewed rectangle.

+

This face is also scaled, so the font size has been reduced to accommodate.

+
+
+

Left cube face

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

Right cube face

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
-
- - +
+ + \ No newline at end of file diff --git a/cube/multiCubes.html b/cube/multiCubes.html index cd9a109..e6be982 100644 --- a/cube/multiCubes.html +++ b/cube/multiCubes.html @@ -1,71 +1,71 @@ - - - - - - 3D cubes built and animated with CSS — Paul Hayes - - + + + + + + 3D cubes built and animated with CSS — Paul Hayes + + - - + + -
-

- This is a demo, learn how it works. -

+
+

+ This is a demo, learn how it works. +

-
-
-

Top cube face

-

The top face is nested in an extra div tag to give correct rotation of skewed rectangle.

-

This face is also scaled, so the font size has been reduced to accommodate.

-
-
-

Left cube face

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-
-

Right cube face

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
-
-
-
-

Top cube face

-

The top face is nested in an extra div tag to give correct rotation of skewed rectangle.

-

This face is also scaled, so the font size has been reduced to accommodate.

-
-
-

Left cube face

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-
-

Right cube face

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
-
-
-
-

Top cube face

-

The top face is nested in an extra div tag to give correct rotation of skewed rectangle.

-

This face is also scaled, so the font size has been reduced to accommodate.

-
-
-

Left cube face

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-
-

Right cube face

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-
-
+
+
+

Top cube face

+

The top face is nested in an extra div tag to give correct rotation of skewed rectangle.

+

This face is also scaled, so the font size has been reduced to accommodate.

+
+
+

Left cube face

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

Right cube face

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+
+
+

Top cube face

+

The top face is nested in an extra div tag to give correct rotation of skewed rectangle.

+

This face is also scaled, so the font size has been reduced to accommodate.

+
+
+

Left cube face

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

Right cube face

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+
+
+

Top cube face

+

The top face is nested in an extra div tag to give correct rotation of skewed rectangle.

+

This face is also scaled, so the font size has been reduced to accommodate.

+
+
+

Left cube face

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

Right cube face

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
-
- - +
+ + \ No newline at end of file diff --git a/experiment-styles.css b/experiment-styles.css index bb3c649..9e29a1d 100644 --- a/experiment-styles.css +++ b/experiment-styles.css @@ -1,216 +1,220 @@ -/* Reset */ -/*************************************************/ +/* ========================================================================== + Reset + ========================================================================== */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, b, i, hgroup, menu, nav, section, time, mark, audio, video { -margin: 0; -padding: 0; -border: 0; -font-size: 100%; -vertical-align: baseline; -background: transparent; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; } ol, ul { -list-style: none; + list-style: none; } table { -border-collapse: collapse; -border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } caption, th, td { -text-align: left; -font-weight: normal; + text-align: left; + font-weight: normal; } blockquote, q { -quotes: none; + quotes: none; } blockquote:before, blockquote:after, q:before, q:after { -content: ''; -content: none; + content: ''; + content: none; } article, aside, figure, footer, header, hgroup, nav, section { -display: block; + display: block; } ins, mark { -background-color: #ff9; -text-decoration: none; + background-color: #ff9; + text-decoration: none; } button { -overflow: visible; -font-size: 1em; -padding: 0; + overflow: visible; + font-size: 1em; + padding: 0; } input, select { -vertical-align: middle; + vertical-align: middle; } -/* Tools */ -/***********************/ +/* ========================================================================== + Tools + ========================================================================== */ .clearfix:after, .clearfixItems li:after { -content: "."; -display: block; -height: 0; -clear: both; -visibility: hidden; + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } .clear { -clear: both; + clear: both; } .ir, .sprite { -text-indent: -9999px; -overflow: hidden; /* Stop focus outline issues */ + text-indent: -9999px; + overflow: hidden; /* Stop focus outline issues */ } del, .strike { -text-decoration: line-through; + text-decoration: line-through; } -abbr[title], dfn[title], acronym { -border-bottom:1px dotted #000; -cursor:help; +abbr[title], dfn[title] { + border-bottom:1px dotted #000; + cursor:help; } button { -overflow: visible; -font-size: 1em; -padding: 0; + overflow: visible; + font-size: 1em; + padding: 0; } .hide { -display: none; + display: none; } -strong,.strong,b,th,dt,label { -font-weight: bold; +strong, .strong, b, th, dt, label { + font-weight: bold; } i, em, .italic, blockquote, cite, q { -font-style: italic; + font-style: italic; } .norm, strong span, label span, h1 span, h2 span, h3 span { -font-weight: normal; + font-weight: normal; } blockquote em, blockquote cite, blockquote i { -font-variant: normal; + font-variant: normal; } small, .small { -font-size: smaller; + font-size: smaller; } input.submit, button, a, label { -cursor: pointer; + cursor: pointer; } legend { -position: absolute; -z-index: -1; -font-size: 0; -height: 0; -color: transparent; + position: absolute; + z-index: -1; + font-size: 0; + height: 0; + color: transparent; } -/* Typography */ -/***********************/ +/* ========================================================================== + Typography + ========================================================================== */ body { -font-size: 1em; -line-height: 1.5em; /* 16px/24px default */ -color: #666; -background: #f1ebe2; -font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; -font-weight: 200; + font-size: 1em; + line-height: 1.5em; /* 16px/24px default */ + color: #666; + background: #f1ebe2; + font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; + font-weight: 200; } textarea, .sans { -font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; + font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; } -h1,h2,h3,h4,h5,h6 { -font-weight: 200; +h1, h2, h3, h4, h5, h6 { + font-weight: 200; } p, ul, ol, dl, table, address, .r { -margin-bottom: 24px; -line-height: 24px; + margin-bottom: 24px; + line-height: 24px; } ul ul, ol ol, ol ul, ul ol, dl dl, dl ul, dl ol, ul dl, ol dl { -margin-bottom: 0; -} - -/* Grid */ -/*************************************************/ - -.g1 { width:60px; } -.g2 { width:140px; } -.g3 { width:220px; } -.g4 { width:300px; } -.g5 { width:380px; } -.g6 { width:460px; } -.g7 { width:540px; } -.g8 { width:620px; } -.g9 { width:700px; } -.g10 { width:780px; } -.g11 { width:860px; } -.g12 { width:940px; } + margin-bottom: 0; +} + +/* ========================================================================== + Grid + ========================================================================== */ + +.g1 { width: 60px; } +.g2 { width: 140px; } +.g3 { width: 220px; } +.g4 { width: 300px; } +.g5 { width: 380px; } +.g6 { width: 460px; } +.g7 { width: 540px; } +.g8 { width: 620px; } +.g9 { width: 700px; } +.g10 { width: 780px; } +.g11 { width: 860px; } +.g12 { width: 940px; } .g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12, .g { -margin: 0 10px; -overflow: hidden; -float: left; -display: inline; + margin: 0 10px; + overflow: hidden; + float: left; + display: inline; } .r, .grid { -width: 960px; -margin: 0 auto; -overflow: hidden; + width: 960px; + margin: 0 auto; + overflow: hidden; } .grid { -overflow: visible; + overflow: visible; } a { -color: #333; + color: #333; } a:visited { -font-weight: normal; + font-weight: normal; } .strong a:visited, a.strong:visited { -font-weight: bold; + font-weight: bold; } a:hover, a:focus, a:active { -color: #000; -text-decoration: underline; + color: #000; + text-decoration: underline; } -.experiment #learn { -text-align: center; -background: #fff; -margin-bottom: 24px; -padding: 12px 0; -border-bottom: 1px solid #ccc; +.experiment .learn { + text-align: center; + background: #fff; + margin-bottom: 24px; + padding: 12px 0; + border-bottom: 1px solid #ccc; } \ No newline at end of file diff --git a/media-query-transitions/css/experiment.css b/media-query-transitions/css/experiment.css index 629b232..a9fa5bf 100644 --- a/media-query-transitions/css/experiment.css +++ b/media-query-transitions/css/experiment.css @@ -2,58 +2,58 @@ /* Setup fast transitions */ .mq { - -webkit-transition: width 0.001ms; - -moz-transition: width 0.001ms; - -o-transition: width 0.001ms; - transition: width 0.001ms; - width: 0; + -webkit-transition: width 0.001ms; + -moz-transition: width 0.001ms; + -o-transition: width 0.001ms; + transition: width 0.001ms; + width: 0; } /* Extra niceties */ /*************************************************/ section { -width: 640px; -margin: 0 auto; -text-shadow: 0 1px 0 #fff; -text-align: center; + width: 640px; + margin: 0 auto; + text-shadow: 0 1px 0 #fff; + text-align: center; } .dynamic { -font-size: 14px; -font-weight: normal; + font-size: 14px; + font-weight: normal; } .dynamic p { -margin-bottom: 0; + margin-bottom: 0; } .dynamic p:first-child { -font-weight: bold; -margin-bottom: 6px; + font-weight: bold; + margin-bottom: 6px; } .dynamic p:nth-child(n+5) { -opacity: 0.8; + opacity: 0.8; } .dynamic p:nth-child(n+10) { -opacity: 0.4; + opacity: 0.4; } .dynamic p:nth-child(n+20) { -opacity: 0.1; + opacity: 0.1; } section h2 { -font-size: 24px; -line-height: 36px; + font-size: 24px; + line-height: 36px; } @media all and (max-width: 740px) { - section { + section { width: auto; margin: 20px; - -webkit-transition: none; /* make transition event one direction only */ - } + -webkit-transition: none; /* make transition event one direction only */ + } } \ No newline at end of file diff --git a/media-query-transitions/index.html b/media-query-transitions/index.html index 84ada42..82b04ad 100644 --- a/media-query-transitions/index.html +++ b/media-query-transitions/index.html @@ -1,29 +1,29 @@ - - - - - - Link JavaScript and Media Queries using CSS Transitions — Paul Hayes - - + + + + + + Link JavaScript and Media Queries using CSS Transitions — Paul Hayes + + - - + + -
-

- This is a demo, learn how it works. -

+
+

+ This is a demo, learn how it works. +

-

Media query rules as they are matched

-

Resize the window to see content dynamically update.

-
+

Media query rules as they are matched

+

Resize the window to see content dynamically update.

+
-
- - +
+ + \ No newline at end of file diff --git a/media-query-transitions/js/experiment.js b/media-query-transitions/js/experiment.js index da093b1..cc40b66 100644 --- a/media-query-transitions/js/experiment.js +++ b/media-query-transitions/js/experiment.js @@ -36,14 +36,14 @@ mql = (function(doc, undefined) { div.innerHTML = '­'; // add transition event listeners - div.addEventListener('webkitTransitionEnd', callback, false); + div.addEventListener('webkitTransitionEnd', callback, false); div.addEventListener('transitionend', callback, false); //Firefox div.addEventListener('oTransitionEnd', callback, false); //Opera docElem.insertBefore(div, refNode); // original polyfill removes element, we need to keep element for transitions to continue and events to fire. - + return { matches: div.offsetWidth == 42, media: q diff --git a/modal/css/experiment.css b/modal/css/experiment.css index b557a0b..51f4754 100644 --- a/modal/css/experiment.css +++ b/modal/css/experiment.css @@ -1,189 +1,189 @@ /* Container */ .modal { -/* Overlay page content */ -position: fixed; -top: 0; -left: 0; -right: 0; -bottom: 0; -background: rgba(0,0,0,0.5); -z-index: 10000; - -/* Transition opacity on open */ --webkit-transition: opacity 500ms ease-in; --moz-transition: opacity 500ms ease-in; -transition: opacity 500ms ease-in; - -/* Hide for now */ -opacity: 0; -pointer-events: none; + /* Overlay page content */ + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.5); + z-index: 10000; + + /* Transition opacity on open */ + -webkit-transition: opacity 500ms ease-in; + -moz-transition: opacity 500ms ease-in; + transition: opacity 500ms ease-in; + + /* Hide for now */ + opacity: 0; + pointer-events: none; } /* Show modal */ .modal:target { -opacity: 1; -pointer-events: auto; -/* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */ + opacity: 1; + pointer-events: auto; + /* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */ } /* Content */ .modal > div { -width: 500px; -background: #fff; -position: relative; -margin: 10% auto; - -/* Default minimise animation */ --webkit-animation: minimise 500ms linear; --moz-animation: minimise 500ms linear; - -/* Prettify */ -padding: 30px; -border-radius: 7px; -box-shadow: 0 3px 20px rgba(0,0,0,0.9); -background: #fff; -background: -moz-linear-gradient(#fff, #ccc); -background: -webkit-linear-gradient(#fff, #ccc); -background: -o-linear-gradient(#fff, #ccc); -text-shadow: 0 1px 0 #fff; + width: 500px; + background: #fff; + position: relative; + margin: 10% auto; + + /* Default minimise animation */ + -webkit-animation: minimise 500ms linear; + -moz-animation: minimise 500ms linear; + + /* Prettify */ + padding: 30px; + border-radius: 7px; + box-shadow: 0 3px 20px rgba(0,0,0,0.9); + background: #fff; + background: -moz-linear-gradient(#fff, #ccc); + background: -webkit-linear-gradient(#fff, #ccc); + background: -o-linear-gradient(#fff, #ccc); + text-shadow: 0 1px 0 #fff; } /* Override animation on modal open */ .modal:target > div { --webkit-animation-name: bounce; --moz-animation-name: bounce; + -webkit-animation-name: bounce; + -moz-animation-name: bounce; } .modal h2 { -font-size: 36px; -padding: 0 0 20px; + font-size: 36px; + padding: 0 0 20px; } @-webkit-keyframes bounce { 0% { - -webkit-transform: scale3d(0.1,0.1,1); - box-shadow: 0 3px 20px rgba(0,0,0,0.9); + -webkit-transform: scale3d(0.1,0.1,1); + box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { - -webkit-transform: scale3d(1.08,1.08,1); - box-shadow: 0 10px 20px rgba(0,0,0,0); + -webkit-transform: scale3d(1.08,1.08,1); + box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { - -webkit-transform: scale3d(0.95,0.95,1); - box-shadow: 0 0 20px rgba(0,0,0,0.9); + -webkit-transform: scale3d(0.95,0.95,1); + box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { - -webkit-transform: scale3d(1,1,1); - box-shadow: 0 3px 20px rgba(0,0,0,0.9); + -webkit-transform: scale3d(1,1,1); + box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @-webkit-keyframes minimise { 0% { - -webkit-transform: scale3d(1,1,1); + -webkit-transform: scale3d(1,1,1); } 100% { - -webkit-transform: scale3d(0.1,0.1,1); + -webkit-transform: scale3d(0.1,0.1,1); } } @-moz-keyframes bounce { 0% { - -moz-transform: scale3d(0.1,0.1,1); - box-shadow: 0 3px 20px rgba(0,0,0,0.9); + -moz-transform: scale3d(0.1,0.1,1); + box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { - -moz-transform: scale3d(1.08,1.08,1); - box-shadow: 0 10px 20px rgba(0,0,0,0); + -moz-transform: scale3d(1.08,1.08,1); + box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { - -moz-transform: scale3d(0.95,0.95,1); - box-shadow: 0 0 20px rgba(0,0,0,0.9); + -moz-transform: scale3d(0.95,0.95,1); + box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { - -moz-transform: scale3d(1,1,1); - box-shadow: 0 3px 20px rgba(0,0,0,0.9); + -moz-transform: scale3d(1,1,1); + box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @-moz-keyframes minimise { 0% { - -moz-transform: scale3d(1,1,1); + -moz-transform: scale3d(1,1,1); } 100% { - -moz-transform: scale3d(0.1,0.1,1); + -moz-transform: scale3d(0.1,0.1,1); } } /* Modal close link */ .modal a[href="#close"] { -position: absolute; -right: 0; -top: 0; -color: transparent; + position: absolute; + right: 0; + top: 0; + color: transparent; } /* Reset native styles */ .modal a[href="#close"]:focus { -outline: none; + outline: none; } /* Create close button */ .modal a[href="#close"]:after { -content: 'X'; -display: block; - -/* Position */ -position: absolute; -right: -10px; -top: -10px; -width: 1.5em; -padding: 1px 1px 1px 2px; - -/* Style */ -text-decoration: none; -text-shadow: none; -text-align: center; -font-weight: bold; -background: #000; -color: #fff; -border: 3px solid #fff; -border-radius: 20px; -box-shadow: 0 1px 3px rgba(0,0,0,0.5); -} - -.modal a[href="#close"]:focus:after, -.modal a[href="#close"]:hover:after { --webkit-transform: scale(1.1,1.1); --moz-transform: scale(1.1,1.1); + content: 'X'; + display: block; + + /* Position */ + position: absolute; + right: -10px; + top: -10px; + width: 1.5em; + padding: 1px 1px 1px 2px; + + /* Style */ + text-decoration: none; + text-shadow: none; + text-align: center; + font-weight: bold; + background: #000; + color: #fff; + border: 3px solid #fff; + border-radius: 20px; + box-shadow: 0 1px 3px rgba(0,0,0,0.5); + } + + .modal a[href="#close"]:focus:after, + .modal a[href="#close"]:hover:after { + -webkit-transform: scale(1.1,1.1); + -moz-transform: scale(1.1,1.1); } .modal a[href="#close"]:focus:after { -outline: 1px solid #000; + outline: 1px solid #000; } /* Open modal */ a.openModal { -margin: 1em auto; -display: block; -width: 200px; -background: #ccc; -text-align: center; -padding: 10px; -border-radius: 7px; -background: #fff; -background: -moz-linear-gradient(#fff, #ddd); -background: -webkit-linear-gradient(#fff, #ddd); -background: -o-linear-gradient(#fff, #ddd); -text-shadow: 0 1px 0 #fff; -border: 1px solid rgba(0,0,0,0.1); -box-shadow: 0 1px 1px rgba(0,0,0,0.3); + margin: 1em auto; + display: block; + width: 200px; + background: #ccc; + text-align: center; + padding: 10px; + border-radius: 7px; + background: #fff; + background: -moz-linear-gradient(#fff, #ddd); + background: -webkit-linear-gradient(#fff, #ddd); + background: -o-linear-gradient(#fff, #ddd); + text-shadow: 0 1px 0 #fff; + border: 1px solid rgba(0,0,0,0.1); + box-shadow: 0 1px 1px rgba(0,0,0,0.3); } a.openModal:hover, a.openModal:focus { -background: -moz-linear-gradient(#fff, #ccc); -background: -webkit-linear-gradient(#fff, #ccc); -background: -o-linear-gradient(#fff, #ccc); + background: -moz-linear-gradient(#fff, #ccc); + background: -webkit-linear-gradient(#fff, #ccc); + background: -o-linear-gradient(#fff, #ccc); } \ No newline at end of file diff --git a/modal/index.html b/modal/index.html index 5e71940..4cf737a 100644 --- a/modal/index.html +++ b/modal/index.html @@ -1,40 +1,40 @@ - - - - - - Animating modal built with CSS animations and pointer-events — Paul Hayes - - + + + + + + Animating modal built with CSS animations and pointer-events — Paul Hayes + + - - + + -
-

- This is a demo, learn how it works. -

+
+

+ This is a demo, learn how it works. +

Open modal Open a different modal -
- - +
+ + \ No newline at end of file diff --git a/parallax/css/experiment.css b/parallax/css/experiment.css index 274c7f6..9b5826a 100644 --- a/parallax/css/experiment.css +++ b/parallax/css/experiment.css @@ -1,43 +1,43 @@ -/* +/* Parallax Experiment Date: 2nd April 2009 Author: Paul Hayes */ #background { -background: url('../images/foreground.png') 5% 5%, url('../images/midground.png') 50% 50%, url('../images/background.png') 90% 110%; -top: 90px; -left: 0; -right: 0; -bottom: 0; -position: fixed; --webkit-transition: left 300s linear; --moz-transition: left 300s linear; --o-transition: left 300s linear; --ms-transition: left 300s linear; -transition: left 300s linear; + background: url('../images/foreground.png') 5% 5%, url('../images/midground.png') 50% 50%, url('../images/background.png') 90% 110%; + top: 90px; + left: 0; + right: 0; + bottom: 0; + position: fixed; + -webkit-transition: left 300s linear; + -moz-transition: left 300s linear; + -o-transition: left 300s linear; + -ms-transition: left 300s linear; + transition: left 300s linear; } #experiment:target #background { -left: -5000px; + left: -5000px; } #experiment:hover #background { -left: -9999px; + left: -9999px; } #content { -margin: 3em 10em; -background-color: #333; -opacity: 0.95; -color: #ccc; -padding: 3em; -position: fixed; -border: 2px solid #666; + margin: 3em 10em; + background-color: #333; + opacity: 0.95; + color: #ccc; + padding: 3em; + position: fixed; + border: 2px solid #666; } #content h2 { -margin: 1em 0; -font-weight: bold; -font-size: 26px; + margin: 1em 0; + font-weight: bold; + font-size: 26px; } \ No newline at end of file diff --git a/parallax/index.html b/parallax/index.html index 9f5f978..f3ee3b9 100644 --- a/parallax/index.html +++ b/parallax/index.html @@ -1,31 +1,31 @@ - - - - - - Parallax effect built with CSS transitions — Paul Hayes - - + + + + + + Parallax effect built with CSS transitions — Paul Hayes + + - - + + -
-

- This is a demo, learn how it works. -

+
+

+ This is a demo, learn how it works. +

-
-
-

Mouse over to begin animation

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
+
+
+

Mouse over to begin animation

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
-
- - +
+ + \ No newline at end of file diff --git a/pyramid/css/experiment.css b/pyramid/css/experiment.css index 3de0bd8..47c5622 100644 --- a/pyramid/css/experiment.css +++ b/pyramid/css/experiment.css @@ -1,15 +1,24 @@ #pyramid { -position: relative; -margin: 100px auto; -height: 500px; -width: 100px; --webkit-transform-style: preserve-3d; --webkit-animation: spin 10s linear infinite; --webkit-transform-origin: 116px 200px 116px; + position: relative; + margin: 100px auto; + height: 500px; + width: 100px; + -webkit-transform-style: preserve-3d; + -webkit-animation: spin 10s linear infinite; + -webkit-transform-origin: 116px 200px 116px; + + -moz-transform-style: preserve-3d; + -moz-animation: spin 10s linear infinite; + -moz-transform-origin: 116px 200px 116px; + + -ms-transform-style: preserve-3d; + -ms-animation: spin 10s linear infinite; + -ms-transform-origin: 116px 200px 116px; + + transform-style: preserve-3d; + animation: spin 10s linear infinite; + transform-origin: 116px 200px 116px; --moz-transform-style: preserve-3d; --moz-animation: spin 10s linear infinite; --moz-transform-origin: 116px 200px 116px; } @-webkit-keyframes spin { @@ -30,43 +39,71 @@ width: 100px; } } +@-ms-keyframes spin { + from { + -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); + } + to { + -ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); + } +} + +@keyframes spin { + from { + transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); + } + to { + transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); + } +} + #pyramid > div { -position: absolute; -border-style: solid; -border-width: 200px 0 200px 346px; --webkit-transform-origin: 0 0; --moz-transform-origin: 0 0; + position: absolute; + border-style: solid; + border-width: 200px 0 200px 346px; + -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; } /* Put some text on each face */ #pyramid > div:after { -position: absolute; -content: "Triangle"; -color: #fff; -left: -250px; -text-align: center; + position: absolute; + content: "Triangle"; + color: #fff; + left: -250px; + text-align: center; } #pyramid > div:first-child { -border-color: transparent transparent transparent rgba(50, 50, 50, 0.6); --webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px); --moz-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px); + border-color: transparent transparent transparent rgba(50, 50, 50, 0.6); + -webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px); + -moz-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px); + -ms-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px); + transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px); } #pyramid > div:nth-child(2) { -border-color: transparent transparent transparent rgba(50, 50, 50, 0.6); --webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px); --moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px); + border-color: transparent transparent transparent rgba(50, 50, 50, 0.6); + -webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px); + -moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px); + -ms-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px); + transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px); } #pyramid > div:nth-child(3) { -border-color: transparent transparent transparent rgba(50, 50, 50, 0.9); --webkit-transform: rotateX(60deg) rotateY(19.5deg); --moz-transform: rotateX(60deg) rotateY(19.5deg); + border-color: transparent transparent transparent rgba(50, 50, 50, 0.9); + -webkit-transform: rotateX(60deg) rotateY(19.5deg); + -moz-transform: rotateX(60deg) rotateY(19.5deg); + -ms-transform: rotateX(60deg) rotateY(19.5deg); + transform: rotateX(60deg) rotateY(19.5deg); } #pyramid > div:nth-child(4) { -border-color: transparent transparent transparent rgba(50, 50, 50, 0.8); --webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px); --moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px); + border-color: transparent transparent transparent rgba(50, 50, 50, 0.8); + -webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px); + -moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px); + -ms-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px); + transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px); } diff --git a/pyramid/index.html b/pyramid/index.html index 9139c43..86119e4 100644 --- a/pyramid/index.html +++ b/pyramid/index.html @@ -1,32 +1,32 @@ - - - - - - A tetrahedron built with CSS 3D transforms — Paul Hayes - - + + + + + + A tetrahedron built with CSS 3D transforms — Paul Hayes + + - - + + -
-

- This is a demo, learn how it works. -

- -
- - +
+ + \ No newline at end of file diff --git a/sphere/css/experiment.css b/sphere/css/experiment.css index c9116ea..991bc72 100644 --- a/sphere/css/experiment.css +++ b/sphere/css/experiment.css @@ -1,37 +1,37 @@ #sphere { -width: 100px; -height: 100px; -margin: 200px auto; --webkit-perspective: 800; --moz-perspective: 800; + width: 100px; + height: 100px; + margin: 200px auto; + -webkit-perspective: 800; + -moz-perspective: 800; } .container { -width: 100px; -height: 100px; --webkit-transition: -webkit-transform 200ms linear; --webkit-transform-style: preserve-3d; --moz-transition: -moz-transform 200ms linear; --moz-transform-style: preserve-3d; + width: 100px; + height: 100px; + -webkit-transition: -webkit-transform 200ms linear; + -webkit-transform-style: preserve-3d; + -moz-transition: -moz-transform 200ms linear; + -moz-transform-style: preserve-3d; } .container > ul { --webkit-transform-style: preserve-3d; --moz-transform-style: preserve-3d; -width: 100%; -height: 100%; -position: absolute; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + width: 100%; + height: 100%; + position: absolute; } .container li { -width: 98px; -height: 98px; -position: absolute; -display: block; -background: #000; -border: 1px solid #fff; -opacity: 0.1; -border-radius: 50px; + width: 98px; + height: 98px; + position: absolute; + display: block; + background: #000; + border: 1px solid #fff; + opacity: 0.1; + border-radius: 50px; } /* Different spheres */ @@ -40,82 +40,82 @@ border-radius: 50px; /* Square */ #sphere.square li { -border-radius: 0; + border-radius: 0; } /* Kaleidoscope */ #sphere.kaleidoscope li { -opacity: 0.9; --webkit-animation: borderRadius 5s linear infinite alternate; --moz-animation: borderRadius 5s linear infinite alternate; + opacity: 0.9; + -webkit-animation: borderRadius 5s linear infinite alternate; + -moz-animation: borderRadius 5s linear infinite alternate; } /* Eye */ #sphere.eye li { -opacity: 0.5; -background: #fff; + opacity: 0.5; + background: #fff; } #sphere.eye li:nth-child(7), #sphere.eye li:nth-child(8), #sphere.eye li:nth-child(6) { -background: #000; -opacity: 1; + background: #000; + opacity: 1; } /* Single */ #sphere.single ul:nth-child(n+2) { -opacity: 0; + opacity: 0; } /* Contact */ #sphere.contact ul { -opacity: 0; + opacity: 0; } #sphere.contact ul:nth-child(1), #sphere.contact ul:nth-child(4) { -opacity: 0.8; + opacity: 0.8; } #sphere.contact .rotator { --webkit-animation: spinHorizontal 2s linear infinite; --moz-animation: spinHorizontal 2s linear infinite; + -webkit-animation: spinHorizontal 2s linear infinite; + -moz-animation: spinHorizontal 2s linear infinite; } #sphere.contact ul:nth-child(1) { --webkit-animation: spinVerticalReverse 5s linear infinite; --moz-animation: spinVerticalReverse 5s linear infinite; + -webkit-animation: spinVerticalReverse 5s linear infinite; + -moz-animation: spinVerticalReverse 5s linear infinite; } #sphere.contact ul:nth-child(4) { --webkit-animation: spinVertical 5s linear infinite; --moz-animation: spinVertical 5s linear infinite; + -webkit-animation: spinVertical 5s linear infinite; + -moz-animation: spinVertical 5s linear infinite; } .contact .rotator { --webkit-transition: -webkit-transform 500ms linear; --webkit-transform-style: preserve-3d; + -webkit-transition: -webkit-transform 500ms linear; + -webkit-transform-style: preserve-3d; --moz-transition: -moz-transform 500ms linear; --moz-transform-style: preserve-3d; + -moz-transition: -moz-transform 500ms linear; + -moz-transform-style: preserve-3d; } /* Half */ #sphere.half li { -background: #000; + background: #000; } #sphere.half li:nth-child(n+12), #sphere.half ul:nth-child(n+4) li:nth-child(1) { -display: none; + display: none; } /* Animations */ @@ -123,102 +123,102 @@ display: none; @-webkit-keyframes spinHorizontal { from { - -webkit-transform: rotateY(0deg); + -webkit-transform: rotateY(0deg); } to { - -webkit-transform: rotateY(360deg); + -webkit-transform: rotateY(360deg); } } @-webkit-keyframes spinVertical { from { - -webkit-transform: rotateX(0deg); + -webkit-transform: rotateX(0deg); } to { - -webkit-transform: rotateX(360deg); + -webkit-transform: rotateX(360deg); } } @-webkit-keyframes spinVerticalReverse { from { - -webkit-transform: rotateX(360deg); + -webkit-transform: rotateX(360deg); } to { - -webkit-transform: rotateX(0deg); + -webkit-transform: rotateX(0deg); } } @-webkit-keyframes borderRadius { from { - border-radius: 5px; + border-radius: 5px; } to { - border-radius: 50px; + border-radius: 50px; } } @-moz-keyframes spinHorizontal { from { - -moz-transform: rotateY(0deg); + -moz-transform: rotateY(0deg); } to { - -moz-transform: rotateY(360deg); + -moz-transform: rotateY(360deg); } } @-moz-keyframes spinVertical { from { - -moz-transform: rotateX(0deg); + -moz-transform: rotateX(0deg); } to { - -moz-transform: rotateX(360deg); + -moz-transform: rotateX(360deg); } } @-moz-keyframes spinVerticalReverse { from { - -moz-transform: rotateX(360deg); + -moz-transform: rotateX(360deg); } to { - -moz-transform: rotateX(0deg); + -moz-transform: rotateX(0deg); } } @-moz-keyframes borderRadius { from { - border-radius: 5px; + border-radius: 5px; } to { - border-radius: 50px; + border-radius: 50px; } } .test p { -text-align: center; + text-align: center; } #controls { -position: absolute; -left: 20px; -top: 115px; + position: absolute; + left: 20px; + top: 115px; } #controls fieldset { -border: 1px dotted #000; -padding: 0.5em 1em 0 0.5em; + border: 1px dotted #000; + padding: 0.5em 1em 0 0.5em; } #controls label { -font-weight: normal; + font-weight: normal; } #controls div { -margin: 0 0 0.5em; + margin: 0 0 0.5em; } #controls input { -vertical-align: baseline; + vertical-align: baseline; } \ No newline at end of file diff --git a/sphere/index.html b/sphere/index.html index 51ed345..16f6b03 100644 --- a/sphere/index.html +++ b/sphere/index.html @@ -1,63 +1,63 @@ - - - - - - A sphere built with CSS 3D transforms — Paul Hayes - - + + + + + + A sphere built with CSS 3D transforms — Paul Hayes + + - - + + -
-

- This is a demo, learn how it works. -

+
+

+ This is a demo, learn how it works. +

-
-
-
+
+
+

Click and drag, use touch gestures or arrow keys.

-
- Sphere styles -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
+
+ Sphere styles +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
-
- - +
+ + \ No newline at end of file diff --git a/sphere/js/experiment.js b/sphere/js/experiment.js index d1d0ab0..f9e5e33 100644 --- a/sphere/js/experiment.js +++ b/sphere/js/experiment.js @@ -1,155 +1,155 @@ $(function(){ - - var el = document.createElement('div'), - transformProps = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '), - transformProp = support(transformProps); - - function support(props) { - for(var i = 0, l = props.length; i < l; i++) { - if(typeof el.style[props[i]] !== "undefined") { - return props[i]; - } - } - } - - var $sphere = $('#sphere'), - sphere = { - rounds: 8, - panels: 24, - panelWidth: 100, - el: $sphere.find('.container'), - build: function(p, r) { - - var panels = p || this.panels, - rounds = r || this.rounds, - rotationPerPanel = 360/panels, - rotationPerRound = 360/2/rounds, - yRotation, - xRotation, - width = this.panelWidth, - zTranslate = (width/2) / Math.tan(rotationPerPanel * Math.PI/180), - $container = this.el, - $ul, - $li, - i, j; - - this.el.html(''); - for(i = 0; i < rounds; i++) { - $ul = $('
    '); - xRotation = rotationPerRound * i; - $ul[0].style[transformProp] = "rotateX("+ xRotation + "deg)"; - for(j = 0; j < panels; j++) { - $li = $('
  • '); - yRotation = rotationPerPanel * j; - $li[0].style[transformProp] = "rotateY("+ yRotation +"deg) translateZ("+ zTranslate +"px)"; - $ul.append($li); - } - $container.append($ul); - } - } - }, - mouse = { - start : {} - }, - touch = document.ontouchmove !== undefined, - viewport = { - x: 0, - y: 0, - el: $('#sphere .container')[0], - move: function(coords) { - if(coords) { - if(typeof coords.x === "number") this.x = coords.x; - if(typeof coords.y === "number") this.y = coords.y; - } - this.el.style[transformProp] = "rotateX("+this.x+"deg) rotateY("+this.y+"deg)"; - }, - reset: function() { - this.move({x: 0, y: 0}); - } - }; - - sphere.build(); - - $(document).keydown(function(evt) { - switch(evt.keyCode) { - case 37: // left - viewport.move({y: viewport.y - 90}); - break; - - case 38: // up - evt.preventDefault(); - viewport.move({x: viewport.x + 90}); - break; - - case 39: // right - viewport.move({y: viewport.y + 90}); - break; - - case 40: // down - evt.preventDefault(); - viewport.move({x: viewport.x - 90}); - break; - - case 27: //esc - viewport.reset(); - break; - - default: - break; - }; - }).bind('mousedown touchstart', function(evt) { - delete mouse.last; - - evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null; - mouse.start.x = evt.pageX; - mouse.start.y = evt.pageY; - $(document).bind('mousemove touchmove', function(event) { - // Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom) - if(!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) { - event.preventDefault(); - // Get touch co-ords - event.originalEvent.touches ? event = event.originalEvent.touches[0] : null; - $sphere.trigger('move-viewport', {x: event.pageX, y: event.pageY}); - } - }); - - $(document).bind('mouseup touchend', function () { - $(document).unbind('mousemove touchmove'); - }); - }); - - $sphere.bind('move-viewport', function(evt, movedMouse) { - - // Reduce movement on touch screens - var movementScaleFactor = touch ? 4 : 1; - - if (!mouse.last) { - mouse.last = mouse.start; - } else { - if (forward(mouse.start.x, mouse.last.x) != forward(mouse.last.x, movedMouse.x)) { - mouse.start.x = mouse.last.x; - } - if (forward(mouse.start.y, mouse.last.y) != forward(mouse.last.y, movedMouse.y)) { - mouse.start.y = mouse.last.y; - } - } - - viewport.move({ - x: viewport.x + parseInt((mouse.start.y - movedMouse.y)/movementScaleFactor), - y: viewport.y - parseInt((mouse.start.x - movedMouse.x)/movementScaleFactor) - }); - - mouse.last.x = movedMouse.x; - mouse.last.y = movedMouse.y; - - function forward(v1, v2) { - return v1 >= v2; - } - }); - - /* Change sphere style */ - $('#controls').bind('submit change', function(evt) { - evt.preventDefault(); - $sphere.attr('class','').addClass($(evt.target).val()); - }); + + var el = document.createElement('div'), + transformProps = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '), + transformProp = support(transformProps); + + function support(props) { + for(var i = 0, l = props.length; i < l; i++) { + if(typeof el.style[props[i]] !== "undefined") { + return props[i]; + } + } + } + + var $sphere = $('#sphere'), + sphere = { + rounds: 8, + panels: 24, + panelWidth: 100, + el: $sphere.find('.container'), + build: function(p, r) { + + var panels = p || this.panels, + rounds = r || this.rounds, + rotationPerPanel = 360/panels, + rotationPerRound = 360/2/rounds, + yRotation, + xRotation, + width = this.panelWidth, + zTranslate = (width/2) / Math.tan(rotationPerPanel * Math.PI/180), + $container = this.el, + $ul, + $li, + i, j; + + this.el.html(''); + for(i = 0; i < rounds; i++) { + $ul = $('
      '); + xRotation = rotationPerRound * i; + $ul[0].style[transformProp] = "rotateX("+ xRotation + "deg)"; + for(j = 0; j < panels; j++) { + $li = $('
    • '); + yRotation = rotationPerPanel * j; + $li[0].style[transformProp] = "rotateY("+ yRotation +"deg) translateZ("+ zTranslate +"px)"; + $ul.append($li); + } + $container.append($ul); + } + } + }, + mouse = { + start : {} + }, + touch = document.ontouchmove !== undefined, + viewport = { + x: 0, + y: 0, + el: $('#sphere .container')[0], + move: function(coords) { + if(coords) { + if(typeof coords.x === "number") this.x = coords.x; + if(typeof coords.y === "number") this.y = coords.y; + } + this.el.style[transformProp] = "rotateX("+this.x+"deg) rotateY("+this.y+"deg)"; + }, + reset: function() { + this.move({x: 0, y: 0}); + } + }; + + sphere.build(); + + $(document).keydown(function(evt) { + switch(evt.keyCode) { + case 37: // left + viewport.move({y: viewport.y - 90}); + break; + + case 38: // up + evt.preventDefault(); + viewport.move({x: viewport.x + 90}); + break; + + case 39: // right + viewport.move({y: viewport.y + 90}); + break; + + case 40: // down + evt.preventDefault(); + viewport.move({x: viewport.x - 90}); + break; + + case 27: //esc + viewport.reset(); + break; + + default: + break; + }; + }).bind('mousedown touchstart', function(evt) { + delete mouse.last; + + evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null; + mouse.start.x = evt.pageX; + mouse.start.y = evt.pageY; + $(document).bind('mousemove touchmove', function(event) { + // Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom) + if(!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) { + event.preventDefault(); + // Get touch co-ords + event.originalEvent.touches ? event = event.originalEvent.touches[0] : null; + $sphere.trigger('move-viewport', {x: event.pageX, y: event.pageY}); + } + }); + + $(document).bind('mouseup touchend', function () { + $(document).unbind('mousemove touchmove'); + }); + }); + + $sphere.bind('move-viewport', function(evt, movedMouse) { + + // Reduce movement on touch screens + var movementScaleFactor = touch ? 4 : 1; + + if (!mouse.last) { + mouse.last = mouse.start; + } else { + if (forward(mouse.start.x, mouse.last.x) != forward(mouse.last.x, movedMouse.x)) { + mouse.start.x = mouse.last.x; + } + if (forward(mouse.start.y, mouse.last.y) != forward(mouse.last.y, movedMouse.y)) { + mouse.start.y = mouse.last.y; + } + } + + viewport.move({ + x: viewport.x + parseInt((mouse.start.y - movedMouse.y)/movementScaleFactor), + y: viewport.y - parseInt((mouse.start.x - movedMouse.x)/movementScaleFactor) + }); + + mouse.last.x = movedMouse.x; + mouse.last.y = movedMouse.y; + + function forward(v1, v2) { + return v1 >= v2; + } + }); + + /* Change sphere style */ + $('#controls').bind('submit change', function(evt) { + evt.preventDefault(); + $sphere.attr('class','').addClass($(evt.target).val()); + }); }); \ No newline at end of file diff --git a/webcam/index.html b/webcam/index.html index 45fa1ed..019145e 100644 --- a/webcam/index.html +++ b/webcam/index.html @@ -1,23 +1,23 @@ - - - - - - Face detection, canvas & webcams — Paul Hayes - - + + + + + + Face detection, canvas & webcams — Paul Hayes + + - - + + -
      -

      - This is a demo, learn how it works. -

      +
      +

      + This is a demo, learn how it works. +

      This element ought to shrink or grow as you move towards or away from it.

      @@ -25,7 +25,7 @@ -
      - - +
      + + \ No newline at end of file diff --git a/webcam/mask.html b/webcam/mask.html index 871f1c7..b8c6059 100644 --- a/webcam/mask.html +++ b/webcam/mask.html @@ -1,29 +1,29 @@ - - - - - - Masks, face detection, canvas & webcams — Paul Hayes - - + + + + + + Masks, face detection, canvas & webcams — Paul Hayes + + - - + + -
      -

      - This is a demo, learn how it works. -

      +
      +

      + This is a demo, learn how it works. +

      -
      - - +
      + + \ No newline at end of file