diff --git a/clip/clip.css b/clip/clip.css index 3afe663..c4e932c 100644 --- a/clip/clip.css +++ b/clip/clip.css @@ -2,6 +2,10 @@ --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 @@ -9,19 +13,67 @@ } .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); +} \ No newline at end of file diff --git a/clip/clip.html b/clip/clip.html index 0b0aaf9..b9251f0 100644 --- a/clip/clip.html +++ b/clip/clip.html @@ -1,4 +1,23 @@ -
-
+ +
+
+
{{item}}
+
+
+
{{item}}
+
+ +
-
\ No newline at end of file +
+
'Εως
+
{{initParams.offer}}
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/clip/clip.ts b/clip/clip.ts index 66d69eb..3e8abb3 100644 --- a/clip/clip.ts +++ b/clip/clip.ts @@ -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, @@ -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 }; diff --git a/clip/effects/fadeOut.ts b/clip/effects/fadeOut.ts deleted file mode 100644 index e0ec341..0000000 --- a/clip/effects/fadeOut.ts +++ /dev/null @@ -1,14 +0,0 @@ -//Here we export the incident, you can use it only one time - -import { CSSEffect } from "@donkeyclip/motorcortex"; -export const fadeOut = new CSSEffect( - { - animatedAttrs: { - opacity: 0, - }, - }, - { - selector: ".container", - duration: 2000, - } -); diff --git a/clip/effects/incidents.ts b/clip/effects/incidents.ts new file mode 100644 index 0000000..4b9fa49 --- /dev/null +++ b/clip/effects/incidents.ts @@ -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, + } + ); diff --git a/clip/effects/scaleBig.ts b/clip/effects/scaleBig.ts deleted file mode 100644 index dcb31e3..0000000 --- a/clip/effects/scaleBig.ts +++ /dev/null @@ -1,21 +0,0 @@ -//This incident is export as function so you can use it more than one times - -import { CSSEffect } from "@donkeyclip/motorcortex"; -export const scaleBig = (selector, duration, easing = "linear") => - new CSSEffect( - { - animatedAttrs: { - transform: { - scale: 1.8, - }, - }, - initialValues: { - opacity: 0, - }, - }, - { - selector, - duration, - easing, - } - ); diff --git a/clip/initParams.ts b/clip/initParams.ts index b29114f..230f9f2 100644 --- a/clip/initParams.ts +++ b/clip/initParams.ts @@ -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: "εβδομάδας", }, }, ]; diff --git a/clip/initParamsValidationRules.ts b/clip/initParamsValidationRules.ts index 0518e86..30ecae2 100644 --- a/clip/initParamsValidationRules.ts +++ b/clip/initParamsValidationRules.ts @@ -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", @@ -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" }, + }, + }, }, }; diff --git a/package-lock.json b/package-lock.json index 543fd89..99330b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "@donkeyclip/motorcortex-clip-starter", "version": "1.0.0", + "dependencies": { + "@donkeyclip/motorcortex-anime": "^3.1.1" + }, "devDependencies": { "@babel/core": "^7.20.12", "@babel/eslint-parser": "7.19.1", @@ -1724,12 +1727,25 @@ "version": "9.5.6", "resolved": "https://registry.npmjs.org/@donkeyclip/motorcortex/-/motorcortex-9.5.6.tgz", "integrity": "sha512-qI5sdyKZA67nRe9m+C3KZ/YgIGDLCQV6uWPfyyD/XXFT3YQIJfWu6/AVzdnOld04etsVkCW89QhA41KyBcgZsw==", - "dev": true, "dependencies": { "expr-eval": "2.0.2", "fastest-validator": "^1.16.0" } }, + "node_modules/@donkeyclip/motorcortex-anime": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@donkeyclip/motorcortex-anime/-/motorcortex-anime-3.1.1.tgz", + "integrity": "sha512-5hFTE+NEp0A3yklHSNT/eYPl+mkNxJ2S2ec+Ag46+9VNPAAPYxG+1tCWHV2yfy24veGH81oNOLwEKlJXjG8CpQ==", + "dependencies": { + "mc-animejs-core": "3.1.5" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "@donkeyclip/motorcortex": ">=8 < 10" + } + }, "node_modules/@donkeyclip/motorcortex-player": { "version": "2.10.7", "resolved": "https://registry.npmjs.org/@donkeyclip/motorcortex-player/-/motorcortex-player-2.10.7.tgz", @@ -5073,8 +5089,7 @@ "node_modules/expr-eval": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/expr-eval/-/expr-eval-2.0.2.tgz", - "integrity": "sha512-4EMSHGOPSwAfBiibw3ndnP0AvjDWLsMvGOvWEZ2F96IGk0bIVdjQisOHxReSkE13mHcfbuCiXw+G4y0zv6N8Eg==", - "dev": true + "integrity": "sha512-4EMSHGOPSwAfBiibw3ndnP0AvjDWLsMvGOvWEZ2F96IGk0bIVdjQisOHxReSkE13mHcfbuCiXw+G4y0zv6N8Eg==" }, "node_modules/express": { "version": "4.17.3", @@ -5219,8 +5234,7 @@ "node_modules/fastest-validator": { "version": "1.16.0", "resolved": "https://registry.npmjs.org/fastest-validator/-/fastest-validator-1.16.0.tgz", - "integrity": "sha512-+C1cFoLboOZIZs2PWhceNtJ15zCoiRalu1LnJB4hy63Y8Tto9bkqGcTGkzegt+Xu4qy3LE9GL6CLzEdpZ5xJBQ==", - "dev": true + "integrity": "sha512-+C1cFoLboOZIZs2PWhceNtJ15zCoiRalu1LnJB4hy63Y8Tto9bkqGcTGkzegt+Xu4qy3LE9GL6CLzEdpZ5xJBQ==" }, "node_modules/fastq": { "version": "1.13.0", @@ -6671,6 +6685,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/mc-animejs-core": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/mc-animejs-core/-/mc-animejs-core-3.1.5.tgz", + "integrity": "sha512-/EbRoW4CM2SZqpeFkEIMfxCBUmgcAnqTFTXIypVRASZb66sHmACtx1I7Wo6926O8RInj7wpvFc7Q6PeLJwe8ow==" + }, "node_modules/mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", diff --git a/package.json b/package.json index cec2f03..0ac0e63 100644 --- a/package.json +++ b/package.json @@ -56,5 +56,8 @@ "webpack": "5.75.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "4.11.1" + }, + "dependencies": { + "@donkeyclip/motorcortex-anime": "^3.1.1" } }