Permalink
Browse files

Doing some testing for animations and basic changes. This code is kno…

…wn to be broken. Don't use it right now. But a new version is coming soon.
  • Loading branch information...
1 parent 978b7f7 commit 52005b315db2b7b7888580a053d5f308fcf9e4e5 @heygrady committed Aug 10, 2010
Showing with 599 additions and 120 deletions.
  1. +87 −0 css/style.css
  2. BIN i/arrow-up.png
  3. BIN i/background.jpg
  4. BIN i/elephant.png
  5. +28 −0 js/modernizr-1.5.min.js
  6. +145 −120 lib/jquery.transform.js
  7. +339 −0 test.html
View
@@ -0,0 +1,87 @@
+html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+}
+
+h2 {
+ font-size: 28px;
+ margin-bottom: 20px;
+}
+
+#container {
+ width: 960px;
+ margin: 10px auto;
+}
+
+#body {
+ padding: 10px;
+ background-image: url(../i/background.jpg);
+ border: 4px solid #000000;
+}
+
+.box {
+ float: left;
+ display: inline;
+ margin-bottom: 10px;
+ margin-right: 10px;
+}
+.outer {
+ height: 150px;
+ width: 150px;
+
+ background-color: #000000;
+ background-color: rgba(0, 0, 0, 0.5); /* FF3+, Saf3+, Opera 10.10+, Chrome */
+}
+.lt-ie8 .outer {
+ background-color: transparent;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7F000000',EndColorStr='#7F000000'); /* IE6,IE7 */
+}
+.ie8 .outer {
+ background-color: transparent;
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7F000000',EndColorStr='#7F000000')"; /* IE8 */
+}
+
+.plain .animate,
+.plain .transition,
+.plain .transform {
+ border: 5px solid #000000;
+ background-color: deeppink;
+ padding: 5px;
+
+ height: 150px;
+ width: 150px;
+
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+
+ -moz-transform: translate(13px, 13px) translateX(13px);
+}
+
+.transition {
+ -moz-transition-property: -moz-transform;
+ -moz-transition-duration: .4s;
+ -moz-transition-timing-function: ease-in-out;
+
+ -webkit-transition-property: -moz-transform;
+ -webkit-transition-duration: .4s;
+ -webkit-transition-timing-function: ease-in-out;
+
+ -o-transition-property: -moz-transform;
+ -o-transition-duration: .4s;
+ -o-transition-timing-function: ease-in-out;
+}
+#body:after,
+.clearfix:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+.ie #body,
+.ie .clearfix {
+ zoom: 1; /* triggers hasLayout */
+ display: block; /* resets display for IE/Win */
+}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 52005b3

Please sign in to comment.