Skip to content

Commit 1c8d103

Browse files
author
ivanvl01
committed
feat: add venue
1 parent 22b737b commit 1c8d103

File tree

14 files changed

+262
-73
lines changed

14 files changed

+262
-73
lines changed

‎clip/clip.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
<div class="scene-5 scene"></div>
77
<div class="scene-6 scene"></div>
88
<div class="scene-7 scene"></div>
9+
<div class="scene-8 scene"></div>
910
</div>

‎clip/clip.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import scene4 from "./scenes/scene-4";
99
import scene5 from "./scenes/scene-5";
1010
import scene6 from "./scenes/scene-6";
1111
import scene7 from "./scenes/scene-7";
12+
import scene8 from "./scenes/scene-8";
1213
import initParamsValidationRules from "./initParamsValidationRules";
1314
import { Opacity, Scale, Top } from "./library/incidents";
1415

@@ -37,5 +38,6 @@ clip.addIncident(scene4, 0);
3738
clip.addIncident(scene5, 0);
3839
clip.addIncident(scene6, 0);
3940
clip.addIncident(scene7, 0);
41+
clip.addIncident(scene8, 0);
4042
clip.addIncident(Opacity(1, ".scene", 300), 1);
4143
clip.addIncident(Scale(1, ".scene-1", 300), 1);

