fix: add outro slide and fix title at the first one

donkeyclip · Apr 3, 2023 · 5408c93 · 5408c93
1 parent 95a55dd
commit 5408c93
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 63 deletions.
diff --git 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);
-}
+}
+
+.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
@@ -7,10 +7,7 @@
     </div>
 
     <div class="description-container">
-      <div class="description-content">
         <div class="description-title">{{initParams.title}}</div>
-        <div class="description-subtitle">{{initParams.subtitle}}</div>
-      </div>
     </div>
 
     <div class="images-container">
@@ -64,4 +61,17 @@
 
   </div>
 
+  <div class="outro">
+    <div class="product-image" mc-for="key,item" mc-of="initParams.products" style="background-image: url({{item.image}});
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;">
+     <div class="button-wrapper">
+      <a class="link-button tr-center" href={{item.url}} target="_blank">
+        View info
+      </a>
+    </div></div>
+  </div>
+
+
 </div>
diff --git 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
@@ -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)",
     }
   );
diff --git 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)",
     }
   );
diff --git 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)",
     }
   );
diff --git 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
@@ -16,6 +16,7 @@ export default {
           },
         },
         price: { type: "string" },
+        url: { type: "string" },
       },
     },
   },