wip #2323 @7

diff --git a/Fluidbook-presentation-p15/font.woff b/Fluidbook-presentation-p15/font.woff
index 8a054ad0f721df15ebbc83c26da2bcc2c0251dda..61da1cfb1694417abb19232fe0a56ffce141b306 100644 (file)
Binary files a/Fluidbook-presentation-p15/font.woff and b/Fluidbook-presentation-p15/font.woff differ

diff --git a/Fluidbook-presentation-p15/index.html b/Fluidbook-presentation-p15/index.html
index 73836b33eff3c53be4d873baae19a269e6a1c99a..3c970c814bdcd2030289c4ac49eb8e7d53a8c921 100644 (file)
--- a/Fluidbook-presentation-p15/index.html
+++ b/Fluidbook-presentation-p15/index.html
@@ -9,7 +9,20 @@
 <canvas id="canva" width="601" height="583"></canvas>
 <div class="container">
     <div class="searchbar">
-        <div class="searchbar-nav"></div>
+        <div class="searchbar-nav">
+            <span class="searchbar-nav_letter">H</span>
+            <span class="searchbar-nav_letters">a</span>
+        </div>
+        <div class="searchbar-dropdown">
+            <ul class="searchbar-list">
+                <li class="searchbar-list_item first">Habitation (8)</li>
+                <li class="searchbar-list_item">Habitat (3)</li>
+                <li class="searchbar-list_item">Havre (2)</li>
+                <li class="searchbar-list_item">Habitudes (1)</li>
+                <li class="searchbar-list_item">Hauteur (1)</li>
+                <li class="searchbar-list_item">Haussman (1)</li>
+            </ul>
+        </div>
         <img class="searchbar-loupe" src="search.svg" alt="">
     </div>
 
@@ -20,6 +33,15 @@
         <img class="mouse-img" src="mouse.svg" alt="">
         <img class="mouse-click" src="mouseclick.svg" alt="">
     </div>
+    <div class="stroke">
+        <div class="stroke-1"></div>
+        <div class="stroke-2"></div>
+        <div class="stroke-3"></div>
+        <div class="stroke-4"></div>
+        <div class="stroke-5"></div>
+        <div class="stroke-6"></div>
+    </div>
+    <div class="bar"></div>
 </div>
 
 

diff --git a/Fluidbook-presentation-p15/main.js b/Fluidbook-presentation-p15/main.js
index 0599cd239ee31eb431fd1f37471fb9bd3fdab43d..531d91074ed832c23eeb22c4264a78ad0eb6bcbb 100644 (file)
--- a/Fluidbook-presentation-p15/main.js
+++ b/Fluidbook-presentation-p15/main.js
@@ -1,7 +1,43 @@
 var tl = new TimelineMax();
 
 tl.from(".mouse-img",1,{opacity:0, top:180, left:200, transform:"rotate(-30deg)"});
+
+
+
 tl.to(".mouse-img",0.1,{display:'none'});
 tl.to(".mouse-click",0.1,{display: 'block'});
