From 1ba4e3ac90b5273b585ce26db5fb2295d5ce822e Mon Sep 17 00:00:00 2001 From: nael Date: Tue, 6 Nov 2018 18:06:44 +0100 Subject: [PATCH] wip #2323 @7 --- Fluidbook-presentation-p15/bubble.svg | 1 + Fluidbook-presentation-p15/house.svg | 1 + Fluidbook-presentation-p15/index.html | 64 +++++++- Fluidbook-presentation-p15/main.js | 88 ++++++----- Fluidbook-presentation-p15/style.css | 193 ++++++++++++++++++++--- Fluidbook-presentation-p15/style.css.map | 2 +- Fluidbook-presentation-p15/style.sass | 180 +++++++++++++++++---- 7 files changed, 437 insertions(+), 92 deletions(-) create mode 100644 Fluidbook-presentation-p15/bubble.svg create mode 100644 Fluidbook-presentation-p15/house.svg diff --git a/Fluidbook-presentation-p15/bubble.svg b/Fluidbook-presentation-p15/bubble.svg new file mode 100644 index 0000000..f514ac3 --- /dev/null +++ b/Fluidbook-presentation-p15/bubble.svg @@ -0,0 +1 @@ +bubble \ No newline at end of file diff --git a/Fluidbook-presentation-p15/house.svg b/Fluidbook-presentation-p15/house.svg new file mode 100644 index 0000000..1100e7c --- /dev/null +++ b/Fluidbook-presentation-p15/house.svg @@ -0,0 +1 @@ +house \ No newline at end of file diff --git a/Fluidbook-presentation-p15/index.html b/Fluidbook-presentation-p15/index.html index 3c970c8..0c4726f 100644 --- a/Fluidbook-presentation-p15/index.html +++ b/Fluidbook-presentation-p15/index.html @@ -12,6 +12,7 @@
H a + bitation
- +
+ 8 résultats sur 4 pages +
+
- + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + + +
diff --git a/Fluidbook-presentation-p15/main.js b/Fluidbook-presentation-p15/main.js index 531d910..8b4884f 100644 --- a/Fluidbook-presentation-p15/main.js +++ b/Fluidbook-presentation-p15/main.js @@ -1,43 +1,57 @@ var tl = new TimelineMax(); -tl.from(".mouse-img",1,{opacity:0, top:180, left:200, transform:"rotate(-30deg)"}); +tl.from(".mouse-img",0.7,{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},0.9); + tl.to(".stroke-1",0.1,{width:0, right: 100,opacity: 0},1); + tl.from(".stroke-2",0.1,{width:0, right: 100,opacity: 0},0.9); + tl.to(".stroke-2",0.1,{width:0, right: 100,opacity: 0},1); + tl.from(".stroke-3",0.1,{width:0, right: 100,opacity: 0},0.9); + tl.to(".stroke-3",0.1,{width:0, right: 100,opacity: 0},1); + tl.from(".stroke-4",0.1,{width:0, left: 100,opacity: 0},0.9); + tl.to(".stroke-4",0.1,{width:0, left: 100,opacity: 0},1); + tl.from(".stroke-5",0.1,{width:0, left: 100,opacity: 0},0.9); + tl.to(".stroke-5",0.1,{width:0, left: 100,opacity: 0},1); + tl.from(".stroke-6",0.1,{width:0, left: 100,opacity: 0},0.9); + tl.to(".stroke-6",0.1,{width:0, left: 100,opacity: 0},1); + 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.1,{opacity:0}); + tl.to(".bar",0,{display:'none',left:172}); + tl.from(".searchbar-nav_letter",0.2,{display:'none'}); + tl.to(".bar",0.1,{display:'block'}); + tl.to(".bar",0,{display:'none',left:186}); + tl.from(".searchbar-nav_letters",0.2,{display:'none'}); + tl.to(".bar",0.1,{display:'block'}); + tl.fromTo(".searchbar-dropdown",0.3,{height:0},{height: 165}); + tl.from(".searchbar-list",0.05,{display:'none',opacity:0},"-=0.05"); + tl.fromTo(".mouse-img",0.5,{top: 100,left:238,transform: 'rotate(-32deg)'}, {opacity:1, left:238, top:140, delay:0.6}); + tl.to(".first",0.3,{background: "#133950",color: "#F3F3F3"},"-=0.25"); + 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.8,{display:'block'}); + tl.to(".mouse-img",0.1,{display:'none'}); + tl.to(".first",0.3,{background: "#F3F3F3",color: "#133950"},'=-0.1'); +tl.to(".searchbar-nav_word",0.3,{opacity:1}); + tl.to(".searchbar-list",0.1,{opacity:0,display:'none'}); + tl.to(".searchbar-dropdown",0.4,{height:0}); + tl.to(".bigmagazine",0.5,{left:140,opacity:0,display:'none'}); + tl.from(".results",0.5,{opacity:0,top:100,display:'none'},"-=0.2"); + tl.staggerFrom(".smallmag",0.5,{opacity:0,display:'none',left:-100},0.2); -tl.to(".mouse-img",0.1,{display:'none'}); -tl.to(".mouse-click",0.1,{display: 'block'}); +$(".bubble-item").each(function (i) { + var circle = $(this).find('.circle'); + var logo = $(this).find('.circle-logo'); -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'}); -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 + setTimeout(function () { + tl.to(circle,0.05,{transform:'scale(1)',display:'block'}); + tl.to(logo,0.1,{opacity:1}); + console.log(i); + }, i*50); +}); diff --git a/Fluidbook-presentation-p15/style.css b/Fluidbook-presentation-p15/style.css index 1651085..d5e61f5 100644 --- a/Fluidbook-presentation-p15/style.css +++ b/Fluidbook-presentation-p15/style.css @@ -27,7 +27,7 @@ .searchbar-nav_letter { font-family: typo; position: relative; - top: 4px; + top: 2px; left: 10px; color: #133950; font-weight: 900; @@ -35,11 +35,20 @@ .searchbar-nav_letters { font-family: typo; position: relative; - top: 4px; + top: 2px; left: 6px; color: #133950; font-weight: 900; font-size: 20px; } + .searchbar-nav_word { + font-family: typo; + font-size: 20px; + position: relative; + color: #133950; + font-weight: 900; + left: 1px; + top: 2px; + opacity: 0; } .searchbar-dropdown { width: 283px; height: 165px; @@ -94,52 +103,52 @@ left: 12px; transform: rotate(-36deg); } .stroke-1 { - width: 5px; + width: 10px; background: #133950; position: absolute; top: 114.5px; left: 110px; - height: 0.25px; + height: 0.75px; transform: rotate(-5deg); } .stroke-2 { - width: 5px; + width: 10px; background: #133950; position: absolute; - top: 110px; - left: 107px; - height: 0.25px; + top: 108px; + left: 106px; + height: 0.75px; transform: rotate(-51deg); } .stroke-3 { - width: 5px; + width: 10px; background: #133950; position: absolute; - top: 119px; - left: 109.5px; - height: 0.25px; + top: 122px; + left: 110.5px; + height: 0.75px; transform: rotate(28deg); } .stroke-4 { - width: 5px; + width: 10px; background: #133950; position: absolute; top: 114.5px; - left: 94px; - height: 0.25px; + left: 89px; + height: 0.75px; transform: rotate(4deg); } .stroke-5 { - width: 5px; + width: 10px; background: #133950; position: absolute; - top: 110px; - left: 96px; - height: 0.25px; + top: 108px; + left: 93px; + height: 0.75px; transform: rotate(40deg); } .stroke-6 { - width: 5px; + width: 10px; background: #133950; position: absolute; - top: 119px; - left: 95px; - height: 0.25px; + top: 122px; + left: 91px; + height: 0.75px; transform: rotate(140deg); } .bar { @@ -150,12 +159,146 @@ position: absolute; left: 156px; top: 103px; - animation: FadeBar 600ms infinite; - transition: all 600ms cubic-bezier(1, 0, 0, 1); } + animation: FadeBar 1s infinite; + transition: all 1s cubic-bezier(1, 0, 0, 1); } @keyframes FadeBar { 0% { opacity: 0; } 100% { opacity: 1; } } +.results { + position: absolute; + background: #75BD89; + top: 157px; + left: 89px; + width: calc(427px - 36px); + padding: 0px 20px 0px 16px; + height: 47px; + border-radius: 2px; + display: flex; + align-items: center; + justify-content: space-between; } + .results-text { + color: white; + font-family: typo; + font-weight: 900; + font-size: 18px; } + .results-cross { + width: 2px; + height: 21px; + background: white; + transform: rotate(45deg); } + .results-cross::after { + width: 2px; + height: 21px; + content: ""; + display: block; + background: white; + transform: rotate(-90deg); } + +.smallmagazine-1 { + position: absolute; + top: 244px; + left: 89px; + width: 211px; } + +.smallmagazine-2 { + position: absolute; + top: 244px; + left: 313px; + width: 211px; } + +.smallmagazine-3 { + position: absolute; + top: 395px; + left: 84px; + width: 211px; } + +.smallmagazine-4 { + position: absolute; + top: 396px; + left: 314px; + width: 211px; + /* */ } + +.circle { + z-index: 20; + display: none; + transform: scale(0); } + +.circle-logo { + opacity: 0; + /* */ } + +.circle-1 { + position: absolute; + top: 194px; + left: 28px; + transform-origin: bottom right; } + +.img-med { + width: 90px; } + +.logo-med { + width: 53px; + position: absolute; + top: 20px; + left: 18px; } + +.circle-2 { + position: absolute; + top: 205px; + left: 142px; + transform-origin: bottom right; } + +.img-large { + width: 126px; + top: 5px; + left: 42px; } + +.logo-large { + width: 74px; + position: absolute; + top: 30px; + left: 25px; } + +.circle-3 { + position: absolute; + top: 338px; + left: 20px; + transform-origin: bottom right; } + +.circle-4 { + position: absolute; + top: 427px; + left: 159px; + transform-origin: bottom right; } + +.circle-5 { + position: absolute; + top: 215px; + left: 343px; + transform-origin: bottom left; } + +.img-flip { + transform: scaleX(-1); } + +.circle-6 { + position: absolute; + top: 209px; + left: 439px; + transform-origin: bottom left; } + +.circle-7 { + position: absolute; + top: 273px; + left: 500px; + transform-origin: bottom left; } + +.circle-8 { + position: absolute; + top: 375px; + left: 356px; + transform-origin: bottom left; } /*# sourceMappingURL=style.css.map */ diff --git a/Fluidbook-presentation-p15/style.css.map b/Fluidbook-presentation-p15/style.css.map index 342e5ec..417deec 100644 --- a/Fluidbook-presentation-p15/style.css.map +++ b/Fluidbook-presentation-p15/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"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 b6c7b18..38f5faa 100644 --- a/Fluidbook-presentation-p15/style.sass +++ b/Fluidbook-presentation-p15/style.sass @@ -4,6 +4,8 @@ $searchbar-bg : #F3F3F3 $darkblue: #133950 $bar : #0C2C45 +$result: #75BD89 +$circle : rgba(25, 60, 85, 0.9) @font-face font-family: "typo" src: url("font.woff") format('woff') @@ -11,7 +13,7 @@ $bar : #0C2C45 .container width: 601px height: 583px - //background-image: url("bg.png") + //background-image: url("image/bg-circle.png") position: relative #canva position: absolute @@ -30,7 +32,7 @@ $bar : #0C2C45 &_letter font-family: typo position: relative - top: 4px + top: 2px left: 10px color: $darkblue font-weight: 900 @@ -38,11 +40,21 @@ $bar : #0C2C45 &_letters font-family: typo position: relative - top: 4px + top: 2px left: 6px color: $darkblue font-weight: 900 font-size: 20px + &_word + font-family: typo + font-size: 20px + position: relative + color: $darkblue + font-weight: 900 + left: 1px + top: 2px + opacity: 0 + &-dropdown width: 283px height: 165px @@ -96,53 +108,52 @@ $bar : #0C2C45 left: 12px transform: rotate(-36deg) &-1 - width: 5px + width: 10px background: $darkblue position: absolute top: 114.5px left: 110px - height: 0.25px + height: 0.75px transform: rotate(-5deg) &-2 - width: 5px + width: 10px background: $darkblue position: absolute - top: 110px - left: 107px - height: 0.25px + top: 108px + left: 106px + height: 0.75px transform: rotate(-51deg) &-3 - width: 5px + width: 10px background: $darkblue position: absolute - top: 119px - left: 109.5px - height: 0.25px + top: 122px + left: 110.5px + height: 0.75px transform: rotate(28deg) - &-4 - width: 5px + width: 10px background: $darkblue position: absolute top: 114.5px - left: 94px - height: 0.25px + left: 89px + height: 0.75px transform: rotate(4deg) &-5 - width: 5px + width: 10px background: $darkblue position: absolute - top: 110px - left: 96px - height: 0.25px + top: 108px + left: 93px + height: 0.75px transform: rotate(40deg) &-6 - width: 5px + width: 10px background: $darkblue position: absolute - top: 119px - left: 95px - height: 0.25px + top: 122px + left: 91px + height: 0.75px transform: rotate(140deg) .bar width: 2px @@ -152,11 +163,126 @@ $bar : #0C2C45 position: absolute left: 156px top: 103px - animation: FadeBar 600ms infinite - transition: all 600ms cubic-bezier(1, 0, 0, 1) + animation: FadeBar 1s infinite + transition: all 1s cubic-bezier(1, 0, 0, 1) @keyframes FadeBar 0% opacity: 0 100% opacity: 1 +.results + position: absolute + background: $result + top: 157px + left: 89px + width: calc(427px - 36px) + padding: 0px 20px 0px 16px + height: 47px + border-radius: 2px + display: flex + align-items: center + justify-content: space-between + &-text + color: white + font-family: typo + font-weight: 900 + font-size: 18px + &-cross + width: 2px + height: 21px + background: white + transform: rotate(45deg) + &::after + width: 2px + height: 21px + content: "" + display: block + background: white + transform: rotate(-90deg) +.smallmagazine-1 + position: absolute + top: 244px + left: 89px + width: 211px +.smallmagazine-2 + position: absolute + top: 244px + left: 313px + width: 211px +.smallmagazine-3 + position: absolute + top: 395px + left: 84px + width: 211px +.smallmagazine-4 + position: absolute + top: 396px + left: 314px + width: 211px + /**/ +.circle + z-index: 20 + display: none + transform: scale(0) +.circle-logo + opacity: 0 + /**/ +.circle-1 + position: absolute + top: 194px + left: 28px + transform-origin: bottom right +.img-med + width: 90px +.logo-med + width: 53px + position: absolute + top: 20px + left: 18px +.circle-2 + position: absolute + top: 205px + left: 142px + transform-origin: bottom right +.img-large + width: 126px + top: 5px + left: 42px +.logo-large + width: 74px + position: absolute + top: 30px + left: 25px +.circle-3 + position: absolute + top: 338px + left: 20px + transform-origin: bottom right +.circle-4 + position: absolute + top: 427px + left: 159px + transform-origin: bottom right +.circle-5 + position: absolute + top: 215px + left: 343px + transform-origin: bottom left +.img-flip + transform: scaleX(-1) +.circle-6 + position: absolute + top: 209px + left: 439px + transform-origin: bottom left +.circle-7 + position: absolute + top: 273px + left: 500px + transform-origin: bottom left +.circle-8 + position: absolute + top: 375px + left: 356px + transform-origin: bottom left \ No newline at end of file -- 2.39.5