Permalink
Browse files

Intro anim

  • Loading branch information...
1 parent 3f5e69f commit 246d31f442241da2300ddbc463ccbbbc9117fc3c @jakearchibald committed Jun 6, 2012
@@ -1,10 +1,11 @@
spriteCow.pageLayout = (function() {
var $container = $('.container'),
$header = $('.container > header'),
- $headerH1 = $('.container > header h1'),
$canvasCell = $('.canvas-cell'),
$canvasInner = $('.canvas-inner'),
- $introCopy = $('.intro-copy'),
+ $cowLogo = $('.cow-logo'),
+ $footerUl = $('.main-footer ul'),
+ $footerP = $('.main-footer p'),
$cssOutput,
$startButtons,
$spriteCanvasContainer,
@@ -28,11 +29,17 @@ spriteCow.pageLayout = (function() {
transitions = [
{
- duration: 500,
- easing: 'linear',
+ duration: 300,
+ easing: 'easeInOutQuad',
targets: [
- [$startButtons, { opacity: 0 }],
- [$introCopy, { opacity: 0 }]
+ [$container, { width: '100%' }],
+ [$footerUl, {
+ padding: $footerUl.css('padding')
+ }],
+ [$footerP, {
+ padding: $footerP.css('padding')
+ }],
+ [$startButtons, { opacity: 0 }]
],
before: function() {
$container.width(containerWidth);
@@ -41,16 +48,17 @@ spriteCow.pageLayout = (function() {
}
},
{
- duration: 1000,
- easing: 'swing',
+ duration: 500,
+ easing: 'easeInOutQuad',
targets: [
+ [$cowLogo, {
+ transform: $cowLogo.vendorCss('transform'),
+ opacity: $cowLogo.css('opacity'),
+ height: $cowLogo.css('height'),
+ margin: 0
+ }],
[$container, { width: '100%' }],
[$header, { height: $header.height() }],
- [$headerH1, $.support.transition ? {
- transform: $headerH1.vendorCss('transform'),
- opacity: $headerH1.css('opacity'),
- top: $headerH1.css('top')
- } : {}],
[$cssOutput, {
height: $cssOutput.height(),
'padding-top': $cssOutput.css('padding-top'),
@@ -68,7 +76,6 @@ spriteCow.pageLayout = (function() {
}]
],
before: function() {
- $introCopy.css('display', 'none');
}
},
{
@@ -6,12 +6,18 @@
height: 20px;
margin: 0;
opacity: 0;
+ overflow: hidden;
+ text-indent: -5000px;
+ display: inline-block;
+ @include transform( scale(0.1) );
+ @include transform-origin(50% 0);
.intro & {
width: 448px;
height: 388px;
- margin: 66px auto 29px;
+ margin: 66px 0 29px;
opacity: 1;
+ @include transform( scale(1) );
}
}
// Headings
@@ -279,14 +285,18 @@
}
// Footer
.main-footer {
- display: table-row;
overflow: hidden;
background: rgba(0, 0, 0, .23);
& p {
float: right;
- padding: 12px 16px 0;
+ padding: 15px 29px 0;
margin: 0;
+ white-space: nowrap;
+
+ .intro & {
+ padding: 12px 16px 0;
+ }
}
& .the-team-logo {
background: url('imgs/sprites1.png') no-repeat -4px -29px;
@@ -299,7 +309,11 @@
}
& ul {
float: left;
- padding: 13px 16px;
+ padding: 16px 30px;
+
+ .intro & {
+ padding: 13px 16px;
+ }
}
& li {
display: inline;
@@ -324,4 +338,8 @@
// Feature tests
.feature-test {
display: none;
+ }
+// Intro copy
+ .intro-copy {
+ display: none;
}
@@ -38,7 +38,7 @@
// Main header
.main-header {
display: table-cell;
- vertical-align: middle;
+ text-align: center;
height: 0;
& .h-main {
@@ -47,7 +47,10 @@
}
// Further detail
.further-detail {
- display: none;
+
+ .intro & {
+ height: 0;
+ }
}
// Toolbar
.toolbar-container {
@@ -1,13 +1,19 @@
-@mixin transform($transformation) {
- @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
- #{$prefix}transform: $transformation;
- }
-}
@mixin user-select($type) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$prefix}user-select: $type;
}
}
+// Transform
+ @mixin transform($transformation) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ #{$prefix}transform: $transformation;
+ }
+ }
+ @mixin transform-origin($val) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ #{$prefix}transform-origin: $val;
+ }
+ }
// Gradients
@mixin radial-gradient($type) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
Oops, something went wrong.

0 comments on commit 246d31f

Please sign in to comment.