From: nael Date: Mon, 17 Dec 2018 11:18:07 +0000 (+0100) Subject: wait #2362 @0.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=213a1141792b72b4307049808ba9ddcbf1182fe7;p=Animations.git wait #2362 @0.5 --- diff --git a/AccordHotel-p112/DalaFloda.woff b/AccordHotel-p112/DalaFloda.woff new file mode 100644 index 0000000..ca64f28 Binary files /dev/null and b/AccordHotel-p112/DalaFloda.woff differ diff --git a/AccordHotel-p112/bg.png b/AccordHotel-p112/bg.png index 355c4c9..a6e3d0c 100644 Binary files a/AccordHotel-p112/bg.png and b/AccordHotel-p112/bg.png differ diff --git a/AccordHotel-p112/index.html b/AccordHotel-p112/index.html index 4387c08..0cf9286 100644 --- a/AccordHotel-p112/index.html +++ b/AccordHotel-p112/index.html @@ -6,107 +6,112 @@ - +
-
-
- +

As a leading hotel
Operator and
Franchiser worldwide,
we have + developed
a unique know-how
in boosting hotel
performances.

+
+
+
+ +
+

+ - Hotel development
know-how
+ - Residential development
expertise
+ - Partnership made easy
+ - Design & create
destinations +

-

- - Hotel development
know-how
- - Residential development
expertise
- - Partnership made easy
- - Design & create
destinations -

-
-
-
- +
+
+ +
+

+ - Reliable systems
+ - A robust distribution
eco-system
+ - From ideation to hotel
solution deployment
+ - My Venue Finder +

-

- - Reliable systems
- - A robust distribution
eco-system
- - From ideation to hotel
solution deployment
- - My Venue Finder -

-
-
-
- +
+
+ +
+

+ - Our.com presence
+ - All Connect
+ - Connect our hotels
with our key clients
+ - Partner websites
a key support
+ - The App
+ - Social Media
+ - Brand-building
campaigns
+ - Massive presence
at tradeshows
+

-

- - Our.com presence
- - All Connect
- - Connect our hotels
with our key clients
- - Partner websites
a key support
- - The App
- - Social Media
- - Brand-building
campaigns
- - Massive presence
at tradeshows
-

-
-
-
- +
+
+ +
+

+ - Reservation call centres
+ - Business opportunities
+ - Le Club AccorHotels
+ - Revenue management
+ - Seasonal deals
+ - Develop new markets
+

-

- - Reservation call centres
- - Business opportunities
- - Le Club AccorHotels
- - Revenue management
- - Seasonal deals
- - Develop new markets
-

-
-
-
- +
+
+ +
+

+ - Guest knowledge
+ - Guest loyalty
+ - Customer experience
+ - Customer feedback
+ - Customer care
+

-

- - Guest knowledge
- - Guest loyalty
- - Customer experience
- - Customer feedback
- - Customer care
-

-
-
-
- +
+
+ +
+

+ - Operational expertise
+ - A complete set of
dashboards for hotels
and owners
+ - Security and safety
+ - Risk management
+ - Procurement power
+

-

- - Operational expertise
- - A complete set of
dashboards for hotels
and owners
- - Security and safety
- - Risk management
- - Procurement power
-

-
-
-
- +
+
+ +
+

+ - Section
+ - Learning & development
+ - Employee benefits
+ - Diversity and inclusion
+

-

- - Section
- - Learning & development
- - Employee benefits
- - Diversity and inclusion
-

-
-
-
- +
+
+ +
+

+ - Acting for positive
hospitality
+ - Planet 21 - Acting Here !
+

-

- - Acting for positive
hospitality
- - Planet 21 - Acting Here !
-

