Skip to content

Commit

Permalink
Change homepage animationsé
Browse files Browse the repository at this point in the history
  • Loading branch information
@zessx
zessx committed Jun 14, 2015
1 parent 3528d7c commit fc119d1
Show file tree
Hide file tree
Showing 8 changed files with 131 additions and 70 deletions.
4 changes: 3 additions & 1 deletion css/app.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/app.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

42 changes: 30 additions & 12 deletions css/scss/base/_animations.scss
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,39 @@

@keyframes drawpath {
from { opacity: 1; stroke-dashoffset: 1000; }
to { stroke-dashoffset: 0; }
@keyframes logodiagonal {
0% { opacity: 1; stroke-dashoffset: 50; }
100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes opacify {
from { opacity: 0; }
to { opacity: 1; margin-top: 0; }
@keyframes logotop {
0% { fill: none; stroke-dashoffset: 420; stroke: $main; transform: rotate3d(-1, 1, 0, 720deg) translate(15px, -15px); }
60% { fill: none; stroke-dashoffset: 0; stroke: $main; transform: rotate3d(-1, 1, 0, 720deg) translate(15px, -15px); }
100% { fill: $main_light; stroke-dashoffset: 0; stroke: transparent; transform: none; }
}

@keyframes logobottom {
0% { fill: none; stroke-dashoffset: 420; stroke: $main; transform: rotate3d(-1, 1, 0, 720deg) translate(-15px, 15px); }
60% { fill: none; stroke-dashoffset: 0; stroke: $main; transform: rotate3d(-1, 1, 0, 720deg) translate(-15px, 15px); }
100% { fill: $main; stroke-dashoffset: 0; stroke: transparent; transform: none; }
}

@keyframes logoshadow {
0%,
60% { opacity: 0; transform: rotate3d(-1, 1, 0, 720deg) translate(15px, -15px); }
100% { opacity: 1; transform: none; }
}

@keyframes colorize {
from { filter: grayscale(100%); }
to { filter: none; }
@keyframes opacify {
0% { opacity: 0; }
100% { opacity: 1; margin-top: 0; }
}

@keyframes scroller {
0% { height: 0%; top: 15%; }
30% { height: 25%; top: 15%; }
50% { height: 0%; top: 40%; }
0% { height: 0%; top: 15%; }
30% { height: 25%; top: 15%; }
50% { height: 0%; top: 40%; }
}

@keyframes flipin {
0% { backface-visibility: hidden; transform: rotateX(180deg); }
100% { backface-visibility: hidden; transform: rotateX(0deg); }
}
11 changes: 11 additions & 0 deletions css/scss/base/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,15 @@ $document_padding: 30px;
}
}
}
}

%flipping {
backface-visibility: hidden;
transition: .7s;
transform: rotateX(180deg);

&.active {
backface-visibility: hidden;
transform: rotateX(0deg);
}
}
9 changes: 7 additions & 2 deletions css/scss/layout/_content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,12 @@ article {
position: fixed;
top: 0;
left: 0;
background: radial-gradient(ellipse at center, lighten($main, 20%) 0%, lighten($main, 0%) 100%);
background: $white;
opacity: 0;
animation: opacify 3s ease 2.5s 1 normal forwards;
transition: opacity 1s;

&.ready {
opacity: 1;
}
// animation: opacify 3s ease 1.5s 1 normal forwards;
}
74 changes: 47 additions & 27 deletions css/scss/layout/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,41 @@ header {
.profile {
@extend %col-left;
overflow: hidden;
perspective: 1000;
z-index: 3;

h1,
.social {
backface-visibility: hidden;
transform: rotateX(180deg);
animation: flipin 1s ease 4s 1 normal forwards;
}
h1 {
margin: 0;
cursor: default;
font-weight: normal;
}
.social {
font-size: 1.6em;
text-align: right;
width: 100%;
position: relative;
perspective: 1000;

p {
float: right;
width: 200px;
backface-visibility: hidden;
position: absolute;
top: 0;
right: 0;
transition: all .4s;
}
ul {
backface-visibility: hidden;
transform: rotateX(-180deg);
margin: 0;
list-style: none;
opacity: 0;
font-size: .8em;
line-height: 2em;
float: right;
overflow: hidden;
transition: all .4s;

li {
Expand All @@ -53,24 +66,27 @@ header {
&:hover,
&:focus {
p {
margin-right: -200px;
transform: rotateX(180deg);
}
ul {
opacity: 1;
transform: rotateX(0deg);
}
}
}
}
aside {
@extend %col-right;
font-size: 2em;
}
.profile,
aside {
perspective: 1000;
z-index: 3;
opacity: 0;
margin-top: 100px;
animation: opacify 1s ease 4s 1 normal forwards;

> p,
> small {
backface-visibility: hidden;
transform: rotateX(180deg);
cursor: default;
animation: flipin 1s ease 4s 1 normal forwards;
}
}
#logo {
z-index: 3;
Expand All @@ -86,29 +102,33 @@ header {
path {
stroke: $main;
stroke-width: 2px;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;

&.tohide {
opacity: 0;
animation: drawpath 3s ease 1s 1 normal forwards;
}
&.tokeep {
animation: drawpath 3s ease 5s 1 normal forwards;
}
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: logodiagonal 1s ease 5s 1 normal forwards;
}
polygon {
opacity: 0;
animation: opacify 3s ease 2s 1 normal forwards;
stroke: $main;
stroke-width: 2px;
stroke-dasharray: 420;
stroke-dashoffset: 420;
transform-origin: 90px 90px;

&#logo-top {
fill: $main_light;
fill: none;
transform: rotate3d(-1, 1, 0, 720deg) translate(15px, -15px);
animation: logotop 3s ease-in-out 1s 1 normal forwards;
}
&#logo-bottom {
fill: $main;
fill: none;
transform: rotate3d(-1, 1, 0, 720deg) translate(-15px, 15px);
animation: logobottom 3s ease-in-out 1s 1 normal forwards;
}
&#logo-shadow {
fill: rgba(0, 0, 0, .3);
stroke: none;
opacity: 0;
transform: rotate3d(-1, 1, 0, 720deg) translate(15px, -15px);
animation: logoshadow 3s ease-in-out 1s 1 normal forwards;
}
}
}
Expand Down
Loading

0 comments on commit fc119d1

Please sign in to comment.