anim
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
@import 'theme/mixins';
|
||||
@import 'theme/typography';
|
||||
|
||||
@import 'theme/mCustomScrollbar';
|
||||
@import 'theme/animation';
|
||||
|
||||
@import 'theme/all';
|
||||
|
||||
@@ -66,3 +66,60 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes height{
|
||||
0%{
|
||||
height: 50vh;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
100%{
|
||||
height: 0;
|
||||
min-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes margin{
|
||||
0%{
|
||||
margin-top: 25vh;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
100%{
|
||||
margin-top: 0px;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes h1{
|
||||
0%{
|
||||
font-size: 11.2vw;
|
||||
}
|
||||
100%{
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes card{
|
||||
0%{}
|
||||
|
||||
50%{
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(-50px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes textestroke{
|
||||
0%{
|
||||
-webkit-text-stroke : 1px;
|
||||
}
|
||||
|
||||
100%{
|
||||
-webkit-text-stroke : 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,22 @@
|
||||
body{
|
||||
#start{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#page-wrapper.blog{
|
||||
#start{
|
||||
position: relative;
|
||||
top: 200vh;
|
||||
left: 0;
|
||||
padding-top: 110px;
|
||||
opacity: 0;
|
||||
&.visible{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#items{
|
||||
.cat-list{
|
||||
padding: 0 5px;
|
||||
@@ -23,4 +42,15 @@
|
||||
margin-bottom: 10px;
|
||||
min-width: 200px;
|
||||
}
|
||||
&.fixed{
|
||||
// .cat-list{
|
||||
// position: fixed;
|
||||
// top: 80px;
|
||||
// z-index: 999;
|
||||
// background: white;
|
||||
// }
|
||||
// .full-works{
|
||||
// margin-top: 60px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,57 +1,153 @@
|
||||
// home
|
||||
body{
|
||||
&> .blog{
|
||||
height: 100%;
|
||||
.blog{
|
||||
header{
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 2%;
|
||||
right: 2%;
|
||||
height: 100vh;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
& > section{
|
||||
position: relative;
|
||||
height: 50vh;
|
||||
min-height: 250px;
|
||||
top: 0;
|
||||
left: 2%;
|
||||
right: 2%;
|
||||
&.works-mea{
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&.reduc{
|
||||
-webkit-animation: reducfont 1s ease forwards;
|
||||
animation: reducfont 1s ease forwards;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
font-size: 11.2vw;
|
||||
line-height: 7vw!important;
|
||||
transition: top 1s ease;
|
||||
transition: font-size 1.2s ease, color 1.2s ease , top 1.2s ease;
|
||||
}
|
||||
h2{
|
||||
position: fixed;
|
||||
top:220px;
|
||||
font-size: 3.7vw;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transition: opacity 1s ease 1s, transform 1s ease 1s;
|
||||
}
|
||||
nav{
|
||||
margin-top: 25vh; /* poussé de la moitié de hauteur de viewport */
|
||||
transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
|
||||
// margin-top: 25vh; /* poussé de la moitié de hauteur de viewport */
|
||||
// -webkit-transform: translateY(-50%);
|
||||
// transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
|
||||
}
|
||||
.scroll{
|
||||
width: 50px;
|
||||
height: 15px;
|
||||
margin: 0 auto 10px auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
& > p:nth-child(1){
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
animation: translatep1 2s infinite linear;
|
||||
-webkit-animation: translatep1 2s infinite linear;
|
||||
animation: translatep1 2s infinite linear;
|
||||
}
|
||||
& > p:nth-child(2){
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
animation: translatep1 2s infinite linear;
|
||||
animation-delay: 1s;
|
||||
-webkit-animation: translatep1 2s infinite linear;
|
||||
animation: translatep1 2s infinite linear;
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
}
|
||||
&.hide{
|
||||
& > section:first-child{
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
background: white;
|
||||
z-index: 999;
|
||||
}
|
||||
nav{
|
||||
margin-top: 0;
|
||||
-webkit-transform: translate(0);
|
||||
transform: translate(0);
|
||||
-webkit-transition: margin-top 1s ease, -webkit-transform 1s ease;
|
||||
transition: margin-top 1s ease, -webkit-transform 1s ease;
|
||||
transition: margin-top 1s ease, transform 1s ease;
|
||||
transition: margin-top 1s ease, transform 1s ease, -webkit-transform 1s ease;
|
||||
}
|
||||
h1{
|
||||
position: relative;
|
||||
font-size: 3rem;
|
||||
top: 0px;
|
||||
color: black;
|
||||
transition: font-size 1.2s ease 0.5s, color 1.2s ease 1s, top 1.2s ease 0.5s;
|
||||
animation: textestroke 0.5s ease 1.2s forwards;
|
||||
}
|
||||
h2{
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
top:220px;
|
||||
-webkit-transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
.card{
|
||||
-webkit-animation: card 1s forwards ease;
|
||||
animation: card 1s forwards ease;
|
||||
}
|
||||
.scroll{
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.8s ease;
|
||||
transition: opacity 0.8s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// html{
|
||||
// overflow: hidden;
|
||||
// }
|
||||
// html, body {
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
//
|
||||
// }
|
||||
// body {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// right: -30px;
|
||||
// bottom: 0;
|
||||
// padding-right: 15px;
|
||||
// overflow-y: scroll;
|
||||
// }
|
||||
|
||||
// page
|
||||
body{
|
||||
@@ -62,7 +158,8 @@ body{
|
||||
nav{
|
||||
position: absolute;
|
||||
margin-top: 65px; /* poussé de la moitié de hauteur de viewport */
|
||||
transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
|
||||
}
|
||||
h1{
|
||||
color: black;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,98 @@
|
||||
body, html {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
-webkit-transition: opacity 400ms;
|
||||
-moz-transition: opacity 400ms;
|
||||
transition: opacity 400ms;
|
||||
}
|
||||
|
||||
body, .onepage-wrapper, html {
|
||||
display: block;
|
||||
position: static;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.onepage-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
header{
|
||||
position: fixed!important;
|
||||
}
|
||||
.onepage-wrapper .section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.onepage-pagination {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
z-index: 5;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.onepage-pagination li {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.onepage-pagination li a{
|
||||
padding: 10px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
display: block;
|
||||
|
||||
}
|
||||
.onepage-pagination li a:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: rgba(0,0,0,0.85);
|
||||
border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
}
|
||||
|
||||
.onepage-pagination li a.active:before{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: none;
|
||||
border: 1px solid black;
|
||||
margin-top: -4px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.disabled-onepage-scroll .onepage-wrapper .section {
|
||||
position: relative !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
}
|
||||
.disabled-onepage-scroll .onepage-wrapper {
|
||||
-webkit-transform: none !important;
|
||||
-moz-transform: none !important;
|
||||
transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.disabled-onepage-scroll .onepage-pagination {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
|
||||
position: inherit;
|
||||
}
|
||||
@@ -20,7 +20,8 @@ header{
|
||||
transition: transform 0.5s ease;
|
||||
h3{
|
||||
color: transparent;
|
||||
transition: visibility 0.5 ease;
|
||||
left: 500px;
|
||||
transition: visibility 0.5 ease left 1s ease;
|
||||
}
|
||||
img{
|
||||
animation: rotation 12s infinite linear;
|
||||
@@ -47,7 +48,8 @@ header{
|
||||
}
|
||||
h3{
|
||||
color: white;
|
||||
transition: color 0.5s 0.4s ease;
|
||||
left: 20px;
|
||||
transition: color 0.5s 0.5s ease, left 0.5s ease;
|
||||
}
|
||||
&:hover{
|
||||
transition: transform 0.5s ease!important;
|
||||
|
||||
Reference in New Issue
Block a user