+
+tl.from(".stroke-1",0.1,{width:0, right: 100,opacity: 0},1.2);
+tl.to(".stroke-1",0.1,{width:0, right: 100,opacity: 0},1.3);
+tl.from(".stroke-2",0.1,{width:0, right: 100,opacity: 0},1.2);
+tl.to(".stroke-2",0.1,{width:0, right: 100,opacity: 0},1.3);
+tl.from(".stroke-3",0.1,{width:0, right: 100,opacity: 0},1.2);
+tl.to(".stroke-3",0.1,{width:0, right: 100,opacity: 0},1.3);
+tl.from(".stroke-4",0.1,{width:0, left: 100,opacity: 0},1.2);
+tl.to(".stroke-4",0.1,{width:0, left: 100,opacity: 0},1.3);
+tl.from(".stroke-5",0.1,{width:0, left: 100,opacity: 0},1.2);
+tl.to(".stroke-5",0.1,{width:0, left: 100,opacity: 0},1.3);
+tl.from(".stroke-6",0.1,{width:0, left: 100,opacity: 0},1.2);
+tl.to(".stroke-6",0.1,{width:0, left: 100,opacity: 0},1.3);
+
+tl.to(".mouse-click",0.1,{display: 'none'});
+tl.to(".mouse-img",0.1,{display:'block'});
+tl.from(".bar",0.3,{display:'none'});
+tl.to(".mouse-img",0.4,{opacity:0});
+tl.from(".searchbar-nav_letter",0.2,{display:'none', delay: 0.3});
+tl.fromTo(".bar",0.1,{display:'none'},{left:180,display:'block'});
+tl.to(".bar",0.1,{left:190});
+tl.from(".searchbar-nav_letters",0.2,{display:'none'});
+tl.fromTo(".searchbar-dropdown",0.4,{height:0},{height: 165});
+tl.from(".searchbar-list",0.1,{display:'none'},"-=0.05");
+tl.fromTo(".mouse-img",1,{top: 100,left:238,transform: 'rotate(-32deg)'}, {opacity:1, left:238, top:140});
+tl.to(".first",0.3,{background: "#133950",color: "#F3F3F3"},"-=0.7");
+tl.to(".mouse-click",0,{display:'none',top:146.5,left:240,transform:'rotate(-32deg)'});
+tl.to(".mouse-img",0.1,{display:'none'});
+tl.to(".mouse-click",0.1,{display:'block'});
 tl.to(".mouse-click",0.1,{display: 'none'});
-tl.to(".mouse-img",0.1,{display:'block'});
\ No newline at end of file
+tl.to(".mouse-img",0.1,{display:'block'});
+tl.to(".first",0.3,{background: "#F3F3F3",color: "#133950"});
+tl.to(".mouse-img",0.1,{display:'none'});
+tl.to(".searchbar-list",0.1,{opacity:0,display:'none'});
+tl.to(".searchbar-dropdown",0.4,{height:0});
\ No newline at end of file

diff --git a/Fluidbook-presentation-p15/style.css b/Fluidbook-presentation-p15/style.css
index e0ea320184d7ee207aa152d9765dcd9d048ab3b2..16510856a9acc58797a5d7f76d96ccc21261e6ea 100644 (file)
--- a/Fluidbook-presentation-p15/style.css
+++ b/Fluidbook-presentation-p15/style.css
@@ -2,6 +2,9 @@
   padding: 0;
   margin: 0; }
 
+@font-face {
+  font-family: "typo";
+  src: url("font.woff") format("woff"); }
 .container {
   width: 601px;
   height: 583px;
@@ -21,6 +24,41 @@
   border: 1px solid #F3F3F3;
   border-radius: 2px;
   box-shadow: 0px 0px 1px 1px rgba(13, 50, 76, 0.2); }
+  .searchbar-nav_letter {
+    font-family: typo;
+    position: relative;
+    top: 4px;
+    left: 10px;
+    color: #133950;
+    font-weight: 900;
+    font-size: 20px; }
+  .searchbar-nav_letters {
+    font-family: typo;
+    position: relative;
+    top: 4px;
+    left: 6px;
+    color: #133950;
+    font-weight: 900;
+    font-size: 20px; }
+.searchbar-dropdown {
+  width: 283px;
+  height: 165px;
+  top: 129px;
+  left: 147px;
+  position: absolute;
+  background: #F3F3F3;
+  z-index: 5; }
+.searchbar-list {
+  list-style: none; }
+  .searchbar-list_item {
+    font-family: typo;
+    color: #133950;
+    font-weight: 900;
+    position: relative;
+    margin: 0px 5px 0px 5px;
+    width: calc(100% - 20px);
+    padding: 0px 5px 0px 5px;
+    font-size: 20px; }
 .searchbar-loupe {
   width: 23px;
   position: absolute;
@@ -38,13 +76,86 @@
   position: absolute;
   top: 98px;
   left: 164px;
-  transform: rotate(-47deg); }
+  transform: rotate(-47deg);
+  z-index: 15; }
 .mouse-click {
   width: 43px;
   position: absolute;
   top: 104px;
   left: 166.5px;
   transform: rotate(-47deg);
-  display: none; }
+  display: none;
+  z-index: 15;
+  /** STROKE EFFECT* */ }
+
+.stroke {
+  position: absolute;
+  top: 80px;
+  left: 12px;
+  transform: rotate(-36deg); }
+  .stroke-1 {
+    width: 5px;
+    background: #133950;
+    position: absolute;
+    top: 114.5px;
+    left: 110px;
+    height: 0.25px;
+    transform: rotate(-5deg); }
+  .stroke-2 {
+    width: 5px;
+    background: #133950;
+    position: absolute;
+    top: 110px;
+    left: 107px;
+    height: 0.25px;
+    transform: rotate(-51deg); }
+  .stroke-3 {
+    width: 5px;
+    background: #133950;
+    position: absolute;
+    top: 119px;
+    left: 109.5px;
+    height: 0.25px;
+    transform: rotate(28deg); }
+  .stroke-4 {
+    width: 5px;
+    background: #133950;
+    position: absolute;
+    top: 114.5px;
+    left: 94px;
+    height: 0.25px;
+    transform: rotate(4deg); }
+  .stroke-5 {
+    width: 5px;
+    background: #133950;
+    position: absolute;
+    top: 110px;
+    left: 96px;
+    height: 0.25px;
+    transform: rotate(40deg); }
+  .stroke-6 {
+    width: 5px;
+    background: #133950;
+    position: absolute;
+    top: 119px;
+    left: 95px;
+    height: 0.25px;
+    transform: rotate(140deg); }
+
+.bar {
+  width: 2px;
+  height: 23px;
+  background: #0C2C45;
+  border-radius: 70px;
+  position: absolute;
+  left: 156px;
+  top: 103px;
+  animation: FadeBar 600ms infinite;
+  transition: all 600ms cubic-bezier(1, 0, 0, 1); }
+@keyframes FadeBar {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
 
 /*# sourceMappingURL=style.css.map */

diff --git a/Fluidbook-presentation-p15/style.css.map b/Fluidbook-presentation-p15/style.css.map
index 659a2a2bc7a1989d6072755c4274d4a6371991fe..342e5ecf30cea496969656f8457b18311c3c7953 100644 (file)
--- a/Fluidbook-presentation-p15/style.css.map
+++ b/Fluidbook-presentation-p15/style.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,CAAC;EACC,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;;AAEX,UAAU;EACR,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EAEb,QAAQ,EAAE,QAAQ;;AACpB,MAAM;EACJ,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;;AAEb,cAAK;EACH,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,IAAI;EACT,IAAI,EAAE,KAAK;EACX,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAhBE,OAAO;EAiBnB,MAAM,EAAE,iBAAuB;EAC/B,aAAa,EAAE,GAAG;EAClB,UAAU,EAAE,qCAAqC;AACnD,gBAAO;EACL,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,KAAK;EACV,IAAI,EAAE,KAAK;;AACf,YAAY;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,KAAK;EACV,IAAI,EAAE,IAAI;EACV,KAAK,EAAE,KAAK;;AAEZ,UAAK;EACH,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,IAAI;EACT,IAAI,EAAE,KAAK;EACX,SAAS,EAAE,cAAc;AAC3B,YAAO;EACL,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,KAAK;EACV,IAAI,EAAE,OAAO;EACb,SAAS,EAAE,cAAc;EACzB,OAAO,EAAE,IAAI",
+"mappings": "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",
 "sources": ["style.sass"],
 "names": [],
 "file": "style.css"

diff --git a/Fluidbook-presentation-p15/style.sass b/Fluidbook-presentation-p15/style.sass
index 964f3c6e7f1f9e398eefb8dbb5efceff7914a13e..b6c7b185e7c6ed24fd9f7a3a0d404b34934156eb 100644 (file)
--- a/Fluidbook-presentation-p15/style.sass
+++ b/Fluidbook-presentation-p15/style.sass
@@ -2,6 +2,12 @@
   padding: 0
   margin: 0
 $searchbar-bg : #F3F3F3
+$darkblue: #133950
+$bar : #0C2C45
+@font-face
+  font-family: "typo"
+  src: url("font.woff") format('woff')
+
 .container
   width: 601px
   height: 583px
@@ -21,11 +27,47 @@ $searchbar-bg : #F3F3F3
     border: 1px solid $searchbar-bg
     border-radius: 2px
     box-shadow: 0px 0px 1px 1px rgba(13, 50, 76, 0.2)
+    &_letter
+      font-family: typo
+      position: relative
+      top: 4px
+      left: 10px
+      color: $darkblue
+      font-weight: 900
+      font-size: 20px
+    &_letters
+      font-family: typo
+      position: relative
+      top: 4px
+      left: 6px
+      color: $darkblue
+      font-weight: 900
+      font-size: 20px
+  &-dropdown
+    width: 283px
+    height: 165px
+    top: 129px
+    left: 147px
+    position: absolute
+    background: #F3F3F3
+    z-index: 5
+  &-list
+    list-style: none
+    &_item
+      font-family: typo
+      color: $darkblue
+      font-weight: 900
+      position: relative
+      margin: 0px 5px 0px 5px
+      width: calc(100% - 20px)
+      padding: 0px 5px 0px 5px
+      font-size: 20px
   &-loupe
     width: 23px
     position: absolute
     top: 103px
     left: 445px
+
 .bigmagazine
   position: absolute
   top: 230px
@@ -38,10 +80,83 @@ $searchbar-bg : #F3F3F3
     top: 98px
     left: 164px
     transform: rotate(-47deg)
+    z-index: 15
   &-click
     width: 43px
     position: absolute
     top: 104px
     left: 166.5px
     transform: rotate(-47deg)
-    display: none
\ No newline at end of file
+    display: none
+    z-index: 15
+    /** STROKE EFFECT**/
+.stroke
+  position: absolute
+  top: 80px
+  left: 12px
+  transform: rotate(-36deg)
+  &-1
+    width: 5px
+    background: $darkblue
+    position: absolute
+    top: 114.5px
+    left: 110px
+    height: 0.25px
+    transform: rotate(-5deg)
+  &-2
+    width: 5px
+    background: $darkblue
+    position: absolute
+    top: 110px
+    left: 107px
+    height: 0.25px
+    transform: rotate(-51deg)
+  &-3
+    width: 5px
+    background: $darkblue
+    position: absolute
+    top: 119px
+    left: 109.5px
+    height: 0.25px
+    transform: rotate(28deg)
+
+  &-4
+    width: 5px
+    background: $darkblue
+    position: absolute
+    top: 114.5px
+    left: 94px
+    height: 0.25px
+    transform: rotate(4deg)
+  &-5
+    width: 5px
+    background: $darkblue
+    position: absolute
+    top: 110px
+    left: 96px
+    height: 0.25px
+    transform: rotate(40deg)
+  &-6
+    width: 5px
+    background: $darkblue
+    position: absolute
+    top: 119px
+    left: 95px
+    height: 0.25px
+    transform: rotate(140deg)
+.bar
+  width: 2px
+  height: 23px
+  background: $bar
+  border-radius: 70px
+  position: absolute
+  left: 156px
+  top: 103px
+  animation: FadeBar 600ms infinite
+  transition: all 600ms cubic-bezier(1, 0, 0, 1)
+
+  @keyframes FadeBar
+    0%
+      opacity: 0
+    100%
+      opacity: 1