Skip to content

Commit

Permalink
finish clip
Browse files Browse the repository at this point in the history
  • Loading branch information
ivanvl01 committed Apr 18, 2023
1 parent f510236 commit ee59bdd
Show file tree
Hide file tree
Showing 10 changed files with 307 additions and 53 deletions.
56 changes: 54 additions & 2 deletions clip/clip.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,78 @@

--first-color: {{ initParams.colors[0] }};
--second-color: {{ initParams.colors[1] }};
--first-top: {{ initParams.firstImagePosition.top }}px;
--first-left: {{ initParams.firstImagePosition.left }}px;
--second-top: {{ initParams.secondImagePosition.top }}px;
--second-left: {{ initParams.secondImagePosition.left }}px;
/*
This is an example of how to use MotorCortex's init params in css, using a css variable
if you are unfamiliar with css variables here is a quick guide https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#basic_usage
*/
}

.container {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100%;
background: linear-gradient(121deg, var(--first-color), var(--second-color) );
font-family: 'Open Sans', sans-serif;
color: white;
}

.image-wrapper{
position: absolute;
width: 100%;
height: 100%;

}
.offer-wrapper{
align-items: baseline;
display: flex;
gap: 8px;
position: absolute;
right: 13px;
top: 109px;
}
.row-wrapper{
display: flex;
position: relative;
}
.row{
position: relative;
}

.offer{
font-weight: 900;
font-size: 40px;
}

.title-wrapper{
font-size: 27px;
position: absolute;
right: 13px;
top: 33px;
width: 138px;
}

