From: nael Date: Mon, 5 Nov 2018 16:59:48 +0000 (+0100) Subject: wip #2323 @7 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b8d3dfca93a923ab110780912a0427506cb4818e;p=Animations.git wip #2323 @7 --- diff --git a/Fluidbook-presentation-p15/font.woff b/Fluidbook-presentation-p15/font.woff index 8a054ad..61da1cf 100644 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 73836b3..3c970c8 100644 --- a/Fluidbook-presentation-p15/index.html +++ b/Fluidbook-presentation-p15/index.html @@ -9,7 +9,20 @@
-
+
+ H + a +
+
+
    +
  • Habitation (8)
    • +
  • Habitat (3)
    • +
  • Havre (2)
    • +
  • Habitudes (1)
    • +
  • Hauteur (1)
    • +
  • Haussman (1)
    • +
+
@@ -20,6 +33,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/Fluidbook-presentation-p15/main.js b/Fluidbook-presentation-p15/main.js index 0599cd2..531d910 100644 --- 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 e0ea320..1651085 100644 --- 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 659a2a2..342e5ec 100644 --- 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": "AAAA,CAAC;EACC,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;;;EAKT,WAAW,EAAE,MAAM;EACnB,GAAG,EAAE,+BAA+B;AAEtC,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,EAtBE,OAAO;EAuBnB,MAAM,EAAE,iBAAuB;EAC/B,aAAa,EAAE,GAAG;EAClB,UAAU,EAAE,qCAAqC;EACjD,qBAAQ;IACN,WAAW,EAAE,IAAI;IACjB,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,IAAI;IACV,KAAK,EA9BA,OAAO;IA+BZ,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,IAAI;EACjB,sBAAS;IACP,WAAW,EAAE,IAAI;IACjB,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,KAAK,EAtCA,OAAO;IAuCZ,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,IAAI;AACnB,mBAAU;EACR,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,GAAG,EAAE,KAAK;EACV,IAAI,EAAE,KAAK;EACX,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,OAAO;EACnB,OAAO,EAAE,CAAC;AACZ,eAAM;EACJ,UAAU,EAAE,IAAI;EAChB,oBAAM;IACJ,WAAW,EAAE,IAAI;IACjB,KAAK,EArDA,OAAO;IAsDZ,WAAW,EAAE,GAAG;IAChB,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,eAAe;IACvB,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,eAAe;IACxB,SAAS,EAAE,IAAI;AACnB,gBAAO;EACL,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,KAAK;EACV,IAAI,EAAE,KAAK;;AAEf,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;EACzB,OAAO,EAAE,EAAE;AACb,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;EACb,OAAO,EAAE,EAAE;;;AAEf,OAAO;EACL,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,IAAI;EACT,IAAI,EAAE,IAAI;EACV,SAAS,EAAE,cAAc;EACzB,SAAG;IACD,KAAK,EAAE,GAAG;IACV,UAAU,EA/FH,OAAO;IAgGd,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,OAAO;IACZ,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,aAAa;EAC1B,SAAG;IACD,KAAK,EAAE,GAAG;IACV,UAAU,EAvGH,OAAO;IAwGd,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,cAAc;EAC3B,SAAG;IACD,KAAK,EAAE,GAAG;IACV,UAAU,EA/GH,OAAO;IAgHd,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,aAAa;EAE1B,SAAG;IACD,KAAK,EAAE,GAAG;IACV,UAAU,EAxHH,OAAO;IAyHd,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,OAAO;IACZ,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,YAAY;EACzB,SAAG;IACD,KAAK,EAAE,GAAG;IACV,UAAU,EAhIH,OAAO;IAiId,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,aAAa;EAC1B,SAAG;IACD,KAAK,EAAE,GAAG;IACV,UAAU,EAxIH,OAAO;IAyId,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,cAAc;;AAC7B,IAAI;EACF,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,UAAU,EAhJL,OAAO;EAiJZ,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,KAAK;EACX,GAAG,EAAE,KAAK;EACV,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE,kCAAkC;;;IAI1C,OAAO,EAAE,CAAC;;IAEV,OAAO,EAAE,CAAC", "sources": ["style.sass"], "names": [], "file": "style.css" diff --git a/Fluidbook-presentation-p15/style.sass b/Fluidbook-presentation-p15/style.sass index 964f3c6..b6c7b18 100644 --- 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