Update bauchbinde by fl0rp
This commit is contained in:
parent
e66cb347aa
commit
172443a987
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -53,8 +53,6 @@
|
|||
|
||||
async function init() {
|
||||
const root = document.querySelector('html');
|
||||
textEl = document.querySelector('.text');
|
||||
textEl.innerHTML = '';
|
||||
|
||||
if (window.location.search) {
|
||||
const pairs = window.location.search.slice(1).split('&').map(x => x.split('='));
|
||||
|
|
@ -126,7 +124,7 @@
|
|||
} else {
|
||||
headline = talk.title;
|
||||
if (talk.persons) {
|
||||
speaker = talk.persons.map(person => person.public_name).join(' / ');
|
||||
speaker = talk.persons.map(person => person.public_name).join(', ');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -135,164 +133,28 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
if (speaker && headline) {
|
||||
headline += ',';
|
||||
}
|
||||
const headlineEl = document.querySelector('.headline');
|
||||
headlineEl.innerHTML = '';
|
||||
const speakerEl = document.querySelector('.speaker');
|
||||
speakerEl.innerHTML = '';
|
||||
|
||||
const headlineEl = document.createElement('span');
|
||||
headlineEl.classList.add('headline');
|
||||
const speakerEl = document.createElement('span');
|
||||
speakerEl.classList.add('speaker');
|
||||
console.log('headline', headline);
|
||||
console.log('speaker', speaker);
|
||||
|
||||
if (headline) {
|
||||
Array.from(headline).forEach(letter => {
|
||||
const letterEl = document.createElement('span');
|
||||
letterEl.classList.add('letter');
|
||||
letterEl.innerText = letter;
|
||||
headlineEl.appendChild(letterEl);
|
||||
})
|
||||
headlineEl .innerText = headline;
|
||||
}
|
||||
if (speaker) {
|
||||
Array.from(speaker).forEach(letter => {
|
||||
const letterEl = document.createElement('span');
|
||||
letterEl.classList.add('letter');
|
||||
letterEl.innerText = letter;
|
||||
speakerEl.appendChild(letterEl);
|
||||
})
|
||||
}
|
||||
|
||||
textEl.appendChild(headlineEl);
|
||||
textEl.appendChild(document.createTextNode(' '));
|
||||
textEl.appendChild(speakerEl);
|
||||
|
||||
const mainTilesEl = document.querySelector('.background .main-tiles');
|
||||
mainTilesEl.innerHTML = '';
|
||||
|
||||
for (let i = 0; i < 16; i++) {
|
||||
const tile = document.createElement('div');
|
||||
tile.classList.add('tile', 'large');
|
||||
mainTilesEl.appendChild(tile);
|
||||
}
|
||||
|
||||
const secondaryTilesEl = document.querySelector('.background .secondary-tiles');
|
||||
secondaryTilesEl.innerHTML = '';
|
||||
|
||||
for (let i = 0; i < 17; i++) {
|
||||
const tile = document.createElement('div');
|
||||
tile.classList.add('tile');
|
||||
if (i === 0 || Math.random() > 0.5) {
|
||||
tile.classList.add('medium');
|
||||
} else {
|
||||
tile.classList.add('small');
|
||||
}
|
||||
secondaryTilesEl.appendChild(tile);
|
||||
speakerEl.innerText = speaker;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
async function animate() {
|
||||
if (autoIntro ? isFirstRun : isIntro) {
|
||||
await Promise.all([
|
||||
slideIn(),
|
||||
fadeInText(),
|
||||
]);
|
||||
} else {
|
||||
await Promise.all([
|
||||
fadeIn(),
|
||||
fadeInText(),
|
||||
]);
|
||||
}
|
||||
document.querySelector('.container').classList.add('visible');
|
||||
await new Promise(r => setTimeout(r, holdDuration * 1000));
|
||||
await Promise.all([
|
||||
fadeOut(),
|
||||
fadeOutText(),
|
||||
])
|
||||
}
|
||||
|
||||
async function slideIn() {
|
||||
const tiles = document.querySelectorAll('.tile');
|
||||
|
||||
for (const tile of tiles) {
|
||||
tile.style.animationName = `slide-in-${Math.floor(Math.random() * 10)}`;
|
||||
tile.style.animationDelay = `${Math.random() * 0.4}s`;
|
||||
tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
|
||||
tile.style.animationIterationCount = '1';
|
||||
tile.style.animationTimingFunction = 'ease-in';
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 600));
|
||||
for (const tile of tiles) {
|
||||
tile.classList.add('visible');
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 1000));
|
||||
}
|
||||
|
||||
async function fadeIn() {
|
||||
const tiles = document.querySelectorAll('.tile');
|
||||
|
||||
for (const tile of tiles) {
|
||||
tile.style.animationName = `fade-in`;
|
||||
tile.style.animationDelay = `${Math.random() * 0.4}s`;
|
||||
tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
|
||||
tile.style.animationIterationCount = '1';
|
||||
tile.style.animationTimingFunction = 'ease-in';
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 600));
|
||||
for (const tile of tiles) {
|
||||
tile.classList.add('visible');
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 1000));
|
||||
}
|
||||
|
||||
async function fadeOut() {
|
||||
const tiles = document.querySelectorAll('.tile');
|
||||
|
||||
for (const tile of tiles) {
|
||||
tile.style.animationName = `fade-out`;
|
||||
tile.style.animationDelay = `${Math.random() * 0.4}s`;
|
||||
tile.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
|
||||
tile.style.animationIterationCount = '1';
|
||||
tile.style.animationTimingFunction = 'ease-in';
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 600));
|
||||
for (const tile of tiles) {
|
||||
tile.classList.remove('visible');
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 1000));
|
||||
}
|
||||
|
||||
async function fadeInText() {
|
||||
const letters = document.querySelectorAll('.letter');
|
||||
|
||||
for (const letter of letters) {
|
||||
letter.style.animationName = `fade-in`;
|
||||
letter.style.animationDelay = `${Math.random() * 0.4}s`;
|
||||
letter.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
|
||||
letter.style.animationIterationCount = 1;
|
||||
letter.style.animationTimingFunction = 'ease-in';
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 600));
|
||||
for (const tile of letters) {
|
||||
tile.classList.add('visible');
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 1000));
|
||||
}
|
||||
|
||||
async function fadeOutText() {
|
||||
const letters = document.querySelectorAll('.letter');
|
||||
|
||||
for (const letter of letters) {
|
||||
letter.style.animationName = `fade-out`;
|
||||
letter.style.animationDelay = `${Math.random() * 0.4}s`;
|
||||
letter.style.animationDuration = `${0.8 + Math.random() * 0.4}s`;
|
||||
letter.style.animationIterationCount = '1';
|
||||
letter.style.animationTimingFunction = 'ease-in';
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 600));
|
||||
for (const tile of letters) {
|
||||
tile.classList.remove('visible');
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 1000));
|
||||
document.querySelector('.container').classList.remove('visible');
|
||||
}
|
||||
|
||||
async function cycle() {
|
||||
|
|
|
|||
|
|
@ -1,239 +1,60 @@
|
|||
@font-face {
|
||||
font-family: Orbitron;
|
||||
src: url('Orbitron-VariableFont_wght.ttf');
|
||||
font-family: Changa;
|
||||
font-weight: 700;
|
||||
src: url('Changa-SemiBold.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: SpaceMono;
|
||||
src: url('SpaceMono-Regular.ttf');
|
||||
}
|
||||
|
||||
:root {
|
||||
--large-tile-color: #02fae0;
|
||||
--medium-tile-color: #fff900;
|
||||
--small-tile-color: #0bcb60;
|
||||
--text-color: #252826;
|
||||
--bottom: 9vw;
|
||||
--left: 12.5vw;
|
||||
--width: 67.5vw;
|
||||
--top: auto;
|
||||
}
|
||||
|
||||
:root.theme-main {
|
||||
--large-tile-color: #6800e7;
|
||||
--medium-tile-color: #fff;
|
||||
--small-tile-color: #05b9ec;
|
||||
--text-color: #fff;
|
||||
--header-text-color: #252826;
|
||||
--frame-color: #fff;
|
||||
--bottom: 7vw;
|
||||
--left: 25vw;
|
||||
--width: 50vw;
|
||||
--top: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #000;
|
||||
font-family: Orbitron, sans-serif;
|
||||
font-size: 2vw;
|
||||
line-height: 2vw;
|
||||
background-color: #444;
|
||||
font-family: SpaceMono, monospace;
|
||||
font-size: 1.7vw;
|
||||
color: var(--text-color);
|
||||
/*color: #0e1c23;*/
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1vw;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-weight: 900;
|
||||
text-transform: lowercase;
|
||||
font-family: Changa, sans-serif;
|
||||
font-weight: 700;
|
||||
background: var(--frame-color);
|
||||
color: var(--header-text-color);
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
padding: 0 1vw;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.speaker {
|
||||
font-size: 0.8em;
|
||||
padding: 0.5vw 1vw 0.7vw;
|
||||
}
|
||||
|
||||
.container {
|
||||
transition: opacity 0.3s ease 0s;
|
||||
position: fixed;
|
||||
bottom: var(--bottom);
|
||||
left: var(--left);
|
||||
width: var(--width);
|
||||
top: var(--top);
|
||||
}
|
||||
|
||||
.background {
|
||||
z-index: -20;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 6.25%;
|
||||
padding: 1vw 1.5vw;
|
||||
}
|
||||
|
||||
.tiles {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.main-tiles {
|
||||
margin-left: 6.25%;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.tile {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tile::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.tile.large::before {
|
||||
background-color: var(--large-tile-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 1px 0 0 0 var(--large-tile-color);
|
||||
}
|
||||
|
||||
.tile.medium::before {
|
||||
background-color: var(--medium-tile-color);
|
||||
width: 50%;
|
||||
padding-top: 50%;
|
||||
}
|
||||
|
||||
.tile.small::before {
|
||||
background-color: var(--small-tile-color);
|
||||
width: 35%;
|
||||
padding-top: 35%;
|
||||
}
|
||||
|
||||
.letter {
|
||||
border: 0.1vw solid var(--frame-color);
|
||||
opacity: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes slide-in-0 {
|
||||
0% {
|
||||
transform: translate(50vw, -100vw) scale(10);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-1 {
|
||||
0% {
|
||||
transform: translate(-40vw, -20vw) scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-2 {
|
||||
0% {
|
||||
transform: translate(50vw, 20vw) scale(5);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-3 {
|
||||
0% {
|
||||
transform: translate(80vw, -50vw) scale(3);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-4 {
|
||||
0% {
|
||||
transform: translate(-30vw, -50vw) scale(7.5);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-5 {
|
||||
0% {
|
||||
transform: translate(-30vw, 50vw) scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-6 {
|
||||
0% {
|
||||
transform: translate(5vw, 30vw) scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-7 {
|
||||
0% {
|
||||
transform: translate(-70vw, 100vw) scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-8 {
|
||||
0% {
|
||||
transform: translate(-4vw, 2vw) scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-9 {
|
||||
0% {
|
||||
transform: translate(2vw, -5vw) scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,17 +2,14 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Intro</title>
|
||||
<title>Bauchbinde</title>
|
||||
<link rel="stylesheet" href="./assets/style.css">
|
||||
<script src="./assets/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="text"></div>
|
||||
<div class="background">
|
||||
<div class="secondary-tiles tiles"></div>
|
||||
<div class="main-tiles tiles"></div>
|
||||
</div>
|
||||
<div class="headline"></div>
|
||||
<div class="speaker"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue