Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added ad code and added Steve Henshaw's fixes

  • Loading branch information...
commit a05405cd7e77b8e43756765bd824178f8efd0f8d 1 parent f988705
@richbradshaw authored
View
6 demos/3d.php
@@ -199,7 +199,11 @@
}
</style>
<body>
-
+ <div id="top_ads">
+<!-- BuySellAds.com Zone Code -->
+<div id="bsap_1273358" class="bsarocks bsap_6db88c5a69495071ea29eb766bc6ddf6"></div>
+<!-- End BuySellAds.com Zone Code -->
+ </div>
<header>
<h1>A 3D Anaglyph</h1>
<p>Use red cyan 3D glasses – who needs 3D TV or 3D monitors when you can have this!</p>
View
6 demos/cubecarousel.php
@@ -111,7 +111,11 @@
</script>
</head>
<body>
-
+ <div id="top_ads">
+<!-- BuySellAds.com Zone Code -->
+<div id="bsap_1273358" class="bsarocks bsap_6db88c5a69495071ea29eb766bc6ddf6"></div>
+<!-- End BuySellAds.com Zone Code -->
+ </div>
<header>
<h1>A 3D Carousel</h1>
</header>
View
6 demos/index.php
@@ -15,7 +15,11 @@
</script>
</head>
<body>
-
+ <div id="top_ads">
+<!-- BuySellAds.com Zone Code -->
+<div id="bsap_1273358" class="bsarocks bsap_6db88c5a69495071ea29eb766bc6ddf6"></div>
+<!-- End BuySellAds.com Zone Code -->
+ </div>
<header>
<h1>Some CSS3/HTML5 demos</h1>
</header>
View
6 demos/multiple_images.php
@@ -20,7 +20,11 @@
<meta name="viewport" content="width=device-width,maximum-scale=1.0" />
</head>
<body>
-
+ <div id="top_ads">
+<!-- BuySellAds.com Zone Code -->
+<div id="bsap_1273358" class="bsarocks bsap_6db88c5a69495071ea29eb766bc6ddf6"></div>
+<!-- End BuySellAds.com Zone Code -->
+ </div>
<header>
<h1><a href="/">Using CSS3 Transitions, Transforms and Animation</a></h1>
</header>
View
6 demos/next_prev_slider.php
@@ -55,7 +55,11 @@
</head>
<body>
-
+ <div id="top_ads">
+<!-- BuySellAds.com Zone Code -->
+<div id="bsap_1273358" class="bsarocks bsap_6db88c5a69495071ea29eb766bc6ddf6"></div>
+<!-- End BuySellAds.com Zone Code -->
+ </div>
<header>
<h1>CSS3 next/prev button slider</h1>
</header>
View
6 demos/simple3d.php
@@ -40,7 +40,11 @@
</style>
</head>
<body>
-
+ <div id="top_ads">
+<!-- BuySellAds.com Zone Code -->
+<div id="bsap_1273358" class="bsarocks bsap_6db88c5a69495071ea29eb766bc6ddf6"></div>
+<!-- End BuySellAds.com Zone Code -->
+ </div>
<header>
<h1>Simple Anaglyphs</h1>
</header>
View
6 demos/speed.php
@@ -89,6 +89,12 @@
</head>
<body>
+ <div id="top_ads">
+<!-- BuySellAds.com Zone Code -->
+<div id="bsap_1273358" class="bsarocks bsap_6db88c5a69495071ea29eb766bc6ddf6"></div>
+<!-- End BuySellAds.com Zone Code -->
+ </div>
+
<header>
<h1>Why are CSS3 transitions worth using?</h1>
</header>
View
28 footer.php
@@ -10,11 +10,18 @@
<a href="http://stackexchange.com/users/2e2b88856f8e4c1ea377453a19fc416e">
<img src="http://stackexchange.com/users/flair/2e2b88856f8e4c1ea377453a19fc416e.png" width="208" height="58" alt="profile for Rich Bradshaw on Stack Exchange, a network of free, community-driven Q&A sites" title="profile for Rich Bradshaw on Stack Exchange, a network of free, community-driven Q&A sites">
</a>
+
+
<a rel="author" href="https://plus.google.com/105249724614922381234?rel=author">
<img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32">
</a>
-
+
+<!-- BuySellAds.com Zone Code -->
+<div id="bsap_1273171" class="bsarocks bsap_6db88c5a69495071ea29eb766bc6ddf6"></div>
+<!-- End BuySellAds.com Zone Code -->
+
+ <? $comment = '
<script type="text/javascript"><!--
google_ad_client = "pub-7181696033265659";
/* CSS3 Banner */
@@ -25,7 +32,8 @@
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
- </script>
+ </script>';
+ ?>
</footer>
<a href="http://github.com/richbradshaw/CSS-Transitions-Transforms-and-Animation"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
@@ -46,20 +54,4 @@
})();
</script>
-<!-- BradshawEnterprises -->
- <script type="text/javascript">
-
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-3235632-1']);
- _gaq.push(['_setDomainName', '.bradshawenterprises.com']);
- _gaq.push(['_trackPageview']);
- _gaq.push(['_trackPageLoadTime']);
-
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-
- </script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
View
18 index.php
@@ -37,6 +37,24 @@
</head>
<body onload="prettyPrint()">
+<!-- BuySellAds.com Ad Code -->
+<script type="text/javascript">
+(function(){
+ var bsa = document.createElement('script');
+ bsa.type = 'text/javascript';
+ bsa.async = true;
+ bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
+ (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
+})();
+</script>
+<!-- End BuySellAds.com Ad Code -->
+
+ <div id="top_ads">
+<!-- BuySellAds.com Zone Code -->
+<div id="bsap_1273358" class="bsarocks bsap_6db88c5a69495071ea29eb766bc6ddf6"></div>
+<!-- End BuySellAds.com Zone Code -->
+ </div>
+
<header>
<h1><a href="/">Using CSS3 Transitions, Transforms and Animation</a></h1>
</header>
View
12 styles/default.css
@@ -8,12 +8,22 @@ body {
.right { float:right; }
.clear { clear:both; }
-header, section, footer {
+header, section, footer, #top_ads {
display:block;
width:728px;
margin:0 auto;
}
+#top_ads {
+ width:645px;
+ height:135px;
+ overflow: hidden;
+}
+
+.bsap_1273358 {
+
+}
+
section {
border-bottom:1px black solid;
}
View
20 transforms.php
@@ -355,7 +355,7 @@
$('label[for="td3zrot"]').html("Z rotation ("+$('#td3controls input#td3zrot').val()+" deg)")
});
$('#td3controls #td3perspective').change(function () {
- $('#transDemo3').css(vP+"perspective"+"px",$('#td3controls input#td3perspective').val());
+ $('#transDemo3').css(vP+"perspective",$('#td3controls input#td3perspective').val()+"px");
$('label[for="td3perspective"]').html("Perspective ("+$('#td3controls input#td3perspective').val()+" px)")
});
});
@@ -505,15 +505,6 @@
</div>
</div>
<div id="transPlayControls">
- <label for="transPlayPerspective">Perspective (<span>800</span> px)</label>
- <input id="transPlayPerspective" type="range" min="100" max="1000" default="800" />
-
- <label for="transPlayOriginX">Transform origin (horizontal) (<span>50</span> %)</label>
- <input id="transPlayOriginX" type="range" min="0" max="100" default="50" />
-
- <label for="transPlayOriginY">Transform origin (vertical) (<span>50</span> %)</label>
- <input id="transPlayOriginY" type="range" min="0" max="100" default="50" />
-
<label for="transPlayX">∆X (<span>0</span> px)</label>
<input id="transPlayX" type="range" min="-170" max="170" default="0" />
<label for="transPlayY">∆Y (<span>0</span> px)</label>
@@ -528,6 +519,15 @@
<label for="transPlayZRot">Z rotation (<span>0</span> deg)</label>
<input id="transPlayZRot" type="range" min="-180" max="180" default="0" />
+ <label for="transPlayPerspective">Perspective (<span>800</span> px)</label>
+ <input id="transPlayPerspective" type="range" min="100" max="1000" default="800" />
+
+ <label for="transPlayOriginX">Transform origin (horizontal) (<span>50</span> %)</label>
+ <input id="transPlayOriginX" type="range" min="0" max="100" default="50" />
+
+ <label for="transPlayOriginY">Transform origin (vertical) (<span>50</span> %)</label>
+ <input id="transPlayOriginY" type="range" min="0" max="100" default="50" />
+
</div>
<div class="clear"></div>
View
171 transitions.php
@@ -19,14 +19,13 @@
<p>To see the difference in speed, have a look at the <a href="/demos/speed.php">speed test</a>.</p>
<style>
#timings_demo {
- position:relative;
+ position:relative;
width:500px;
height:400px;
margin:0 auto 10px;
border:1px #aaa solid;
padding:10px;
}
-
.test_box {
position:relative;
width:50px;
@@ -34,7 +33,6 @@
margin-bottom:10px;
background-color:#ccc;
}
-
#ease.test_box {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
@@ -43,7 +41,6 @@
transition: all 4s ease;
border:1px #f00 solid;
}
-
#ease-in.test_box {
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
@@ -52,7 +49,6 @@
transition: all 4s ease-in;
border:1px #0f0 solid;
}
-
#ease-out.test_box {
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
@@ -61,7 +57,6 @@
transition: all 4s ease-out;
border:1px #00f solid;
}
-
#ease-in-out.test_box {
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
@@ -70,7 +65,6 @@
transition: all 4s ease-in-out;
border:1px #ff0 solid;
}
-
#linear.test_box {
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
@@ -79,7 +73,6 @@
transition: all 4s linear;
border:1px #f0f solid;
}
-
#custom.test_box {
-webkit-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-moz-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
@@ -88,18 +81,13 @@
transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
border:1px #0ff solid;
}
-
#timings_demo:hover .test_box, #timings_demo.hover_effect .test_box {
-
- left:440px;
-
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
border-radius:25px;
-
<?= prefix("transform", "rotate(360deg)") ?>
-
+ margin-left:440px;
background-color:#fff;
}
</style>
@@ -110,12 +98,10 @@
<div id="ease-out" class="test_box"><p class="center">Ease Out</p></div>
<div id="ease-in-out" class="test_box"><p class="center">Ease In Out</p></div>
<div id="linear" class="test_box"><p class="center">Linear</p></div>
- <div id="custom" class="test_box"><p class="center">Custom</p></div>
+ <div id="custom" class="test_box"><p class="center">Custom</p></div>
<p class="center"> Hover on me</p>
</div>
-
<p>In addition to the built in timing functions, you can also specify your own. The excellent <a href="http://matthewlein.com/ceaser/">Ceaser CSS Easing Tool</a> makes this very easy.</p>
-
<h2>Full syntax</h2>
<p>The syntax for a CSS3 transition is of the form:</p>
<pre>
@@ -128,7 +114,7 @@
<h2>Demo - Transition delays</h2>
<style>
#delay_demo {
- position:relative;
+ position:relative;
width:500px;
height:400px;
margin:0 auto 10px;
@@ -144,8 +130,8 @@
background-color:red;
-webkit-border-radius:50px;
-moz-border-radius:50px;
- border-radius:50px;
- <?= prefix("transition", "all 2s ease-in-out") ?>
+ border-radius:50px;
+ <?= prefix("transition", "all 2s ease-in-out") ?>
}
#delay_demo .center {
width:500px;
@@ -157,17 +143,15 @@
height:20px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
- border-radius:10px;
+ border-radius:10px;
position:absolute;
top:200px;
- left:250px;
+ left:250px;
background-color:blue;
<?= prefix("transition", "all 2s ease-in-out") ?>
-
/* Ensures that the element is being transformed in the 3d context so that hw acceleration kicks in on iOS */
- <?= prefix("transform", "translate3d(0,0,0)") ?>
+ <?= prefix("transform", "translate3d(0,0,0)") ?>
}
-
<? for($i=1;$i<9;$i++) { ?>
#dd<?= $i ?> {
-webkit-transition-delay: <?= $i * 0.1 ?>s;
@@ -180,47 +164,45 @@
<?= prefix("transform", "translate(-250px,-200px)") ?>
}
#delay_demo:hover #dd2, #delay_demo.hover_effect #dd2 {
- <?= prefix("transform", "translate(0,-200px)") ?>
+ <?= prefix("transform", "translate(0,-200px)") ?>
}
#delay_demo:hover #dd3, #delay_demo.hover_effect #dd3 {
<?= prefix("transform", "translate(250px,-200px)") ?>
}
#delay_demo:hover #dd4, #delay_demo.hover_effect #dd4 {
- <?= prefix("transform", "translate(250px, 0)") ?>
+ <?= prefix("transform", "translate(250px, 0)") ?>
}
#delay_demo:hover #dd5, #delay_demo.hover_effect #dd5 {
- <?= prefix("transform", "translate(250px,200px)") ?>
+ <?= prefix("transform", "translate(250px,200px)") ?>
}
#delay_demo:hover #dd6, #delay_demo.hover_effect #dd6 {
- <?= prefix("transform", "translate(0,200px)") ?>
+ <?= prefix("transform", "translate(0,200px)") ?>
}
#delay_demo:hover #dd7, #delay_demo.hover_effect #dd7 {
- <?= prefix("transform", "translate(-250px,200px)") ?>
+ <?= prefix("transform", "translate(-250px,200px)") ?>
}
#delay_demo:hover #dd8, #delay_demo.hover_effect #dd8 {
- <?= prefix("transform", "translate(-250px,0)") ?>
+ <?= prefix("transform", "translate(-250px,0)") ?>
}
-
</style>
<div id="delay_demo" class="shadow hover">
<div id="dd_main"></div>
<div id="dd1"></div>
<div id="dd2"></div>
<div id="dd3"></div>
- <div id="dd4"></div>
+ <div id="dd4"></div>
<div id="dd5"></div>
<div id="dd6"></div>
<div id="dd7"></div>
<div id="dd8"></div>
- <p class="center"> Hover on me</p>
+ <p class="center"> Hover on me</p>
</div>
-
<h2>Demo - advanced delays</h2>
<p>You can set the way different properties animate differently. In this example the normal (blue) circle has this CSS (with the appropriate vendor prefixes):</p>
<pre class="prettyprint lang-css">
#dd_main2 {
- transition: all 1s ease-in-out;
-}
+ transition: all 1s ease-in-out;
+}
</pre>
<p>The delays (green) circle has this CSS instead:</p>
<pre class="prettyprint lang-css">
@@ -233,7 +215,7 @@
<p>This allows us to animate top and left differently, meaning we can make it move in an L shape, rather than diagonally. This technique can be used to create very complex animations, if needed.</p>
<style>
#delay_demo2 {
- position:relative;
+ position:relative;
width:500px;
height:400px;
margin:0 auto 10px;
@@ -249,16 +231,16 @@
background-color:blue;
-webkit-border-radius:50px;
-moz-border-radius:50px;
- border-radius:50px;
+ border-radius:50px;
text-align:center;
}
#dd_main2 p, #dd_main2a p {
line-height:70px;
- color:white;
+ color:white;
font-weight:bold;
}
#dd_main2 {
-<?= prefix("transition", "all 1s ease-in-out") ?>
+ <?= prefix("transition", "all 1s ease-in-out") ?>
}
#dd_main2a {
background-color:green;
@@ -282,10 +264,9 @@
</style>
<div id="delay_demo2" class="shadow hover">
<div id="dd_main2"><p>Normal</p></div>
- <div id="dd_main2a"><p>Delays</p></div>
- <p class="center"> Hover on me</p>
+ <div id="dd_main2a"><p>Delays</p></div>
+ <p class="center"> Hover on me</p>
</div>
-
<h2>Animatable properties</h2>
<p>Regarding the properties you can animate, the best way is to experiment. The W3C maintain a list of properties that can be animated on the <a href="http://www.w3.org/TR/css3-transitions/#properties-from-css-">CSS Transitions spec</a>. These include everything from background-color and letter-spacing to text-shadow and min-height. Many of these properties are not supported by default by jQuery animation, making CSS transitions much more useful out of the box. In addition, many browsers hardware accelerate animations that don't require repaints, namely opacity, 3D transforms and filters. To see the methods that Webkit accelerates, take a look at <a href="http://trac.webkit.org/browser/trunk/Source/WebCore/page/animation/AnimationBase.cpp">the AnimationBase.cpp</a> code from the Webkit source. At the time of writing there are three classes defined here: PropertyWrapperAcceleratedOpacity, PropertyWrapperAcceleratedTransform and PropertyWrapperAcceleratedFilter. These are the animations that Webkit accelerates. Other browsers do things differently, but as Webkit is popular on mobile where these things matter most, it's worth noting this special case.</p>
<p>In reality, browsers are allowing more properties than these to be animated - box-shadow springs to mind as an obvious example. The table below is taken from the link above, and is can be considered the minimum number of properties you would expect to be animatable.</p>
@@ -293,312 +274,210 @@
<tbody>
<tr>
<th>Property Name</th>
-
<th>Type</th>
</tr>
-
<tr>
<td>background-color</td>
-
<td>color</td>
</tr>
-
<tr>
<td>background-image</td>
-
<td>only gradients</td>
</tr>
-
<tr>
<td>background-position</td>
-
<td>percentage, length</td>
</tr>
-
<tr>
<td>border-bottom-color</td>
-
<td>color</td>
</tr>
-
<tr>
<td>border-bottom-width</td>
-
<td>length</td>
</tr>
-
<tr>
<td>border-color</td>
-
<td>color</td>
</tr>
-
<tr>
<td>border-left-color</td>
-
<td>color</td>
</tr>
-
<tr>
<td>border-left-width</td>
-
<td>length</td>
</tr>
-
<tr>
<td>border-right-color</td>
-
<td>color</td>
</tr>
-
<tr>
<td>border-right-width</td>
-
<td>length</td>
</tr>
-
<tr>
<td>border-spacing</td>
-
<td>length</td>
</tr>
-
<tr>
<td>border-top-color</td>
-
<td>color</td>
</tr>
-
<tr>
<td>border-top-width</td>
-
<td>length</td>
</tr>
-
<tr>
<td>border-width</td>
-
<td>length</td>
</tr>
-
<tr>
<td>bottom</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>color</td>
-
<td>color</td>
</tr>
-
<tr>
<td>crop</td>
-
<td>rectangle</td>
</tr>
-
<tr>
<td>font-size</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>font-weight</td>
-
<td>number</td>
</tr>
-
<tr>
<td>grid-*</td>
-
<td>various</td>
</tr>
-
<tr>
<td>height</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>left</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>letter-spacing</td>
-
<td>length</td>
</tr>
-
<tr>
<td>line-height</td>
-
<td>number, length, percentage</td>
</tr>
-
<tr>
<td>margin-bottom</td>
-
<td>length</td>
</tr>
-
<tr>
<td>margin-left</td>
-
<td>length</td>
</tr>
-
<tr>
<td>margin-right</td>
-
<td>length</td>
</tr>
-
<tr>
<td>margin-top</td>
-
<td>length</td>
</tr>
-
<tr>
<td>max-height</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>max-width</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>min-height</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>min-width</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>opacity</td>
-
<td>number</td>
</tr>
-
<tr>
<td>outline-color</td>
-
<td>color</td>
</tr>
-
<tr>
<td>outline-offset</td>
-
<td>integer</td>
</tr>
-
<tr>
<td>outline-width</td>
-
<td>length</td>
</tr>
-
<tr>
<td>padding-bottom</td>
-
<td>length</td>
</tr>
-
<tr>
<td>padding-left</td>
-
<td>length</td>
</tr>
-
<tr>
<td>padding-right</td>
-
<td>length</td>
</tr>
-
<tr>
<td>padding-top</td>
-
<td>length</td>
</tr>
-
<tr>
<td>right</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>text-indent</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>text-shadow</td>
-
<td>shadow</td>
</tr>
-
<tr>
<td>top</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>vertical-align</td>
-
<td>keywords, length, percentage</td>
</tr>
-
<tr>
<td>visibility</td>
-
<td>visibility</td>
</tr>
-
<tr>
<td>width</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>word-spacing</td>
-
<td>length, percentage</td>
</tr>
-
<tr>
<td>z-index</td>
-
<td>integer</td>
</tr>
-
<tr>
<td>zoom</td>
-
<td>number</td>
</tr>
</tbody>
</table>
<p>In addition to this, all browsers with transitions support animating CSS transforms, which proves to be invaluable.</p>
-
<p>To find out more about CSS3 transitions, read through the <a href="http://www.w3.org/TR/css3-transitions/">W3C specification</a>.</p>
</section>
Please sign in to comment.
Something went wrong with that request. Please try again.