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