Organisation, Prozesse, Change Management
Operatives Projektmanagement
Konzeptionelles Projektmanagement
Integrierte Managementsysteme
Schulungen, Coachings, Wissensmanagement
Konzepte für die Energiewende,Recherchen, Studien
Wirtschaftlichkeits-betrachtung,M&A-Unterstützung,Make or Buy
Digitalisierung
:root {
--grid-gap: 35px;
--background: white;
--foreground: white;
}
.icon-container-t {
position: relative;
background-color: var(--background);
display: grid;
margin: auto;
width: 35%;
aspect-ratio: 0.5;
grid-template: "icon-1 icon-2"
"icon-3 icon-4"
"icon-5 icon-6"
"icon-7 icon-8";
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: var(--grid-gap);
}
.animated-icon-t,
.animated-icon-t * {
transition: all 0.5s ease;
right: 0
}
.animated-icon-t {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
aspect-ratio: 1;
}
.animated-icon-t.r.passive {
transform: translateX(100%);
}
.animated-icon-t.l.passive {
transform: translateX(-100%);
}
.animated-icon-t.active {
transform: translateX(100%) translate(-8px, 8px);
}
.animated-icon-t.l * {
left: 0;
}
.animated-icon-t.l.active {
transform: translateX(-100%) translate(8px, 8px);
}
.animated-icon-t>.background {
background-color: var(--background);
position: absolute;
width: 100%;
height: 100%;
border: 2px solid #ddd;
}
.animated-icon-t.active>.background {
background-color: var(--foreground);
width: 300%;
border-color: var(--foreground);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.animated-icon-t>.border {
position: absolute;
z-index: -10;
background-color: var(--background);
width: 100%;
height: 100%;
border: 2px solid transparent;
}
.animated-icon-t.active>.border {
transform: translate(10px, -10px);
width: 300%;
border-image: 1;
border-image-source: linear-gradient(90deg, #b61620, #f33f3f);
}
.animated-icon-t.l.active>.border {
transform: translate(-10px, -10px);
border-image-source: linear-gradient(-90deg, #b61620, #f33f3f);
}
.animated-icon-t img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30%;
overflow: visible;
}
.animated-icon-t:not(.active) img {
filter: brightness(0%) invert(100%) brightness(86%);
}
.animated-icon-t span {
position: absolute;
padding: 0px;
top: 50%;
left: 40%;
width: 200%;
max-height: 100%;
transform: translateY(-50%);
opacity: 0;
--awb-text-font-family: "Inter";
--awb-text-font-style: bold;
--awb-text-font-weight: 500;
--awb-font-size: 12px;
text-align: center;
line-height: 1.5;
transition-duration: 0.25s;
pointer-events: none;
}
.animated-icon-t.r span {
left: -140%;
}
.animated-icon-t.active span {
opacity: 1;
left: 100%;
transition-duration: 0.5s;
}
.animated-icon-t.r.active span {
left: -200%;
}
.animated-icon-t::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 70%;
border: solid #ddd;
border-width: 0px 1px 0px 0px;
opacity: 0;
transition: all 0.5s ease;
}
.animated-icon-t.r::after {
border-width: 0px 0px 0px 1px;
}
.animated-icon-t.active::after {
opacity: 1;
}
function onLoadTablet() {
// Die Dauer zwischen den einzelnen Animationen in Millisekunden
const displayDur = 5000;
const icons = document.getElementsByClassName('animated-icon-t');
// Ein Zeitstempel um festzuhalten wann die Animation gestartet ist
let startTs = null;
// Ein Zeitstempel, der festhält wie lang die Animation schon lief,
// als sie pausiert wurde (z.B. wenn der Nutzer den Tab wechselt)
let elapsedWhenPaused = 0;
// Diese Funktion animiert eine der Reihen
// row: Wählt die Reihe aus
// index: Wählt das Icon in der Reihe aus, welches größer werden soll
const animateRow = function(row, index) {
// Setzt das ausgewählte Icon auf aktive
icons[2 * row + index].classList.add('active');
// Setzt das andere Icon auf passiv
icons[2 * row + (1 - index)].classList.add('passive');
};
// Resettet eine ganze Reihe in den Normalzustand
const resetRow = function(row) {
icons[2 * row].classList.remove('active');
icons[2 * row].classList.remove('passive');
icons[2 * row + 1].classList.remove('active');
icons[2 * row + 1].classList.remove('passive');
};
// Resettet alle Reihen
const resetAll = function() {
for (let i = 0; i < 4; i++)
resetRow(i);
};
// Diese Funktion wird in einer Schleife aufgerufen und
// kontrolliert die einzelnen Schritte der Animation
const step = function(ts) {
// Wenn der Browser nicht sichtbar ist, (z.B. minimiert)
// dann tue nichts, und gehe zum nächsten Animationsschritt
if (document.hidden)
return window.requestAnimationFrame(step);
if (startTs === null) startTs = ts;
// Speicher wie viel Zeit seit begin der Animation vergangen ist
const elapsed = ts - startTs;
// Zeige die jeweiligen Animationen nacheinander an
if (elapsed < displayDur) {
resetAll();
animateRow(0, 0);
animateRow(1, 1);
} else if (elapsed < 2 * displayDur) {
resetAll();
animateRow(0, 1);
animateRow(1, 0);
} else if (elapsed < 2 * displayDur + 500) {
resetAll();
} else if (elapsed < 3 * displayDur + 500) {
animateRow(2, 0);
animateRow(3, 1);
} else if (elapsed < 4 * displayDur + 500) {
resetAll();
animateRow(2, 1);
animateRow(3, 0);
} else if (elapsed 4 * displayDur + 1000) {
startTs = ts;
}
// Rufe den nächsten Animationsschritt auf
window.requestAnimationFrame(step);
}
// Starte die Animation
window.requestAnimationFrame(step);
// Wenn der Tab gewechselt wird, oder der Browser minimiert wird,
// speicher den aktuellen Stand der Animation und beginne von dort aus wieder,
// wenn der Tab wieder sichtbar wird
document.addEventListener('visibilitychange', event => {
if (document.hidden)
elapsedWhenPaused = document.timeline.currentTime - startTs;
else
startTs = document.timeline.currentTime - elapsedWhenPaused;
});
}
// Starte die gesammte Animation erst dann, wenn die Seite geladen ist
window.addEventListener('load', onLoadTablet);
Organisation, Prozesse, Change Management
Operatives Projektmanagement
Konzeptionelles Projektmanagement
Integrierte Managementsysteme
Schulungen, Coachings, Wissensmanagement
Konzepte für die Energiewende,Recherchen, Studien
Wirtschaftlichkeitsbetrachtung, M&A-Unterstützung,Make or Buy
Digitalisierung
DE 
EN