Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Intro anim
  • Loading branch information
jakearchibald committed Jun 6, 2012
1 parent 3f5e69f commit 246d31f
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 90 deletions.
35 changes: 21 additions & 14 deletions www/assets/7/script/pageLayout.js
@@ -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,
Expand All @@ -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);
Expand All @@ -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'),
Expand All @@ -68,7 +76,6 @@ spriteCow.pageLayout = (function() {
}]
],
before: function() {
$introCopy.css('display', 'none');
}
},
{
Expand Down
26 changes: 22 additions & 4 deletions www/assets/7/style/_components.scss
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -299,7 +309,11 @@
}
& ul {
float: left;
padding: 13px 16px;
padding: 16px 30px;

.intro & {
padding: 13px 16px;
}
}
& li {
display: inline;
Expand All @@ -324,4 +338,8 @@
// Feature tests
.feature-test {
display: none;
}
// Intro copy
.intro-copy {
display: none;
}
7 changes: 5 additions & 2 deletions www/assets/7/style/_structure.scss
Expand Up @@ -38,7 +38,7 @@
// Main header
.main-header {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 0;

& .h-main {
Expand All @@ -47,7 +47,10 @@
}
// Further detail
.further-detail {
display: none;

.intro & {
height: 0;
}
}
// Toolbar
.toolbar-container {
Expand Down
16 changes: 11 additions & 5 deletions www/assets/7/style/_utils.scss
@@ -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-, '' {
Expand Down

0 comments on commit 246d31f

Please sign in to comment.