Patrik Janosdeak
3 years ago
parent
c8586ab99a
commit
e5a6e291bc
Binary file not shown.
|
After Width: | Height: | Size: 1011 KiB |
@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cs">
|
||||||
|
<head>
|
||||||
|
<title>Video example</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="style.scss">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<article class="jackpot"></article>
|
||||||
|
|
||||||
|
<div class="blue"></div>
|
||||||
|
|
||||||
|
<div class="dealer-wrapper">
|
||||||
|
<div class="dealer" contenteditable="true">
|
||||||
|
<article class="dealer-name"></article>
|
||||||
|
<article class="dealer-address"></article>
|
||||||
|
<article class="dealer-city"></article>
|
||||||
|
<article class="dealer-phone"></article>
|
||||||
|
<article class="dealer-url"></article>
|
||||||
|
<article class="dealer-logo"></article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="https://cdn.nebe.app/store/utils/dist/gsap/3.3.3/gsap.min.js"></script>
|
||||||
|
<script src="https://cdn.nebe.app/store/utils/dist/gsap/3.3.3/GSDevTools.min.js"></script>
|
||||||
|
<script src="https://cdn.nebe.app/store/utils/dist/gsap/3.3.3/SplitText.min.js"></script>
|
||||||
|
<script src="https://cdn.nebe.app/store/utils/dist/video-helper.min.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
import audioFile from './audio.mp3';
|
||||||
|
import videoFile from './video.mp4';
|
||||||
|
|
||||||
|
window.RENDER = {
|
||||||
|
duration: 21.42,
|
||||||
|
audio_layers: [
|
||||||
|
{ start: 0, file: audioFile.toString() }
|
||||||
|
],
|
||||||
|
video_layers: [
|
||||||
|
{ start: 0, file: videoFile.toString() }
|
||||||
|
],
|
||||||
|
render_parts: [
|
||||||
|
{ start: 4.5, end: 6.25 }, // Jackpot animation
|
||||||
|
{ start: 17.5, end: 20.5 }, // Dealer animation
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
window.FILL = async (inputs) => {
|
||||||
|
// Fill jackpot
|
||||||
|
|
||||||
|
const jackpotRaw = String(inputs.jackpot);
|
||||||
|
const jackpotDigits = jackpotRaw.replace(/\D+/g, '');
|
||||||
|
const jackpotPadded = '00000000' + jackpotDigits;
|
||||||
|
const jackpot = jackpotPadded.substr(jackpotPadded.length - 8);
|
||||||
|
|
||||||
|
let jackpotHTML = '';
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
jackpotHTML += `<div class="digit digit${i}">${jackpot[i]}</div>`;
|
||||||
|
}
|
||||||
|
const jackpotEl = document.querySelector('article.jackpot');
|
||||||
|
jackpotEl.innerHTML = jackpotHTML;
|
||||||
|
|
||||||
|
// Fill dealer info
|
||||||
|
|
||||||
|
const nameEl = document.querySelector('.dealer-name');
|
||||||
|
nameEl.innerHTML = `${inputs.name||''}`;
|
||||||
|
|
||||||
|
const addressEl = document.querySelector('.dealer-address');
|
||||||
|
addressEl.innerHTML = `${inputs.address||''}`;
|
||||||
|
|
||||||
|
const cityEl = document.querySelector('.dealer-city');
|
||||||
|
cityEl.innerHTML = `${inputs.postal_code||''} ${inputs.city||''}`;
|
||||||
|
|
||||||
|
const phoneEl = document.querySelector('.dealer-phone');
|
||||||
|
phoneEl.innerHTML = `${inputs.phone||''}`;
|
||||||
|
|
||||||
|
const urlEl = document.querySelector('.dealer-url');
|
||||||
|
urlEl.innerHTML = `${inputs.url||''}`;
|
||||||
|
|
||||||
|
const logoEl = document.querySelector('.dealer-logo');
|
||||||
|
logoEl.innerHTML = `<img src="${inputs.logo_horizontal||inputs.logo_vertical||''}" alt="">`;
|
||||||
|
|
||||||
|
// Jackpot animation
|
||||||
|
|
||||||
|
const digitClasses = ['.digit6', '.digit2', '.digit3', '.digit7', '.digit1', '.digit5', '.digit0', '.digit4'];
|
||||||
|
const digitEls = digitClasses.map((className) => {
|
||||||
|
return document.querySelector(className);
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(digitEls);
|
||||||
|
console.log(jackpotEl);
|
||||||
|
|
||||||
|
window.TIMELINE
|
||||||
|
.fromTo(jackpotEl, 2, {scale: 1.05}, {scale: 1}, 4.5)
|
||||||
|
.staggerFromTo(digitEls, .2, {opacity: 0}, {opacity: 1}, 0.1, 4.73)
|
||||||
|
.set(digitEls, {opacity: 0}, 6.24);
|
||||||
|
|
||||||
|
// Dealer info animations
|
||||||
|
|
||||||
|
function shuffle(a) {
|
||||||
|
for (let i = a.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[a[i], a[j]] = [a[j], a[i]];
|
||||||
|
}
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nameSplitText = new SplitText([nameEl, addressEl, cityEl, phoneEl, urlEl], {type: 'chars'});
|
||||||
|
const shuffledChars = shuffle(nameSplitText.chars);
|
||||||
|
|
||||||
|
console.log(shuffledChars);
|
||||||
|
console.log(logoEl);
|
||||||
|
|
||||||
|
const blueEl = document.querySelector('.blue');
|
||||||
|
console.log(blueEl);
|
||||||
|
|
||||||
|
window.TIMELINE
|
||||||
|
.set(nameSplitText.chars, {opacity: 0}, 0)
|
||||||
|
.set(logoEl, {opacity: 0}, 0)
|
||||||
|
.fromTo(blueEl, 0.11, {opacity: 0}, {opacity: 1}, 17.54)
|
||||||
|
.staggerFromTo(shuffledChars, .2, {opacity: 0, scale: 1.2, y: 10}, {opacity: 1, scale: 1, y: 0}, 0.01, 17.6)
|
||||||
|
.fromTo(logoEl, .2, {opacity: 0}, {opacity: 1}, 18)
|
||||||
|
.staggerTo(shuffledChars, .2, {opacity: 0, scale: 0.8, y: -10}, 0.01, 19.5)
|
||||||
|
.to(logoEl, .2, {opacity: 0}, 19.5)
|
||||||
|
.to(blueEl, 0.05, {opacity: 0}, 20.44);
|
||||||
|
};
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
$width: 1920px;
|
||||||
|
$height: 1080px;
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Calling Code";
|
||||||
|
font-weight: 700;
|
||||||
|
src: url('../assets/callingcode-bold.otf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Calling Code";
|
||||||
|
font-weight: 400;
|
||||||
|
src: url('../assets/callingcode-regular.otf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: DINPro;
|
||||||
|
font-weight: 900;
|
||||||
|
src: url('../assets/DINPro-Black.otf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: DINPro;
|
||||||
|
font-weight: 700;
|
||||||
|
src: url('../assets/DINPro-Bold.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: DINPro;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url('../assets/DINPro-Regular.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: DINPro;
|
||||||
|
font-weight: 300;
|
||||||
|
src: url('../assets/DINPro-Light.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 0 0 100px 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: DINPro, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
overflow: hidden;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jackpot, .jackpot div, .blue, .dealer, .dealer article, .dealer img {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jackpot {
|
||||||
|
position: absolute;
|
||||||
|
top: 550px;
|
||||||
|
left: 825px;
|
||||||
|
height: 55px;
|
||||||
|
//outline: 1px solid red;
|
||||||
|
width: 435px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
div {
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 61px;
|
||||||
|
line-height: 75px;
|
||||||
|
width: 42.5px;
|
||||||
|
margin: 0 5px 0 5px;
|
||||||
|
font-weight: 900;
|
||||||
|
background: #6CE9B0;
|
||||||
|
color: #000;
|
||||||
|
opacity: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
background: url("blue.jpg");
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dealer-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 200px;
|
||||||
|
width: $width;
|
||||||
|
text-align: center;
|
||||||
|
height: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dealer {
|
||||||
|
//outline: 1px solid red;
|
||||||
|
padding-left: 100px;
|
||||||
|
padding-right: 100px;
|
||||||
|
width: auto;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 90px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #7E2ECB;
|
||||||
|
font-family: "Calling Code", sans-serif;
|
||||||
|
|
||||||
|
article {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: left center;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
@ -1,2 +1,34 @@
|
|||||||
# video
|
# Ukázková šablona pro video kreativy
|
||||||
|
|
||||||
|
Ffmpeg helpers:
|
||||||
|
|
||||||
|
```
|
||||||
|
Install ffmpeg
|
||||||
|
brew install ffmpeg
|
||||||
|
|
||||||
|
Get info
|
||||||
|
ffprobe video.mp4
|
||||||
|
|
||||||
|
Get length of video
|
||||||
|
ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 video.mp4
|
||||||
|
|
||||||
|
Convert from mov to mp4
|
||||||
|
ffmpeg -i input.mov output.mp4
|
||||||
|
|
||||||
|
Convert to webm format
|
||||||
|
ffmpeg -i input.mov -f webm -c:v libvpx -b:v 2M -acodec libvorbis -auto-alt-ref 0 out3.webm -hide_banner
|
||||||
|
ffmpeg -i input.mov -c:v libvpx-vp9 -b:v 2M -pix_fmt yuva420p out4.webm
|
||||||
|
|
||||||
|
Extract part of video
|
||||||
|
ffmpeg -ss 53.8 -i video.mp4 -t 21.122667 -c copy output.mp4
|
||||||
|
|
||||||
|
Extract audio from video
|
||||||
|
ffmpeg -i video.mp4 -vn audio.mp3
|
||||||
|
ffmpeg -i video.mp4 -vn -acodec copy audio.mp3
|
||||||
|
|
||||||
|
Extract video without audio
|
||||||
|
ffmpeg -i video.mp4 -c copy -an video-noaudio.mp4
|
||||||
|
|
||||||
|
Volume up audio
|
||||||
|
ffmpeg -y -i jingle.wav -filter_complex "[0:0]volume=2.0[out]" -map "[out]" jingle20.wav
|
||||||
|
```
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"name": "Demo Video",
|
||||||
|
"description": "Nastavitelný jackpot a adresa",
|
||||||
|
"tags": [
|
||||||
|
"Template",
|
||||||
|
"Demo"
|
||||||
|
],
|
||||||
|
"format": "video"
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"jackpot": {
|
||||||
|
"label": "Ukázkový jackpot",
|
||||||
|
"value": "96457823"
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"label": "Název pobočky",
|
||||||
|
"value": "Mánes a syn"
|
||||||
|
},
|
||||||
|
"address": {
|
||||||
|
"label": "Adresa",
|
||||||
|
"value": "Mánesova 625"
|
||||||
|
},
|
||||||
|
"postal_code": {
|
||||||
|
"label": "PSČ",
|
||||||
|
"value": "123 45"
|
||||||
|
},
|
||||||
|
"city": {
|
||||||
|
"label": "Město",
|
||||||
|
"value": "Benešov"
|
||||||
|
},
|
||||||
|
"phone": {
|
||||||
|
"label": "Telefon",
|
||||||
|
"value": "Tel.: 789 456 123"
|
||||||
|
},
|
||||||
|
"url": {
|
||||||
|
"label": "Webová adresa",
|
||||||
|
"value": "www.manes-a-syn.cz",
|
||||||
|
"type": "url"
|
||||||
|
},
|
||||||
|
"logo_horizontal": {
|
||||||
|
"label": "Horizontální logo",
|
||||||
|
"value": "https://cdn.nebe.app/demo/products/cross.svg",
|
||||||
|
"type": "image"
|
||||||
|
},
|
||||||
|
"logo_vertical": {
|
||||||
|
"label": "Vertikální logo",
|
||||||
|
"value": "https://cdn.nebe.app/demo/products/cross.svg",
|
||||||
|
"type": "image"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue