From 5408c93e87f8c35d72401ca4e937d68d6f5dd44e Mon Sep 17 00:00:00 2001 From: ElisavetAmpatzidou Date: Mon, 3 Apr 2023 17:51:51 +0300 Subject: [PATCH] fix: add outro slide and fix title at the first one --- clip/clip.css | 70 +++++++++++++++++++++++-------- clip/clip.html | 16 +++++-- clip/clip.ts | 50 ++++++++++++---------- clip/effects/itemsCombo.ts | 8 ++-- clip/effects/productImageCombo.ts | 6 +-- clip/effects/productInfoCombo.ts | 22 +++++----- clip/initParams.ts | 4 +- clip/initParamsValidationRules.ts | 1 + 8 files changed, 114 insertions(+), 63 deletions(-) diff --git a/clip/clip.css b/clip/clip.css index b55fbd4..e17f44e 100644 --- a/clip/clip.css +++ b/clip/clip.css @@ -65,14 +65,9 @@ background-color: var(--backgroundColor); background-color: var(--primaryColor); color: var(--fontColor); border-radius: 30px; -} - -.description-content{ - margin: 33px 35px; display: flex; - flex-direction: column; - gap: 10px; - opacity: 0; + justify-content: center; + align-items: center; } .description-title{ @@ -81,15 +76,11 @@ background-color: var(--backgroundColor); font-weight: 900; font-size: 32px; line-height: 39px; + opacity: 0; + margin: 33px 35px; + text-align: center; } -.description-subtitle{ - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-size: 19px; - line-height: 23px; -} .images-container{ display: flex; @@ -119,15 +110,18 @@ background-color: var(--backgroundColor); } .product-image{ - position: absolute; width: 439px; height: 606px; - left: 91px; - top: 71px; border-radius: 30px; opacity: 0; } +.left-container .product-image{ + position: absolute; + left: 91px; + top: 71px; +} + .products-images{ display: flex; flex-direction: column; @@ -205,4 +199,44 @@ background-color: var(--backgroundColor); padding: 19px 30px; border-radius: 15px; transform: scale(0); -} \ No newline at end of file +} + +.outro { + position: absolute; + width: 1434px; + height: 749px; + left: 243px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} + +.outro .product-image{ + position: relative; +} + +.link-button{ + background-color: var(--primaryColor); + color: var(--fontColor); + border: none; + font-weight: bold; + font-size: 40px; + height: 70px; + padding: 0px 20px; + text-decoration: none; + display: flex; + justify-content: center; + align-items: center; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + position: absolute; + opacity: 0.8; + border-radius: 15px; +} + +.link-button:hover{ + color: var(--primaryColor); + background-color: var(--fontColor); +} diff --git a/clip/clip.html b/clip/clip.html index 2bd5961..d057ca6 100644 --- a/clip/clip.html +++ b/clip/clip.html @@ -7,10 +7,7 @@
-
{{initParams.title}}
-
{{initParams.subtitle}}
-
@@ -64,4 +61,17 @@
+
+
+
+ + View info + +
+
+ + diff --git a/clip/clip.ts b/clip/clip.ts index 378d115..0929083 100644 --- a/clip/clip.ts +++ b/clip/clip.ts @@ -32,53 +32,57 @@ const clip = new HTMLClip({ }); clip.addIncident( - widthHeight("236px", "148px", ".title-wrapper", 200, "@stagger(0,200)",[1,0,0.17,0.92]), + widthHeight("236px", "148px", ".title-wrapper", 300, "@stagger(0,200)",[0.77,0,0.18,1]), 0 ); clip.addIncident( - opacity(1, ".title", 10, "@stagger(0,200)",[1,0,0.17,0.92]), - 200 + opacity(1, ".title", 10, "@stagger(0,200)",[0.77,0,0.18,1]), + 400 ); clip.addIncident( - widthHeight("511px", "286px", ".description-container", 200,0,[1,0,0.17,0.92]), - 600 + widthHeight("511px", "286px", ".description-container", 300,0,[0.77,0,0.18,1]), + 1000 ); clip.addIncident( - opacity(1, ".description-content", 10,0,[1,0,0.17,0.92]), - 800 + opacity(1, ".description-title", 10,0,[0.77,0,0.18,1]), + 1350 ); clip.addIncident( - widthHeight("218px", "218px", ".image", 200, "@stagger(0,200)",[1,0,0.17,0.92]), - 900 + widthHeight("218px", "218px", ".image", 300, "@stagger(0,350)",[0.77,0,0.18,1]), + 1700 ); -clip.addIncident(top("280px", ".right-container", 100,0,[1,0,0.17,0.92]), 500); -clip.addIncident(top("167px", ".right-container", 100,0,[1,0,0.17,0.92]), 800); +clip.addIncident(top("280px", ".right-container", 100,0,[0.77,0,0.18,1]), 900); +clip.addIncident(top("167px", ".right-container", 100,0,[0.77,0,0.18,1]), 1410); -clip.addIncident(left("1017px", ".right-container", 300,0,[1,0,0.17,0.92]), 1400); -clip.addIncident(widthHeight("429px", "749px", ".left-container", 400,0,[1,0,0.17,0.92]), 1700); +clip.addIncident(left("1017px", ".right-container", 200,0,[0.77,0,0.18,1]), 2400); +clip.addIncident(widthHeight("429px", "749px", ".left-container", 400,0,[0.77,0,0.18,1]), 2800); -clip.addIncident(width("1434px", ".left-container", 300,0,[1,0,0.17,0.92]), 2700); -clip.addIncident(left("243px", ".left-container", 300,0,[1,0,0.17,0.92]), 2700); +clip.addIncident(width("1434px", ".left-container", 300,0,[0.77,0,0.18,1]), 4200); +clip.addIncident(left("243px", ".left-container", 300,0,[0.77,0,0.18,1]), 4200); -clip.addIncident(opacity(0, ".center-image,.right-container", 200,0,[1,0,0.17,0.92]), 3400); +clip.addIncident(opacity(0, ".center-image,.right-container", 200,0,[0.77,0,0.18,1]), 4900); -clip.addIncident(itemsCombo(".item-image"), 4000); -clip.addIncident(productInfoCombo(".product-info"), 4000); +clip.addIncident(itemsCombo(".item-image"), 5500); +clip.addIncident(productInfoCombo(".product-info"), 5500); clip.addIncident( - productImageCombo(".product-image"), - 4000 + productImageCombo(".left-container .product-image"), + 5500 ); clip.addIncident( - opacity(1, ".item-image", 200,0,[1,0,0.17,0.92]),3600 + opacity(1, ".item-image", 200,0,[0.77,0,0.18,1]),5100 ); + clip.addIncident( - scale(0, 1,".left-container", 200,"@expression(initParams.products.length*3000)",[1,0,0.17,0.92]),3800 + opacity(0,".products-images", 200,"@expression(initParams.products.length*4000)",[0.77,0,0.18,1]),5500 ); -export { clip }; +clip.addIncident( + opacity(1,".outro .product-image", 300,"@expression(initParams.products.length*4000)",[0.77,0,0.18,1]),5800 +); +export { clip }; diff --git a/clip/effects/itemsCombo.ts b/clip/effects/itemsCombo.ts index cc4330c..5d76a6f 100644 --- a/clip/effects/itemsCombo.ts +++ b/clip/effects/itemsCombo.ts @@ -14,7 +14,7 @@ export const itemsCombo = (selector) => }, }, props: { - duration: 200, + duration: 300, }, position: 0, }, @@ -29,14 +29,14 @@ export const itemsCombo = (selector) => }, }, props: { - duration: 200, + duration: 300, }, - position: 3000, + position: 4000, }, ], }, { selector, - delay: "@expression(index *3000)", + delay: "@expression(index *4000)", } ); \ No newline at end of file diff --git a/clip/effects/productImageCombo.ts b/clip/effects/productImageCombo.ts index a2760f3..a764e6e 100644 --- a/clip/effects/productImageCombo.ts +++ b/clip/effects/productImageCombo.ts @@ -14,7 +14,7 @@ export const productImageCombo = (selector) => }, }, props: { - duration: 200, + duration: 300, }, position: 0, @@ -33,13 +33,13 @@ export const productImageCombo = (selector) => duration: 90, }, - position: 3010, + position: 4010, }, ], }, { selector, - delay: "@expression(index *3000)", + delay: "@expression(index *4000)", } ); \ No newline at end of file diff --git a/clip/effects/productInfoCombo.ts b/clip/effects/productInfoCombo.ts index d4c398d..eb59069 100644 --- a/clip/effects/productInfoCombo.ts +++ b/clip/effects/productInfoCombo.ts @@ -15,10 +15,10 @@ export const productInfoCombo = (selector) => }, props: { selector:".product-description", - duration: 200, + duration: 300, }, - position: 100, + position: 300, }, { incidentClass: CSSEffect, @@ -32,10 +32,10 @@ export const productInfoCombo = (selector) => }, props: { selector:".product-title", - duration: 200, + duration: 300, }, - position: 100, + position: 300, }, { incidentClass: CSSEffect, @@ -52,7 +52,7 @@ export const productInfoCombo = (selector) => delay:"@stagger(0,300)", duration: 100, }, - position: 100, + position: 500, }, { incidentClass: CSSEffect, @@ -69,7 +69,7 @@ export const productInfoCombo = (selector) => delay:"@stagger(0,300)", duration: 100, }, - position: 100, + position: 500, }, { incidentClass: CSSEffect, @@ -90,7 +90,7 @@ export const productInfoCombo = (selector) => duration: 100, }, - position: 500, + position: 900, }, { incidentClass: CSSEffect, @@ -107,7 +107,7 @@ export const productInfoCombo = (selector) => duration: 200, }, - position: 2500, + position: 3500, }, { incidentClass: CSSEffect, @@ -124,7 +124,7 @@ export const productInfoCombo = (selector) => duration: 100, }, - position: 2500, + position: 3500, }, { incidentClass: CSSEffect, @@ -141,12 +141,12 @@ export const productInfoCombo = (selector) => duration: 100, }, - position: 2500, + position: 3500, }, ], }, { selector,//product-info - delay: "@expression(index *3000)", + delay: "@expression(index *4000)", } ); \ No newline at end of file diff --git a/clip/initParams.ts b/clip/initParams.ts index 3a2af8e..0f37642 100644 --- a/clip/initParams.ts +++ b/clip/initParams.ts @@ -7,7 +7,6 @@ export default [ secondaryColor:"#171717", fontColor:"#1B1B1B", title:"Fashion Fusion: A Blend of Style and Comfort", - subtitle:"A Blend of Style & Comfort. Upgrade your wardrobe with our new clothing line, combining fashion and function for the ultimate comfort and style.", image1:"https://donkeyclip.github.io/sportswear-clip/server/assets/image1.jpg", products: [ { @@ -18,6 +17,7 @@ export default [ "Take a Step in the Right Direction. Walk in style with our latest collection of fashionable shoes, designed to keep you ahead of the fashion curve.", variants: ["127, 190, 170","204, 125, 53", "233, 229, 223"], price: "159€", + url:"https://donkeyclip.com/" }, { image: @@ -27,6 +27,7 @@ export default [ "This shoe is a classic with a runway inspired look. It has been designed by one of our most famous designers and brings back the shape that defined the era. ", variants: ["235, 100, 52","52, 235, 174", "52, 131, 235"], price: "95€", + url:"https://donkeyclip.com/" }, { image: @@ -36,6 +37,7 @@ export default [ "A modern classic: Our stylish shoe that has been a bestseller for years is now back in a new version with an updated material mix and a current design language.", variants: ["21,54,69","87,127,146", "228,109,7"], price: "86€", + url:"https://donkeyclip.com/" }, ], }, diff --git a/clip/initParamsValidationRules.ts b/clip/initParamsValidationRules.ts index 0fc64a0..bedd8a8 100644 --- a/clip/initParamsValidationRules.ts +++ b/clip/initParamsValidationRules.ts @@ -16,6 +16,7 @@ export default { }, }, price: { type: "string" }, + url: { type: "string" }, }, }, },