‎clip/initParams.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ export default [
66
color: "#0000ff",
77
title: "Tech Thess",
88
subTitle: "Greece, Thessaloniki Sep 20 - 21 Sep 2022",
9+
venue: {
10+
img: "https://i.ibb.co/NWmRfGD/venue.jpg",
11+
address: "Martiou 25 & Paralia",
12+
building: "Thessaloniki Concert Hall M2",
13+
hall: "Emilios Riadis Hall",
14+
},
915
sponsors: [
1016
"https://i.ibb.co/Xj04CGH/git.png",
1117
"https://i.ibb.co/M7fvWY1/intel.png",

‎clip/initParamsValidationRules.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,15 @@ export default {
2626
type: "string",
2727
},
2828
},
29+
venue: {
30+
type: "object",
31+
props: {
32+
img: "string",
33+
address: "string",
34+
building: "string",
35+
hall: "string",
36+
},
37+
},
2938
speekers: {
3039
label: "Speekers",
3140
type: "array",

‎clip/scenes/scene-2/index.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,9 @@ clip.addIncident(
2626
1800
2727
);
2828
clip.addIncident(Top("-100%", ".root", 1500, "easeInOutCubic"), 5000);
29-
clip.addIncident(
30-
Opacity(0, ".sponsor-title,.logo", 1, "@stagger(0, 1000)"),
31-
6500
32-
);
29+
clip.addIncident(Opacity(0, ".sponsor-title,.logo", 1, "@stagger(0, 1)"), 6500);
3330
clip.addIncident(Top("95%", ".sponsor-wrapper", 1), 6501);
3431

35-
clip.addIncident(Opacity(1, ".logo", 800, "@stagger(0, 1000)"), 14000);
32+
clip.addIncident(Opacity(1, ".logo", 800, "@stagger(0, 1000)"), 20000);
3633

3734
export default clip;

‎clip/scenes/scene-7/index.css‎

Lines changed: 63 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
* {
22
--color: {{ initParams.color }};
3+
--venue-image: url({{initParams.venue.img}})
34
/*
45
This is an example of how to use MotorCortex's init params in css, using a css variable
56
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
@@ -14,42 +15,80 @@
1415
height: 100%;
1516
width: 100%;
1617
position: absolute;
18+
font-size: 60px;
19+
font-weight: 900;
1720
}
1821

19-
.text{
20-
font-size: 100px;
21-
font-weight: 900;
22-
position: absolute;
23-
text-transform: uppercase;
24-
top: 100%;
22+
.venue-image-wrapper{
23+
position: absolute;
24+
width: 850px;
25+
height: 850px;
26+
filter: drop-shadow(1px 0 15px #00000031);
27+
background-color: var(--color);
28+
border-radius: 100%;
29+
overflow: hidden;
30+
left:-860px
2531
}
2632

27-
.text-wrapper{
28-
overflow: hidden;
29-
position: absolute;
30-
top: 40%;
31-
width: 1184px;
32-
height: 100px;
33+
.venue-image{
34+
width: 850px;
35+
height: 850px;
36+
background: var(--venue-image);
37+
border-radius: 100%;
38+
background-repeat: no-repeat;
39+
background-size: cover;
3340
}
3441

35-
.date-title,.link{
36-
font-size: 40px;
37-
font-weight: 700;
42+
43+
.hall-wrapper{
44+
font-weight: 300;
45+
font-size: 44px;
46+
}
47+
48+
.hall-wrapper,.building-wrapper{
3849
position: relative;
50+
right: -100%;
51+
}
52+
53+
.address-wrapper{
54+
background: var(--color);
55+
color: #fff;
56+
font-size: 40px;
57+
left: 200px;
58+
padding: 40px;
59+
position: absolute;
60+
width: 300px;
3961
top: -100%;
40-
opacity: 0;
62+
display: flex;
63+
justify-content: space-between;
64+
align-items: center;
65+
gap: 20px;
4166
}
4267

43-
.date-title-wrapper{
68+
.text-wrapper{
69+
left: 500px;
70+
position: absolute;
71+
top: 45%;
72+
width: 440px;
4473
overflow: hidden;
74+
}
75+
76+
.cercle{
77+
border-radius: 50%;
4578
position: absolute;
46-
top: 75%;
4779
}
4880

49-
.link{
50-
top: 32%;
51-
font-weight: 100;
52-
opacity: 0;
53-
color: black;
54-
text-decoration: none;
81+
.cercle-1{
82+
border: 75px solid var(--color);
83+
width: 84px;
84+
height: 84px;
85+
left:-860px;
86+
top: 100px;
87+
}
88+
.cercle-2{
89+
border: 75px solid var(--color);
90+
width: 384px;
91+
height: 384px;
92+
left:-860px;
93+
top: 870px;
5594
}

‎clip/scenes/scene-7/index.html‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,34 @@
11
<div class="root">
2-
<div class="text-wrapper">
3-
<div class="text">Thanks our Sponsors</div>
2+
<div class="cercle-1 cercle"></div>
3+
<div class="cercle-2 cercle"></div>
4+
<div class="venue-image-wrapper">
5+
<div class="venue-image"></div>
46
</div>
5-
<div class="date-title-wrapper">
6-
<div class="date-title">
7-
{{initParams.subTitle}}
7+
<div class="text-wrapper">
8+
<div class="building-wrapper">
9+
{{initParams.venue.building}}
810
</div>
11+
<div class="hall-wrapper">
12+
{{initParams.venue.hall}}
13+
</div>
14+
</div>
15+
16+
<div class="address-wrapper">
17+
18+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150"
19+
height="100" viewBox="0 0 256 256" xml:space="preserve">
20+
21+
<defs>
22+
</defs>
23+
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
24+
transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
25+
<path
26+
d="M 45 0 C 25.463 0 9.625 15.838 9.625 35.375 c 0 8.722 3.171 16.693 8.404 22.861 L 45 90 l 26.97 -31.765 c 5.233 -6.167 8.404 -14.139 8.404 -22.861 C 80.375 15.838 64.537 0 45 0 z M 45 48.705 c -8.035 0 -14.548 -6.513 -14.548 -14.548 c 0 -8.035 6.513 -14.548 14.548 -14.548 s 14.548 6.513 14.548 14.548 C 59.548 42.192 53.035 48.705 45 48.705 z"
27+
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255, 255, 255); fill-rule: nonzero; opacity: 1;"
28+
transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
29+
</g>
30+
</svg>
31+
<div> {{initParams.venue.address}}</div>
932
</div>
10-
<a class="link" href="{{initParams.eventLink}}">{{initParams.eventLink}}</a>
1133

1234
</div>

‎clip/scenes/scene-7/index.js‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import { HTMLClip } from "@donkeyclip/motorcortex";
22
import html from "./index.html";
33
import css from "./index.css";
4-
import { Opacity, Scale, Size, Top, Width } from "../../library/incidents";
4+
import {
5+
Opacity,
6+
Scale,
7+
Size,
8+
Top,
9+
Width,
10+
Left,
11+
Right,
12+
} from "../../library/incidents";
513

614
const clip = new HTMLClip({
715
html,
@@ -13,12 +21,37 @@ const clip = new HTMLClip({
1321
},
1422
initParams: {
1523
color: "@initParams.color",
16-
subTitle: "@initParams.subTitle",
17-
eventLink: "@initParams.eventLink",
24+
venue: "@initParams.venue",
1825
},
1926
});
2027

21-
clip.addIncident(Top("0%", ".text", 1500, "easeInOutCubic"), 13700);
22-
clip.addIncident(Opacity(1, ".date-title,.link", 800), 13700);
28+
clip.addIncident(
29+
Left("1000px", ".venue-image-wrapper", 1700, "easeInOutCubic"),
30+
13100
31+
);
32+
clip.addIncident(Left("1560px", ".cercle-1", 1700, "easeInOutCubic"), 13000);
33+
clip.addIncident(Left("250px", ".cercle-2", 1700, "easeInOutCubic"), 13000);
34+
35+
clip.addIncident(
36+
Right("0%", ".hall-wrapper,.building-wrapper", 1500, "easeInOutCubic"),
37+
14200
38+
);
39+
clip.addIncident(Top("0%", ".address-wrapper", 1500, "easeInOutCubic"), 14300);
40+
41+
clip.addIncident(
42+
Top(
43+
"130%",
44+
".cercle-2,.text-wrapper,.venue-image-wrapper,.cercle-1",
45+
1000,
46+
"easeInOutCubic",
47+
"@stagger(0, 200)"
48+
),
49+
18000
50+
);
51+
52+
clip.addIncident(
53+
Top("-100%", ".address-wrapper", 1000, "easeInOutCubic"),
54+
18300
55+
);
2356

2457
export default clip;

‎clip/scenes/scene-8/index.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
* {
2+
--color: {{ initParams.color }};
3+
/*
4+
This is an example of how to use MotorCortex's init params in css, using a css variable
5+
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
6+
*/
7+
}
8+
9+
.root {
10+
display: flex;
11+
justify-content: center;
12+
flex-direction: column;
13+
align-items: center;
14+
height: 100%;
15+
width: 100%;
16+
position: absolute;
17+
}
18+
19+
.text{
20+
font-size: 100px;
21+
font-weight: 900;
22+
position: absolute;
23+
text-transform: uppercase;
24+
top: 100%;
25+
}
26+
27+
.text-wrapper{
28+
overflow: hidden;
29+
position: absolute;
30+
top: 40%;
31+
width: 1184px;
32+
height: 100px;
33+
}
34+
35+
.date-title,.link{
36+
font-size: 40px;
37+
font-weight: 700;
38+
position: relative;
39+
top: -100%;
40+
opacity: 0;
41+
}
42+
43+
.date-title-wrapper{
44+
overflow: hidden;
45+
position: absolute;
46+
top: 75%;
47+
}
48+
49+
.link{
50+
top: 32%;
51+
font-weight: 100;
52+
opacity: 0;
53+
color: black;
54+
text-decoration: none;
55+
}

‎clip/scenes/scene-8/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="root">
2+
<div class="text-wrapper">
3+
<div class="text">Thanks our Sponsors</div>
4+
</div>
5+
<div class="date-title-wrapper">
6+
<div class="date-title">
7+
{{initParams.subTitle}}
8+
</div>
9+
</div>
10+
<a class="link" href="{{initParams.eventLink}}">{{initParams.eventLink}}</a>
11+
12+
</div>

0 commit comments

Comments
 (0)