+ diff --git a/AccordHotel-p112/main.js b/AccordHotel-p112/main.js index 6003c44..84ee16f 100644 --- a/AccordHotel-p112/main.js +++ b/AccordHotel-p112/main.js @@ -1,13 +1,16 @@ let tl = new TimelineMax(); - tl.from('.bubble-item1',0.5,{display: 'none',top: 0, opacity:0}); - tl.from('.bubble-item2',0.5,{display: 'none',top: 0, opacity:0}, '-=0.3'); - tl.from('.bubble-item3',0.5,{display: 'none',top: 50, opacity:0}, '-=0.3'); - tl.from('.bubble-item4',0.5,{display: 'none',top: 200, opacity:0}, '-=0.3'); - tl.from('.bubble-item5',0.5,{display: 'none',top: 200, opacity:0}, '-=0.3'); - tl.from('.bubble-item6',0.5,{display: 'none',top: 300, opacity:0}, '-=0.3'); - tl.from('.bubble-item7',0.5,{display: 'none',top: 440, opacity:0}, '-=0.3'); - tl.from('.bubble-item8',0.5,{display: 'none',top: 440, opacity:0}, '-=0.3'); + tl.from('.title',1,{left: -20,opacity:0}); + tl.to('.bubble',0,{opacity:1}); + + tl.fromTo('.bubble-item1',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 115, left:113, opacity:1}); + tl.fromTo('.bubble-item2',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 115, left:334, opacity:1}, '-=0.3'); + tl.fromTo('.bubble-item3',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 187, left:223, opacity:1}, '-=0.3'); + tl.fromTo('.bubble-item4',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 330, left:113, opacity:1}, '-=0.3'); + tl.fromTo('.bubble-item5',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 330, left:334, opacity:1}, '-=0.3'); + tl.fromTo('.bubble-item6',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 437, left:223, opacity:1}, '-=0.3'); + tl.fromTo('.bubble-item7',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 544, left:113,opacity:1}, '-=0.3'); + tl.fromTo('.bubble-item8',0.5,{display: 'flex',left:223,top: 300},{display: 'flex',top: 544, left:334, opacity:1}, '-=0.3'); tl.from('.bubble-desc1',0.4,{opacity: 0}, '-=0.1'); diff --git a/AccordHotel-p112/style.css b/AccordHotel-p112/style.css new file mode 100644 index 0000000..339aaac --- /dev/null +++ b/AccordHotel-p112/style.css @@ -0,0 +1,219 @@ +* { + margin: 0; + padding: 0; } + +@font-face { + font-family: "typo"; + src: url("font.woff") format("woff"); } +@font-face { + font-family: "DalaFloda"; + src: url("DalaFloda.woff") format("woff"); } +#canvas { + display: none; + position: absolute; } + +.container { + width: 1078px; + height: 750px; + background: rosybrown; } + +.title { + color: white; + position: absolute; + top: 410px; + left: 45px; + font-size: 29px; + line-height: 1.1; } + +.bubble { + opacity: 0; } + .bubble-contain { + position: absolute; + left: 540px; + top: 0; } + .bubble-item1 { + width: 100px; + height: 100px; + border-radius: 50%; + background: #B2D1C8; + position: absolute; + left: 113px; + top: 115px; + display: flex; + align-items: center; + justify-content: center; } + .bubble-item1__img1 { + width: 71px; + margin-bottom: 8px; } + .bubble-desc1 { + color: white; + font-size: 7px; + position: absolute; + top: 226px; + left: 123px; + font-family: typo; + line-height: 1.35; + width: 96px; } + .bubble-item2 { + width: 100px; + height: 100px; + border-radius: 50%; + background: #B2D1C8; + position: absolute; + left: 334px; + top: 115px; + display: flex; + align-items: center; + justify-content: center; } + .bubble-item2__img2 { + width: 81px; + margin-bottom: 12px; } + .bubble-desc2 { + color: white; + font-size: 7px; + position: absolute; + top: 226px; + left: 344px; + font-family: typo; + line-height: 1.35; + width: 96px; } + .bubble-item3 { + width: 100px; + height: 100px; + border-radius: 50%; + background: #B2D1C8; + position: absolute; + left: 223px; + top: 187px; + display: flex; + align-items: center; + justify-content: center; } + .bubble-item3__img3 { + width: 62px; + margin-bottom: 8px; } + .bubble-desc3 { + color: white; + font-size: 7px; + position: absolute; + top: 299px; + left: 233px; + font-family: typo; + line-height: 1.4; + width: 96px; } + .bubble-item4 { + width: 100px; + height: 100px; + border-radius: 50%; + background: #B2D1C8; + position: absolute; + left: 113px; + top: 330px; + display: flex; + align-items: center; + justify-content: center; } + .bubble-item4__img4 { + width: 68px; + margin-bottom: 14px; } + .bubble-desc4 { + color: white; + font-size: 7px; + position: absolute; + top: 440px; + left: 123px; + font-family: typo; + line-height: 1.5; + width: 96px; } + .bubble-item5 { + width: 100px; + height: 100px; + border-radius: 50%; + background: #B2D1C8; + position: absolute; + left: 334px; + top: 330px; + display: flex; + align-items: center; + justify-content: center; } + .bubble-item5__img5 { + width: 63px; + margin-bottom: -3px; } + .bubble-desc5 { + color: white; + font-size: 7px; + position: absolute; + top: 440px; + left: 344px; + font-family: typo; + line-height: 1.5; + width: 96px; } + .bubble-item6 { + width: 100px; + height: 100px; + border-radius: 50%; + background: #B2D1C8; + position: absolute; + left: 223px; + top: 437px; + display: flex; + align-items: center; + justify-content: center; } + .bubble-item6__img6 { + width: 58px; + margin-bottom: -5px; } + .bubble-desc6 { + color: white; + font-size: 7px; + position: absolute; + top: 548px; + left: 233px; + font-family: typo; + line-height: 1.4; + width: 96px; } + .bubble-item7 { + width: 100px; + height: 100px; + border-radius: 50%; + background: #B2D1C8; + position: absolute; + left: 113px; + top: 544px; + display: flex; + align-items: center; + justify-content: center; } + .bubble-item7__img7 { + width: 80px; + margin-bottom: -4px; } + .bubble-desc7 { + color: white; + font-size: 7px; + position: absolute; + top: 655px; + left: 123px; + font-family: typo; + line-height: 1.45; + width: 96px; } + .bubble-item8 { + width: 100px; + height: 100px; + border-radius: 50%; + background: #B2D1C8; + position: absolute; + left: 334px; + top: 544px; + display: flex; + align-items: center; + justify-content: center; } + .bubble-item8__img8 { + width: 66px; + margin-bottom: -6px; } + .bubble-desc8 { + color: white; + font-size: 7px; + position: absolute; + top: 655px; + left: 344px; + font-family: typo; + line-height: 1.4; + width: 96px; } + +/*# sourceMappingURL=style.css.map */ diff --git a/AccordHotel-p112/style.css.map b/AccordHotel-p112/style.css.map new file mode 100644 index 0000000..badad92 --- /dev/null +++ b/AccordHotel-p112/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["style.sass"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/AccordHotel-p112/style.sass b/AccordHotel-p112/style.sass index da5dcbd..853279f 100644 --- a/AccordHotel-p112/style.sass +++ b/AccordHotel-p112/style.sass @@ -6,13 +6,29 @@ $bubble-bg: #B2D1C8 @font-face font-family: "typo" src: url("font.woff") format('woff') +@font-face + font-family: "DalaFloda" + src: url("DalaFloda.woff") format('woff') #canvas display: none position: absolute .container - width: 540px - height: 749px + width: 1078px + height: 750px + background: rosybrown +.title + color: white + position: absolute + top: 410px + left: 45px + font-size: 29px + line-height: 1.1 .bubble + opacity: 0 + &-contain + position: absolute + left: 540px + top: 0 &-item &-item1 width: 100px @@ -36,6 +52,7 @@ $bubble-bg: #B2D1C8 left: 123px font-family: typo line-height: 1.35 + width: 96px &-item2 width: 100px height: 100px @@ -58,6 +75,7 @@ $bubble-bg: #B2D1C8 left: 344px font-family: typo line-height: 1.35 + width: 96px &-item3 width: 100px height: 100px @@ -80,6 +98,7 @@ $bubble-bg: #B2D1C8 left: 233px font-family: typo line-height: 1.4 + width: 96px &-item4 width: 100px height: 100px @@ -102,6 +121,7 @@ $bubble-bg: #B2D1C8 left: 123px font-family: typo line-height: 1.5 + width: 96px &-item5 width: 100px height: 100px @@ -124,6 +144,7 @@ $bubble-bg: #B2D1C8 left: 344px font-family: typo line-height: 1.5 + width: 96px &-item6 width: 100px height: 100px @@ -146,6 +167,7 @@ $bubble-bg: #B2D1C8 left: 233px font-family: typo line-height: 1.4 + width: 96px &-item7 width: 100px height: 100px @@ -168,6 +190,7 @@ $bubble-bg: #B2D1C8 left: 123px font-family: typo line-height: 1.45 + width: 96px &-item8 width: 100px height: 100px @@ -189,4 +212,5 @@ $bubble-bg: #B2D1C8 top: 655px left: 344px font-family: typo - line-height: 1.4 \ No newline at end of file + line-height: 1.4 + width: 96px \ No newline at end of file