]> _ Git - Animations.git/commitdiff
wait #2471 @3
authornael <nael@cubedesigners.com>
Tue, 8 Jan 2019 09:53:10 +0000 (10:53 +0100)
committernael <nael@cubedesigners.com>
Tue, 8 Jan 2019 09:53:10 +0000 (10:53 +0100)
Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/Montserrat-Regular.woff [new file with mode: 0644]
Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/index.html [new file with mode: 0644]
Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/style.css [new file with mode: 0644]
Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/style.css.map [new file with mode: 0644]
Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/style.sass [new file with mode: 0644]

diff --git a/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/Montserrat-Regular.woff b/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/Montserrat-Regular.woff
new file mode 100644 (file)
index 0000000..af3b5ec
Binary files /dev/null and b/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/Montserrat-Regular.woff differ
diff --git a/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/index.html b/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/index.html
new file mode 100644 (file)
index 0000000..4dc50c7
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<canvas id="canva" width="602" height="779"></canvas>
+<div class="container">
+    <!--<img src="bg.png" alt="">-->
+    <h1 class="line">
+        <span>fluidbook transforme votre publication en un</span>
+    </h1>
+    <h1 class="line secondblock">
+        <span>feuilleteur interactif en ligne ou hors ligne</span>
+    </h1>
+
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/style.css b/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/style.css
new file mode 100644 (file)
index 0000000..b4ab422
--- /dev/null
@@ -0,0 +1,72 @@
+* {
+  margin: 0;
+  padding: 0; }
+
+@font-face {
+  font-family: Montserrat-Regular;
+  src: url("Montserrat-Regular.woff"); }
+#canva {
+  display: none;
+  position: absolute; }
+
+.container {
+  width: 602px;
+  height: 779px; }
+
+.line {
+  position: absolute;
+  font-size: 12px;
+  letter-spacing: -0.1px;
+  color: white;
+  text-transform: uppercase;
+  padding: 0.4em 1em 0.7em 1em;
+  font-family: Montserrat-Regular;
+  font-weight: 500;
+  overflow: hidden;
+  left: 84px;
+  top: 190px;
+  width: 331px; }
+  .line::before {
+    content: "";
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 0;
+    height: 100%;
+    background: #3A90CA; }
+  .line span {
+    opacity: 0;
+    animation: appear-text 0.5s ease-out forwards;
+    position: relative; }
+  .line::before {
+    animation: rev-block 0.5s ease-out forwards;
+    animation-delay: 1s; }
+  .line span {
+    animation-delay: 1.25s; }
+
+.secondblock {
+  letter-spacing: -0.65px;
+  top: 208px;
+  width: 314px; }
+  .secondblock::before {
+    animation: rev-block 0.5s ease-out forwards;
+    animation-delay: 1.3s; }
+  .secondblock span {
+    animation-delay: 1.55s; }
+
+@keyframes rev-block {
+  0% {
+    left: 0;
+    width: 0; }
+  100% {
+    left: 0;
+    width: 100%; } }
+@keyframes appear-text {
+  0% {
+    opacity: 0;
+    left: -30px; }
+  100% {
+    opacity: 1;
+    left: 0; } }
+
+/*# sourceMappingURL=style.css.map */
diff --git a/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/style.css.map b/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/style.css.map
new file mode 100644 (file)
index 0000000..d14b49a
--- /dev/null
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAKA,CAAC;EACC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;EAGV,WAAW,EAAE,kBAAkB;EAC/B,GAAG,EAAE,8BAA8B;AAErC,MAAM;EACJ,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;;AAEpB,UAAU;EACR,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;;AAWf,KAAK;EACH,QAAQ,EAAE,QAAQ;EAClB,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,MAAM;EACtB,KAAK,EAAE,KAAK;EACZ,cAAc,EAAE,SAAS;EACzB,OAAO,EAAE,mBAAmB;EAC5B,WAAW,EAAE,kBAAkB;EAC/B,WAAW,EAAE,GAAG;EAChB,QAAQ,EAAE,MAAM;EAChB,IAAI,EAvCC,IAAI;EAqBT,GAAG,EAiCgB,KAAK;EAhCxB,KAAK,EAgC4B,KAAK;EAbtC,aAAS;IACP,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,IAAI;IACZ,UAAU,EAjDT,OAAO;EAkDV,UAAI;IACF,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,kCAAkC;IAC7C,QAAQ,EAAE,QAAQ;EA7BpB,aAAS;IACP,SAAS,EAAE,gCAAgC;IAC3C,eAAe,EAAG,EAAoB;EACxC,UAAI;IACF,eAAe,EAAE,KAAmC;;AA6BxD,YAAY;EACV,cAAc,EAAE,OAAO;EApCvB,GAAG,EAqCiB,KAAK;EApCzB,KAAK,EAoC8B,KAAK;EAnCxC,oBAAS;IACP,SAAS,EAAE,gCAAgC;IAC3C,eAAe,EAAG,IAAoB;EACxC,iBAAI;IACF,eAAe,EAAE,KAAmC;;;;IAmCpD,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;;IAER,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,IAAI;;;IAIX,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,KAAK;;IAEX,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,CAAC",
+"sources": ["style.sass"],
+"names": [],
+"file": "style.css"
+}
\ No newline at end of file
diff --git a/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/style.sass b/Fluidbook-presentation-reveal/Fluidbook-presentation-reveal-p4/style.sass
new file mode 100644 (file)
index 0000000..e16265a
--- /dev/null
@@ -0,0 +1,76 @@
+$bg: #3A90CA
+$left: 84px
+$delay: 1s
+$delay_text:0.25s
+
+*
+  margin: 0
+  padding: 0
+
+@font-face
+  font-family: Montserrat-Regular
+  src: url("Montserrat-Regular.woff")
+
+#canva
+  display: none
+  position: absolute
+
+.container
+  width: 602px
+  height: 779px
+
+@mixin line($top,$width, $line_delay)
+  top: $top
+  width: $width
+  &::before
+    animation: rev-block 0.5s ease-out forwards
+    animation-delay:  $delay + $line_delay
+  span
+    animation-delay: ($delay + $line_delay + $delay_text)
+
+.line
+  position: absolute
+  font-size: 12px
+  letter-spacing: -0.1px
+  color: white
+  text-transform: uppercase
+  padding: 0.4em 1em 0.7em 1em
+  font-family: Montserrat-Regular
+  font-weight: 500
+  overflow: hidden
+  left: $left
+
+  &::before
+    content: ''
+    top: 0
+    left: 0
+    position: absolute
+    width: 0
+    height: 100%
+    background: $bg
+  span
+    opacity: 0
+    animation: appear-text 0.5s ease-out forwards
+    position: relative
+
+  @include line($top:190px,$width: 331px, $line_delay:0s)
+
+.secondblock
+  letter-spacing: -0.65px
+  @include line($top: 208px, $width: 314px,$line_delay:0.3s)
+
+@keyframes rev-block
+  0%
+    left: 0
+    width: 0
+  100%
+    left: 0
+    width: 100%
+
+@keyframes appear-text
+  0%
+    opacity: 0
+    left: -30px
+  100%
+    opacity: 1
+    left: 0
\ No newline at end of file