[37288f42] Docs: C-Level Presentation v2.3 - Fixed Layout Math, High-Resolution Headlines & Micro-Animations
This commit is contained in:
@@ -29,36 +29,37 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 1080p Precision Layout */
|
||||
/* 1080p Precision Layout - Enhanced Whitespace */
|
||||
.slide {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8%;
|
||||
padding: 0 10%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
display: grid;
|
||||
grid-template-cols: 35% 55%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10%;
|
||||
width: 100%;
|
||||
gap: 100px;
|
||||
}
|
||||
|
||||
.story-content {
|
||||
flex: 0 0 500px; /* Fixed width to prevent wrapping issues */
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.visual-area {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-end; /* Strictly Right Aligned */
|
||||
}
|
||||
|
||||
/* DGS Dashboard UI - 1:1 Replica */
|
||||
@@ -66,9 +67,10 @@
|
||||
background: white;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -76,8 +78,8 @@
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.badge-red { background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
|
||||
.badge-orange { background: #ffedd5; color: #c2410c; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
|
||||
.badge-red { background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; display: inline-block; }
|
||||
.badge-orange { background: #ffedd5; color: #c2410c; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; display: inline-block; }
|
||||
|
||||
.data-grid {
|
||||
display: grid;
|
||||
@@ -89,14 +91,14 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.data-cell { font-size: 11px; font-weight: 600; color: #334155; }
|
||||
.data-cell { font-size: 11px; font-weight: 600; color: #334155; opacity: 0; transform: translateY(10px); }
|
||||
.data-label { font-size: 9px; color: #94a3b8; font-weight: 700; margin-bottom: 4px; }
|
||||
|
||||
/* Scrollytelling Transitions */
|
||||
.visual-element {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transform: translateX(40px);
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -105,7 +107,7 @@
|
||||
|
||||
.visual-element.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translateX(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@@ -118,12 +120,13 @@
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
/* Fixed Opaque Header */
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 1.5rem 3rem;
|
||||
padding: 1.5rem 4rem;
|
||||
background: #ffffff;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
@@ -136,20 +139,25 @@
|
||||
.logo-img { width: 14rem; }
|
||||
|
||||
h2 {
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.1;
|
||||
font-size: 4.5rem;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 0.95;
|
||||
font-size: 6rem; /* Increased size */
|
||||
font-weight: 800;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.text-2xl { font-size: 1.5rem; color: #475569; font-weight: 400; }
|
||||
.text-2xl { font-size: 1.8rem; color: #475569; font-weight: 400; }
|
||||
.pre-headline { font-size: 1rem; letter-spacing: 0.3em; font-weight: 700; text-transform: uppercase; color: var(--robo-blue); margin-bottom: 1.5rem; display: block; }
|
||||
|
||||
.kpi-bar-bg { width: 100%; height: 12px; background: #f1f5f9; border-radius: 6px; overflow: hidden; margin: 10px 0; }
|
||||
.kpi-bar-fill { height: 100%; width: 0%; border-radius: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="progress-bar" id="progressBar" style="width: 0%;"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<img src="ROBOPLANET-Logo-2024_blue-black_4c.svg" alt="RoboPlanet Logo" class="logo-img">
|
||||
<div class="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Board Presentation | Executive Strategic Briefing</div>
|
||||
@@ -161,7 +169,7 @@
|
||||
<section class="slide" id="slide1">
|
||||
<div class="split-layout">
|
||||
<div class="story-content">
|
||||
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-6 block">Status Quo</span>
|
||||
<span class="pre-headline">Status Quo</span>
|
||||
<h2>Verteilte <br><span class="text-slate-200">Sichten.</span></h2>
|
||||
<p class="text-2xl leading-relaxed">
|
||||
Daten waren vorhanden – aber nicht operativ nutzbar.
|
||||
@@ -174,7 +182,7 @@
|
||||
<div class="h-4 w-full bg-slate-50 rounded mb-4"></div>
|
||||
<div class="h-4 w-2/3 bg-slate-50 rounded"></div>
|
||||
</div>
|
||||
<div class="bg-white border border-slate-200 p-8 rounded-xl shadow-2xl absolute top-10 left-10 transform rotate-3">
|
||||
<div class="bg-white border border-slate-200 p-8 rounded-xl shadow-2xl absolute top-10 left-10 transform rotate-3 bg-white">
|
||||
<div class="h-4 w-full bg-slate-50 rounded mb-4"></div>
|
||||
<div class="h-4 w-1/2 bg-slate-50 rounded"></div>
|
||||
</div>
|
||||
@@ -188,10 +196,10 @@
|
||||
<section class="slide" id="slide2">
|
||||
<div class="split-layout">
|
||||
<div class="story-content">
|
||||
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-6 block">Die Lösung</span>
|
||||
<span class="pre-headline">Die Lösung</span>
|
||||
<h2>Das <br><span class="text-blue-700">Cockpit.</span></h2>
|
||||
<p class="text-2xl leading-relaxed mb-10">
|
||||
Eine operative Ansicht für jeden Account.
|
||||
Operative Klarheit auf einer Seite.
|
||||
</p>
|
||||
<div class="bg-blue-50 border-l-[6px] border-blue-600 p-8 rounded-r-2xl">
|
||||
<p class="text-blue-900 text-xl font-bold italic">"Eine Seite statt zehn Klicks."</p>
|
||||
@@ -203,7 +211,7 @@
|
||||
<div class="card-header">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-slate-900 leading-tight">DGS GmbH</h3>
|
||||
<h3 class="text-2xl font-black text-slate-900">DGS GmbH</h3>
|
||||
<div class="text-blue-600 font-bold text-sm">(Paul Goliasch)</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
@@ -217,7 +225,7 @@
|
||||
<div class="text-sm font-semibold text-slate-500 italic">3 x CC1 Pro mit Nachlass</div>
|
||||
</div>
|
||||
<!-- 1:1 Dashboard Row -->
|
||||
<div class="data-grid">
|
||||
<div class="data-grid" id="dgsGrid">
|
||||
<div><div class="data-label">ORT</div><div class="data-cell">📍 3.12.25</div></div>
|
||||
<div><div class="data-label">CALL</div><div class="data-cell">📞 29.4.26</div></div>
|
||||
<div><div class="data-label">MAIL</div><div class="data-cell">✉️ 1.12.25</div></div>
|
||||
@@ -236,8 +244,8 @@
|
||||
<section class="slide" id="slide3">
|
||||
<div class="split-layout">
|
||||
<div class="story-content">
|
||||
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-6 block">Performance</span>
|
||||
<h2>Vom Überblick <br><span class="text-blue-600">zur Aktion.</span></h2>
|
||||
<span class="pre-headline">Aktivität</span>
|
||||
<h2>Vom Überblick <br><span class="text-blue-700">zur Aktion.</span></h2>
|
||||
<div class="bg-slate-50 p-10 rounded-2xl border border-slate-100">
|
||||
<div class="text-7xl font-black text-blue-600 mb-2">~20%</div>
|
||||
<div class="text-xl font-bold text-slate-800">Response Quote</div>
|
||||
@@ -246,17 +254,17 @@
|
||||
</div>
|
||||
<div class="visual-area">
|
||||
<div class="visual-element" id="visual3">
|
||||
<div class="bg-white border border-blue-200 p-10 rounded-2xl shadow-2xl w-[400px]">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
|
||||
<div class="bg-white border border-blue-200 p-10 rounded-2xl shadow-2xl w-[450px]">
|
||||
<div class="flex items-center gap-4 mb-10">
|
||||
<div class="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center text-white shadow-lg">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
|
||||
</div>
|
||||
<div class="font-bold text-xl italic">Bulk-Rückrufbitte</div>
|
||||
<div class="font-bold text-2xl italic text-slate-800">Bulk-Rückrufbitte</div>
|
||||
</div>
|
||||
<div class="h-3 w-full bg-slate-100 rounded-full overflow-hidden mb-4">
|
||||
<div class="h-full bg-blue-600 w-[20%] rounded-full"></div>
|
||||
<div class="kpi-bar-bg">
|
||||
<div id="bar3" class="kpi-bar-fill bg-blue-600 shadow-[0_0_15px_rgba(37,99,235,0.4)]"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-[10px] font-bold text-slate-400 uppercase">
|
||||
<div class="flex justify-between text-[11px] font-bold text-slate-400 uppercase mt-4">
|
||||
<span>70 Kontakte</span>
|
||||
<span class="text-blue-700">14 Reaktionen</span>
|
||||
</div>
|
||||
@@ -270,7 +278,7 @@
|
||||
<section class="slide" id="slide4">
|
||||
<div class="split-layout">
|
||||
<div class="story-content">
|
||||
<span class="text-red-600 font-bold uppercase tracking-[0.25em] text-xs mb-6 block">Steuerung</span>
|
||||
<span class="pre-headline">Steuerung</span>
|
||||
<h2>Ehrliche <br><span class="text-red-600">Pipeline.</span></h2>
|
||||
<div class="bg-red-50/30 border-l-[6px] border-red-600 p-10 rounded-r-2xl">
|
||||
<div class="text-6xl font-black text-red-600 mb-2">+44%</div>
|
||||
@@ -279,15 +287,15 @@
|
||||
</div>
|
||||
<div class="visual-area">
|
||||
<div class="visual-element" id="visual4">
|
||||
<div class="bg-white border border-slate-200 p-10 rounded-2xl shadow-2xl w-[450px]">
|
||||
<div class="bg-white border border-slate-200 p-10 rounded-2xl shadow-2xl w-[500px]">
|
||||
<div class="space-y-12">
|
||||
<div>
|
||||
<div class="flex justify-between text-xs font-bold mb-3"><span class="text-slate-400">MÄRZ 26</span><span class="text-slate-800">1,42 Mio. €</span></div>
|
||||
<div class="h-5 w-full bg-slate-100 rounded-full overflow-hidden"><div class="h-full bg-slate-300 w-[42%] rounded-full"></div></div>
|
||||
<div class="kpi-bar-bg"><div id="bar4a" class="kpi-bar-fill bg-slate-300"></div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs font-bold mb-3 text-red-600"><span>MAI 26</span><span>2,05 Mio. €</span></div>
|
||||
<div class="h-5 w-full bg-slate-100 rounded-full shadow-inner"><div class="h-full bg-red-600 w-[65%] rounded-full"></div></div>
|
||||
<div class="kpi-bar-bg"><div id="bar4b" class="kpi-bar-fill bg-red-600 shadow-[0_0_10px_rgba(220,38,38,0.2)]"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -300,32 +308,32 @@
|
||||
<section class="slide" id="slide5">
|
||||
<div class="split-layout">
|
||||
<div class="story-content">
|
||||
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-6 block">Intelligence</span>
|
||||
<span class="pre-headline">Intelligence</span>
|
||||
<h2>Management <br><span class="text-blue-700">Cockpit.</span></h2>
|
||||
<div class="space-y-8">
|
||||
<div class="text-xl font-bold text-slate-800 flex items-center gap-4">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-blue-700"></div> Pipeline Velocity
|
||||
<div class="w-2 h-2 rounded-full bg-blue-700"></div> Pipeline Velocity
|
||||
</div>
|
||||
<div class="text-xl font-bold text-slate-800 flex items-center gap-4">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-blue-700"></div> Winning Habits
|
||||
<div class="w-2 h-2 rounded-full bg-blue-700"></div> Winning Habits
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual-area">
|
||||
<div class="visual-element" id="visual5">
|
||||
<div class="bg-white border border-slate-200 p-8 rounded-2xl shadow-2xl w-[500px]">
|
||||
<div class="grid grid-cols-3 gap-4 mb-8 text-center border-b border-slate-100 pb-8">
|
||||
<div><div class="text-blue-700 font-black text-2xl">12d</div><div class="text-[8px] font-bold text-slate-400 uppercase mt-1">Response</div></div>
|
||||
<div><div class="text-blue-700 font-black text-2xl">4.8</div><div class="text-[8px] font-bold text-slate-400 uppercase mt-1">Calls/Deal</div></div>
|
||||
<div><div class="text-blue-700 font-black text-2xl">+159%</div><div class="text-[8px] font-bold text-slate-400 uppercase mt-1">Uplift</div></div>
|
||||
<div class="bg-white border border-slate-200 p-10 rounded-2xl shadow-2xl w-[550px]">
|
||||
<div class="grid grid-cols-3 gap-6 mb-10 text-center border-b border-slate-50 pb-10">
|
||||
<div><div class="text-blue-700 font-black text-3xl">12d</div><div class="text-[9px] font-bold text-slate-400 uppercase mt-2">Response</div></div>
|
||||
<div><div class="text-blue-700 font-black text-3xl">4.8</div><div class="text-[9px] font-bold text-slate-400 uppercase mt-2">Calls/Deal</div></div>
|
||||
<div><div class="text-blue-700 font-black text-3xl">+159%</div><div class="text-[9px] font-bold text-slate-400 uppercase mt-2">Uplift</div></div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between p-3 bg-blue-50/50 rounded border border-blue-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-7 h-7 bg-blue-700 rounded-full flex items-center justify-center text-[8px] font-bold text-white italic">PH</div>
|
||||
<span class="text-[11px] font-bold">Pierre Hollein | LIVE</span>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between p-4 bg-blue-50/50 rounded-xl border border-blue-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-blue-700 rounded-full flex items-center justify-center text-[10px] font-bold text-white italic shadow-lg">PH</div>
|
||||
<span class="text-sm font-bold">Pierre Hollein | LIVE</span>
|
||||
</div>
|
||||
<span class="text-[8px] font-bold text-blue-700 uppercase">Vorführung</span>
|
||||
<span class="text-[9px] font-bold text-blue-700 uppercase tracking-widest animate-pulse">Vorführung</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -338,14 +346,14 @@
|
||||
<section class="slide" id="slide6">
|
||||
<div class="split-layout">
|
||||
<div class="story-content">
|
||||
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-8 block">Potential</span>
|
||||
<span class="pre-headline">Potential</span>
|
||||
<h2>Nächster <br><span class="text-blue-600">Hebel.</span></h2>
|
||||
<p class="text-2xl mb-10">68% der Accounts ohne Ansprechpartner.</p>
|
||||
<p class="text-2xl mb-10">68% der Accounts im CRM ohne Ansprechpartner.</p>
|
||||
</div>
|
||||
<div class="visual-area">
|
||||
<div class="visual-element" id="visual6">
|
||||
<div class="text-center">
|
||||
<div class="text-[10rem] font-black text-blue-700 leading-none">11.216</div>
|
||||
<div id="count6" class="text-[11rem] font-black text-blue-700 leading-none">0</div>
|
||||
<div class="text-sm font-bold text-slate-400 uppercase mt-8 tracking-[0.6em]">Roh-Accounts</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -356,21 +364,22 @@
|
||||
<!-- Slide 7: Abschluss -->
|
||||
<section class="slide" id="slide7">
|
||||
<div class="w-full text-center max-w-5xl mx-auto pt-20">
|
||||
<h2 class="text-[8.5rem] mb-20 italic leading-none tracking-tighter">Vertrieb. <span class="text-blue-700">Steuerbar.</span></h2>
|
||||
<h2 class="text-[9rem] mb-20 italic leading-none tracking-tighter">Vertrieb. <span class="text-blue-700">Steuerbar.</span></h2>
|
||||
<div class="grid grid-cols-3 gap-12 mb-20">
|
||||
<div class="p-10 bg-white border border-slate-200 rounded-2xl shadow-xl text-left">
|
||||
<div class="text-blue-700 font-black text-3xl mb-4">Transparent</div>
|
||||
<p class="text-lg text-slate-500 font-medium">Alle Daten auf einer Seite.</p>
|
||||
<div class="p-12 bg-white border border-slate-200 rounded-3xl shadow-xl text-left">
|
||||
<div class="text-blue-700 font-black text-4xl mb-6">Transparent</div>
|
||||
<p class="text-xl text-slate-500 font-medium">Alle Daten auf einer Seite.</p>
|
||||
</div>
|
||||
<div class="p-10 bg-white border border-slate-200 rounded-2xl shadow-xl text-left">
|
||||
<div class="text-blue-700 font-black text-3xl mb-4">Priorisiert</div>
|
||||
<p class="text-lg text-slate-500 font-medium">Alarm zur Aktion.</p>
|
||||
<div class="p-12 bg-white border border-slate-200 rounded-3xl shadow-xl text-left">
|
||||
<div class="text-blue-700 font-black text-4xl mb-6">Priorisiert</div>
|
||||
<p class="text-xl text-slate-500 font-medium">Vom Alarm zur Aktion.</p>
|
||||
</div>
|
||||
<div class="p-10 bg-white border border-slate-200 rounded-2xl shadow-xl text-left">
|
||||
<div class="text-blue-700 font-black text-3xl mb-4">Handlungsfähig</div>
|
||||
<p class="text-lg text-slate-500 font-medium">Echte Hebel statt Listen.</p>
|
||||
<div class="p-12 bg-white border border-slate-200 rounded-3xl shadow-xl text-left">
|
||||
<div class="text-blue-700 font-black text-4xl mb-6">Handlungsfähig</div>
|
||||
<p class="text-xl text-slate-500 font-medium">Echte Hebel statt Listen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-4xl text-slate-400 italic font-light leading-relaxed">"Du katapultierst uns damit definitiv in eine modernere Zukunft."</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -398,27 +407,44 @@
|
||||
const visual = document.getElementById(visualId);
|
||||
|
||||
if (visual) {
|
||||
ScrollTrigger.create({
|
||||
trigger: `#${slideId}`,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
onEnter: () => {
|
||||
gsap.to(`#${visualId}`, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out" });
|
||||
},
|
||||
onLeave: () => {
|
||||
if (index < slides.length - 1) {
|
||||
gsap.to(`#${visualId}`, { opacity: 0, y: -40, duration: 0.5 });
|
||||
}
|
||||
},
|
||||
onEnterBack: () => {
|
||||
gsap.to(`#${visualId}`, { opacity: 1, y: 0, duration: 0.8 });
|
||||
},
|
||||
onLeaveBack: () => {
|
||||
gsap.to(`#${visualId}`, { opacity: 0, y: 40, duration: 0.5 });
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: `#${slideId}`,
|
||||
start: "top center",
|
||||
end: "bottom center",
|
||||
toggleActions: "play reverse play reverse"
|
||||
}
|
||||
});
|
||||
|
||||
tl.to(`#${visualId}`, { opacity: 1, x: 0, duration: 0.8, ease: "power2.out" });
|
||||
|
||||
// Mini-Animations for Slide 2 (DGS)
|
||||
if (slideId === "slide2") {
|
||||
tl.to("#dgsGrid .data-cell", { opacity: 1, y: 0, stagger: 0.1, duration: 0.5 }, "-=0.4");
|
||||
}
|
||||
|
||||
// Mini-Animations for Slide 3 (Aktion)
|
||||
if (slideId === "slide3") {
|
||||
tl.to("#bar3", { width: "20%", duration: 1.5, ease: "power4.out" }, "-=0.5");
|
||||
}
|
||||
|
||||
// Mini-Animations for Slide 4 (Pipeline)
|
||||
if (slideId === "slide4") {
|
||||
tl.to("#bar4a", { width: "42%", duration: 1, ease: "power2.out" }, "-=0.5");
|
||||
tl.to("#bar4b", { width: "65%", duration: 1.2, ease: "power2.out" }, "-=0.8");
|
||||
}
|
||||
|
||||
// Mini-Animations for Slide 6 (Counter)
|
||||
if (slideId === "slide6") {
|
||||
tl.to("#count6", {
|
||||
innerHTML: 11216,
|
||||
duration: 2,
|
||||
snap: { innerHTML: 1 },
|
||||
ease: "power2.out"
|
||||
}, "-=0.5");
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user