.product-image{
width: 200px;
height: 200px;
width: 170px;
height: 170px;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

.product-image:nth-child(1){

top: var(--first-top);
left: var(--first-left);
}
.product-image:nth-child(2){

top: var(--second-top);
left: var(--second-left);
}
25 changes: 22 additions & 3 deletions clip/clip.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,23 @@
<div class="container">
<div class="product-image" mc-for="key,item" mc-of="initParams.images" style="background-image: url({{item}});">
<a class="container"
href="https://www.e-tennis.gr/tennis-shoes/tennis-shoe/nike/shopby/show_onsales_products-sales_products-model-zoom_lite.html">
<div class="title-wrapper">
<div class="row-wrapper first-row">
<div class="row" mc-for="key,item" mc-of="initParams.firstRow">{{item}} </div>
</div>
<div class="row-wrapper second-row">
<div class="row" mc-for="key,item" mc-of="initParams.secondRow">{{item}}</div>
</div>


</div>
</div>
<div class="offer-wrapper">
<div class="subtitle">'Εως</div>
<div class="offer">{{initParams.offer}}</div>
</div>

<div class="image-wrapper">
<div class="product-image image-1" style="background-image: url({{initParams.images[0]}});"></div>
<div class="product-image image-2" style="background-image: url({{initParams.images[1]}});"></div>
</div>

</a>
22 changes: 17 additions & 5 deletions clip/clip.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { HTMLClip } from "@donkeyclip/motorcortex";
import { HTMLClip, setCSSCore } from "@donkeyclip/motorcortex";
import css from "./clip.css";
import html from "./clip.html";
import { fadeOut } from "./effects/fadeOut";
import { scaleBig } from "./effects/scaleBig";
import AnimePluginDefinition from "@donkeyclip/motorcortex-anime";
setCSSCore(AnimePluginDefinition.CSSEffect);

import initParams from "./initParams";
import initParamsValidationRules from "./initParamsValidationRules";
import { Floating, FontSize, Top, Wave } from "./effects/incidents";

const clip = new HTMLClip({
html,
Expand All @@ -16,9 +18,19 @@ const clip = new HTMLClip({
width: "400px",
height: "170px",
},
fonts: [
{
type: `google-font`,
src: `https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;800&display=swap`,
},
],
});

clip.addIncident(fadeOut, 0);
clip.addIncident(scaleBig(".container", 2000), 0);
clip.addIncident(Wave(".first-row .row"), 0);
clip.addIncident(Wave(".second-row .row"), 0);
clip.addIncident(Floating(".image-1", 5), 0);
clip.addIncident(Floating(".image-2", -5), 0);
clip.addIncident(FontSize("45px", "40px", ".offer", 300, "linear"), 300);
clip.addIncident(FontSize("40px", "45px", ".offer", 300, "linear"), 600);

export { clip };
14 changes: 0 additions & 14 deletions clip/effects/fadeOut.ts

This file was deleted.

150 changes: 150 additions & 0 deletions clip/effects/incidents.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import { CSSEffect, Combo } from "@donkeyclip/motorcortex";

export const Top = (
value,
initialValue,
selector,
duration,
easing = "linear",
delay = 0
) =>
new CSSEffect(
{
animatedAttrs: {
top: value,
},
initialValues: {
top: initialValue,
},
},
{
selector,
duration,
easing,
delay,
}
);
export const FontSize = (
value,
initialValue,
selector,
duration,
easing = "linear",
delay = 0
) =>
new CSSEffect(
{
animatedAttrs: {
fontSize: value,
},
initialValues: {
fontSize: initialValue,
},
},
{
selector,
duration,
easing,
delay,
}
);

export const FontWeight = (value, selector, duration, easing = "linear") =>
new CSSEffect(
{
animatedAttrs: {
fontWeight: value,
},
},
{
selector,
duration,
easing,
}
);

export const Wave = (selector) =>
new Combo(
{
incidents: [
{
incidentClass: CSSEffect,
attrs: {
animatedAttrs: {
top: "-10px",
},
initialValues: {
top: "0px",
},
},
props: {
duration: 200,
},
position: 0,
},
{
incidentClass: CSSEffect,
attrs: {
animatedAttrs: {
top: "0px",
},
initialValues: {
top: "-10px",
},
},
props: {
duration: 150,
},
position: 200,
},
],
},
{
selector,
delay: "@stagger(0, 500,0,linear,omni)",
easing: "easeInOutCubic",
}
);

export const Floating = (selector, value) =>
new Combo(
{
incidents: [
{
incidentClass: CSSEffect,
attrs: {
animatedAttrs: {
transform: { translateY: value },
},
initialValues: {
transform: { translateY: "0px" },
},
},
props: {
duration: 1500,
},
position: 0,
},
{
incidentClass: CSSEffect,
attrs: {
animatedAttrs: {
transform: { translateY: "0px" },
},
initialValues: {
transform: { translateY: value },
},
},
props: {
duration: 1500,
},
position: 1500,
},
],
},
{
selector,
easing: "easeInOutCubic",
repeats: 3,
}
);
21 changes: 0 additions & 21 deletions clip/effects/scaleBig.ts

This file was deleted.

16 changes: 13 additions & 3 deletions clip/initParams.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,21 @@ export default [
name: "Blue medium",
value: {
colors: ["#fff", "#161616"],
Offer: "30,00$",
offer: "39.90€",
images: [
"https://www.e-tennis.gr/pub/media/catalog/product/cache/f5f3da80ad7b670245aea7e970662954/d/h/dh0626-010-phsrh000-1500.webp",
"https://www.e-tennis.gr/pub/media/catalog/product/cache/f5f3da80ad7b670245aea7e970662954/d/h/dh0626-100-phsrh000-1500.webp",
"https://donkeyclip.github.io/week-offer/server/white.png",
"https://donkeyclip.github.io/week-offer/server/black.png",
],
firstImagePosition: {
top: -19,
left: 53,
},
secondImagePosition: {
top: 28,
left: 0,
},
firstRow: "Προσφορά",
secondRow: "εβδομάδας",
},
},
];
24 changes: 24 additions & 0 deletions clip/initParamsValidationRules.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@ export default {
items: {
type: "color",
},
firstRow: {
label: "First Row",
type: "string",
},
secondRow: {
label: "Second Row",
type: "string",
},
offer: {
label: "Offer",
type: "string",
Expand All @@ -14,5 +22,21 @@ export default {
type: "array",
items: { type: "string" },
},
firstImagePosition: {
type: "object",
label: "First Image Position",
props: {
top: { type: "number" },
left: { type: "number" },
},
},
secondImagePosition: {
type: "object",
label: "Second Image Position",
props: {
top: { type: "number" },
left: { type: "number" },
},
},
},
};
Loading

0 comments on commit ee59bdd

Please sign in to comment.