wip #5941 @6:00 animation version desktop

diff --git a/app.css b/app.css
index 8fb8a10f6ea1b9cffae08e79ce02f650b4221431..1eeaddb42ffec5a0009c9f2b45f95972356edb72 100644 (file)
--- a/app.css
+++ b/app.css
@@ -158,6 +158,30 @@ a {
   --step-10: clamp(3.00rem, calc(0.65rem + 10.45vw), 11.63rem);
 }
 
+@keyframes line-first {
+  0% {
+    width: 0px;
+  }
+  100% {
+    width: 493px;
+  }
+}
+@keyframes line-second {
+  0% {
+    width: 0vw;
+  }
+  100% {
+    width: 100vw;
+  }
+}
+@keyframes overlay {
+  0% {
+    width: 100%;
+  }
+  100% {
+    width: 0;
+  }
+}
 body {
   background-color: #07090A;
   font-family: "Maison Neue Book", sans-serif;
@@ -332,8 +356,13 @@ b {
   padding-bottom: 24.52%;
   width: 24.52%;
   position: absolute;
-  right: 0;
   top: 2.2vw;
+  right: var(--space-l-3xl);
+}
+@media screen and (min-width: 1680px) {
+  .app-banner .video-container {
+    right: 145px;
+  }
 }
 .app-banner .video-container:before, .app-banner .video-container:after {
   content: "";
@@ -341,20 +370,54 @@ b {
   background-color: #ffffff;
   position: absolute;
   bottom: 29%;
+  z-index: 4;
 }
 .app-banner .video-container:before {
   width: 93%;
   left: -100%;
 }
+@media screen and (min-width: 1024px) {
+  .app-banner .video-container:before {
+    animation-name: line-first;
+    animation-timing-function: cubic-bezier(0.82, 0, 0.65, 0.93);
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+  }
+}
+@media screen and (min-width: 1680px) {
+  .app-banner .video-container:before {
+    width: 0;
+    transform: translateX(-79px);
+  }
+}
 .app-banner .video-container:after {
   width: 100vw;
   left: 80%;
 }
-@media screen and (min-width: 1680px) {
-  .app-banner .video-container {
-    right: var(--space-l-3xl);
+@media screen and (min-width: 1024px) {
+  .app-banner .video-container:after {
+    width: 0;
+    animation-name: line-second;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    animation-delay: 1s;
+    animation-duration: 3s;
   }
 }
+.app-banner .video-container .overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background: #0A7DFF;
+  z-index: 3;
+  transform: skewX(-35deg);
+  animation-name: overlay;
+  animation-fill-mode: forwards;
+  animation-duration: 1s;
+  animation-delay: 1s;
+}
 .app-banner .video-container video,
 .app-banner .video-container svg {
   position: absolute;

diff --git a/app.css.map b/app.css.map
index c54b1c594472eee8594161d951ab841a085fe6ba..83ef1f15b0ad55cce61c21267eec45dd8bf3f854 100644 (file)
--- a/app.css.map
+++ b/app.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["sass/reset.sass","sass/fontface.sass","sass/helpers.sass","sass/app.sass"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;EACA;EACA;EACA;;;AAEF;AACA;AAAA;EAEE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AChBD;AACC;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;AACA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAAA;AAAA;AAAA;EAKA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;EAEA;;;ACxHF;EACE,kBDJM;ECKN,aDDQ;ECER,ODLE;ECMF;EACA;;;AAEF;EACE;EACA;;ADHA;ECCF;IAII;IACA;;;ADNF;ECCF;IAOI;;;AAEF;EACE;EACA;;;AAEJ;EACE,kBDzBK;;;AC2BP;EACE,OD5BK;;;AC8BP;EACE;EACA;;ADtBA;ECoBF;IAII;;;AAEF;EACE;;AAEF;EACE;;AD9BF;EC6BA;IAGI;;;ADhCJ;ECoCI;IACE;IACA;;EACF;IACE;IACA;;;ADzCN;EC2CE;IAEI;;;;AAGR;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AD7DA;ECgEF;IAEI;;;;ADlEF;ECoEF;IAEI;;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE,aDnGQ;;;ACqGV;EACE,aDrGQ;;;ACuGV;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGA;EACE;EACA;;AAEF;EACE;;AACA;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AACJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA,kBDjJJ;ECkJI;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;ADnJN;EC6HE;IAyBI;;;AAEF;AAAA;EAEE;EACA;;AAEF;EACE;EACA;;AAEN;EACE;EACA;EACA;;ADpKF;ECiKA;IAKI;;;AAEF;EACE;EACA;EACA;EACA,kBDpLF;ECqLE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA,kBDrMD;;ACuMD;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEN;EACE;;AAEE;EACE;;AAGF;EACE;;AACA;EACE;;AACJ;EACE;;AAEJ;EACE;;AACA;EACE;;AACF;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;ADvOJ;ECkOE;IAOI;;;AAEF;EACE;;AAEF;EACE;;AAEJ;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE,ODpQF;ECqQE;;AACA;EACE","file":"app.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["sass/reset.sass","sass/fontface.sass","sass/helpers.sass","sass/animations.sass","sass/app.sass"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;EACA;EACA;EACA;;;AAEF;AACA;AAAA;EAEE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AChBD;AACC;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;AACA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAAA;AAAA;AAAA;EAKA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;EAEA;;;AC3HA;EACE;IACE;;EAEF;IACE;;;AALJ;EACE;IACE;;EAEF;IACE;;;AALJ;EACE;IACE;;EAEF;IACE;;;ACDN;EACE,kBFLM;EEMN,aFFQ;EEGR,OFNE;EEOF;EACA;;;AAEF;EACE;EACA;;AFJA;EEEF;IAII;IACA;;;AFPF;EEEF;IAOI;;;AAEF;EACE;EACA;;;AAEJ;EACE,kBF1BK;;;AE4BP;EACE,OF7BK;;;AE+BP;EACE;EACA;;AFvBA;EEqBF;IAII;;;AAEF;EACE;;AAEF;EACE;;AF/BF;EE8BA;IAGI;;;AFjCJ;EEqCI;IACE;IACA;;EACF;IACE;IACA;;;AF1CN;EE4CE;IAEI;;;;AAGR;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AF9DA;EEiEF;IAEI;;;;AFnEF;EEqEF;IAEI;;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE,aFpGQ;;;AEsGV;EACE,aFtGQ;;;AEwGV;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGA;EACE;EACA;;AAEF;EACE;;AACA;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AACJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AFpIJ;EE8HE;IAQI;;;AAEF;EAEE;EACA;EACA,kBFpJJ;EEqJI;EACA;EACA;;AAEF;EACE;EACA;;AFnJN;EEiJI;IAII;IACA;IACA;IACA;;;AFxJR;EEiJI;IASI;IACA;;;AAEJ;EACE;EACA;;AF/JN;EE6JI;IAII;IACA;IACA;IACA;IACA;IACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA,YFxLD;EEyLC;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EAEE;EACA;;AAEF;EACE;EACA;;AAEN;EACE;EACA;EACA;;AFlMF;EE+LA;IAKI;;;AAEF;EACE;EACA;EACA;EACA,kBFlNF;EEmNE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA,kBFnOD;;AEqOD;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEN;EACE;;AAEE;EACE;;AAGF;EACE;;AACA;EACE;;AACJ;EACE;;AAEJ;EACE;;AACA;EACE;;AACF;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AFrQJ;EEgQE;IAOI;;;AAEF;EACE;;AAEF;EACE;;AAEJ;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE,OFlSF;EEmSE;;AACA;EACE","file":"app.css"}
\ No newline at end of file

diff --git a/index.html b/index.html
index f2466d3983f94368d905874c3b4e5d23593040e9..0640ddd8691fbca817687bc0ee9adc09516cd384 100644 (file)
--- a/index.html
+++ b/index.html
@@ -26,6 +26,7 @@
                     <polygon class="cls-1" points="0 0 0 630.51 448.64 0 0 0"/>
                     </g>
                 </svg>
+                <div class="overlay"></div>
             </div>
             <p class="first">Construire.</p>
             <p class="second">Notre</p>

diff --git a/sass/animations.sass b/sass/animations.sass
new file mode 100644 (file)
index 0000000..6c4d029
--- /dev/null
+++ b/sass/animations.sass
@@ -0,0 +1,12 @@
+@mixin width($from, $to, $name)
+  @keyframes #{$name}
+    0%
+      width: #{$from}
+
+    100%
+      width: #{$to}
+
+
++width(0px, 493px, "line-first")
++width(0vw, 100vw, "line-second")
++width(100%, 0, "overlay")
\ No newline at end of file

diff --git a/sass/app.sass b/sass/app.sass
index a745f606640358de4dc75e3ff473f3149d58b7f6..5174bffe72251bc92653d7aa2e67525a378ecd0a 100644 (file)
--- a/sass/app.sass
+++ b/sass/app.sass
@@ -1,6 +1,7 @@
 @import "reset"
 @import "fontface"
 @import "helpers"
+@import "animations"
 
 body
   background-color: $black
@@ -138,8 +139,10 @@ b
       padding-bottom: 24.52%
       width: 24.52%
       position: absolute
-      right: 0
       top: 2.2vw
+      right: var(--space-l-3xl)
+      +screen-size(desktop)
+        right: 145px
 
       &:before,
       &:after
@@ -148,17 +151,44 @@ b
         background-color: $w
         position: absolute
         bottom: 29%
+        z-index: 4
 
       &:before
         width: 93%
         left: -100%
+        +screen-size(small-desktop)
+          animation-name: line-first
+          animation-timing-function: cubic-bezier(.82,0,.65,.93)
+          animation-fill-mode: forwards
+          animation-duration: 1s
+        +screen-size(desktop)
+          width: 0
+          transform: translateX(-79px)
 
       &:after
         width: 100vw
         left: 80%
-        
-      +screen-size(desktop)
-        right: var(--space-l-3xl)
+        +screen-size(small-desktop)
+          width: 0
+          animation-name: line-second
+          animation-timing-function: linear
+          animation-fill-mode: forwards
+          animation-delay: 1s
+          animation-duration: 3s
+
+      .overlay
+        position: absolute
+        width: 100%
+        height: 100%
+        top: 0
+        right: 0
+        background: $blue
+        z-index: 3
+        transform: skewX(-35deg)
+        animation-name: overlay
+        animation-fill-mode: forwards
+        animation-duration: 1s
+        animation-delay: 1s
 
       video,
       svg