MAREK ZDARSKY
Grafik-Design / Visuelle Kommunikation

me.zdarsky@gmail.com | 079 127 40 50

CV


Marek
Zdarsky


Grafik-Design / VisuelleKommunikation

CV


me.zdarsky@gmail.com
079 127 40 50

html,body{margin:0;padding:0} /* Basis */ #mz-slider-referenzen{ width:100vw; height:650px; position:relative; overflow:hidden; } #mz-slider-referenzen input{ display:none; } /* CTA Button */ #mz-slider-referenzen .mz-slider-referenzen__cta-btn{ position:absolute; left:180px; bottom:140px; padding:12px 80px; border:2px solid #000; background:transparent; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; font-weight:500; letter-spacing:0.18em; color:#000; text-decoration:none; display:inline-flex; align-items:center; z-index:30; } #mz-slider-referenzen .mz-slider-referenzen__emoji{ font-size:1.3em; line-height:1; margin-left:6px; } #mz-slider-referenzen .mz-slider-referenzen__cta-btn:hover{ background:#000; color:#fff; } #mz-slider-referenzen .mz-slider-referenzen__cta-btn:active{ transform:translateY(0); } /* Tablet */ @media (max-width:980px){ #mz-slider-referenzen .mz-slider-referenzen__cta-btn{ left:100px; bottom:140px; font-size:15px; } } /* Mobile */ @media (max-width:767px){ #mz-slider-referenzen .mz-slider-referenzen__cta-btn{ left:60px; bottom:140px; font-size:14px; } } #mz-slider-referenzen .mz-slider-referenzen__track-wrap{ width:100%; height:650px; touch-action:pan-y; } #mz-slider-referenzen .mz-slider-referenzen__track{ display:flex; width:800%; height:100%; will-change:transform; transition:transform 1.15s cubic-bezier(.16,1,.3,1); } #mz-slider-referenzen .mz-slider-referenzen__slide{ flex:0 0 12.5%; height:650px; } #mz-slider-referenzen .mz-slider-referenzen__slide img{ width:100%; height:100%; object-fit:cover; display:block; } /* Slides */ #mz-slide-referenzen-1:checked ~ .mz-slider-referenzen__track-wrap .mz-slider-referenzen__track{transform:translateX(0)} #mz-slide-referenzen-2:checked ~ .mz-slider-referenzen__track-wrap .mz-slider-referenzen__track{transform:translateX(-12.5%)} #mz-slide-referenzen-3:checked ~ .mz-slider-referenzen__track-wrap .mz-slider-referenzen__track{transform:translateX(-25%)} #mz-slide-referenzen-4:checked ~ .mz-slider-referenzen__track-wrap .mz-slider-referenzen__track{transform:translateX(-37.5%)} #mz-slide-referenzen-5:checked ~ .mz-slider-referenzen__track-wrap .mz-slider-referenzen__track{transform:translateX(-50%)} #mz-slide-referenzen-6:checked ~ .mz-slider-referenzen__track-wrap .mz-slider-referenzen__track{transform:translateX(-62.5%)} #mz-slide-referenzen-7:checked ~ .mz-slider-referenzen__track-wrap .mz-slider-referenzen__track{transform:translateX(-75%)} #mz-slide-referenzen-8:checked ~ .mz-slider-referenzen__track-wrap .mz-slider-referenzen__track{transform:translateX(-87.5%)} /* Pfeile */ #mz-slider-referenzen .mz-slider-referenzen__nav label{ position:absolute; top:50%; width:52px; height:52px; border-top:5px solid rgba(255,255,255,.9); border-right:5px solid rgba(255,255,255,.9); cursor:pointer; display:none; opacity:.85; z-index:10; } #mz-slider-referenzen .mz-slider-referenzen__prev{ left:40px; transform:translateY(-50%) rotate(-135deg); } #mz-slider-referenzen .mz-slider-referenzen__next{ right:40px; transform:translateY(-50%) rotate(45deg); } /* Pfeile je Slide */ #mz-slide-referenzen-1:checked ~ .mz-slider-referenzen__nav label:nth-child(1), #mz-slide-referenzen-1:checked ~ .mz-slider-referenzen__nav label:nth-child(2){display:block} #mz-slide-referenzen-2:checked ~ .mz-slider-referenzen__nav label:nth-child(3), #mz-slide-referenzen-2:checked ~ .mz-slider-referenzen__nav label:nth-child(4){display:block} #mz-slide-referenzen-3:checked ~ .mz-slider-referenzen__nav label:nth-child(5), #mz-slide-referenzen-3:checked ~ .mz-slider-referenzen__nav label:nth-child(6){display:block} #mz-slide-referenzen-4:checked ~ .mz-slider-referenzen__nav label:nth-child(7), #mz-slide-referenzen-4:checked ~ .mz-slider-referenzen__nav label:nth-child(8){display:block} #mz-slide-referenzen-5:checked ~ .mz-slider-referenzen__nav label:nth-child(9), #mz-slide-referenzen-5:checked ~ .mz-slider-referenzen__nav label:nth-child(10){display:block} #mz-slide-referenzen-6:checked ~ .mz-slider-referenzen__nav label:nth-child(11), #mz-slide-referenzen-6:checked ~ .mz-slider-referenzen__nav label:nth-child(12){display:block} #mz-slide-referenzen-7:checked ~ .mz-slider-referenzen__nav label:nth-child(13), #mz-slide-referenzen-7:checked ~ .mz-slider-referenzen__nav label:nth-child(14){display:block} #mz-slide-referenzen-8:checked ~ .mz-slider-referenzen__nav label:nth-child(15), #mz-slide-referenzen-8:checked ~ .mz-slider-referenzen__nav label:nth-child(16){display:block} /* Progress */ #mz-slider-referenzen .mz-slider-referenzen__progress{ position:absolute; left:50%; transform:translateX(-50%); bottom:74px; width:min(720px,92vw); display:flex; gap:8px; z-index:12; pointer-events:none; } #mz-slider-referenzen .mz-slider-referenzen__bar{ flex:1; height:4px; background:rgba(255,255,255,.55); border-radius:999px; overflow:hidden; } #mz-slider-referenzen .mz-slider-referenzen__bar i{ display:block; height:100%; width:0%; background:rgba(0,0,0,.75); border-radius:999px; } #mz-slider-referenzen .mz-slider-referenzen__progress.is-running .mz-slider-referenzen__bar i{ animation:none; } #mz-slide-referenzen-1:checked ~ .mz-slider-referenzen__progress.is-running .mz-slider-referenzen__bar--1 i{animation:mzSliderReferenzenFill 5s linear forwards} #mz-slide-referenzen-2:checked ~ .mz-slider-referenzen__progress.is-running .mz-slider-referenzen__bar--2 i{animation:mzSliderReferenzenFill 5s linear forwards} #mz-slide-referenzen-3:checked ~ .mz-slider-referenzen__progress.is-running .mz-slider-referenzen__bar--3 i{animation:mzSliderReferenzenFill 5s linear forwards} #mz-slide-referenzen-4:checked ~ .mz-slider-referenzen__progress.is-running .mz-slider-referenzen__bar--4 i{animation:mzSliderReferenzenFill 5s linear forwards} #mz-slide-referenzen-5:checked ~ .mz-slider-referenzen__progress.is-running .mz-slider-referenzen__bar--5 i{animation:mzSliderReferenzenFill 5s linear forwards} #mz-slide-referenzen-6:checked ~ .mz-slider-referenzen__progress.is-running .mz-slider-referenzen__bar--6 i{animation:mzSliderReferenzenFill 5s linear forwards} #mz-slide-referenzen-7:checked ~ .mz-slider-referenzen__progress.is-running .mz-slider-referenzen__bar--7 i{animation:mzSliderReferenzenFill 5s linear forwards} #mz-slide-referenzen-8:checked ~ .mz-slider-referenzen__progress.is-running .mz-slider-referenzen__bar--8 i{animation:mzSliderReferenzenFill 5s linear forwards} @keyframes mzSliderReferenzenFill{ from{width:0} to{width:100%} } /* Pause bei Hover */ #mz-slider-referenzen:hover .mz-slider-referenzen__bar i{ animation-play-state:paused; } (() => { const sliderRoot = document.querySelector('#mz-slider-referenzen'); if (!sliderRoot) return; const slides = [...sliderRoot.querySelectorAll('input[name="mz_slider_referenzen"]')]; const sliderTrackWrap = sliderRoot.querySelector('.mz-slider-referenzen__track-wrap'); const progress = sliderRoot.querySelector('.mz-slider-referenzen__progress'); let index = slides.findIndex(slide => slide.checked); if (index < 0) index = 0; const INTERVAL = 5000; let timer = null; const restartProgress = () => { progress.classList.remove('is-running'); void progress.offsetWidth; progress.classList.add('is-running'); }; const goTo = (i) => { index = (i + slides.length) % slides.length; slides[index].checked = true; restartProgress(); }; const next = () => goTo(index + 1); const prev = () => goTo(index - 1); const stop = () => { if (timer) { clearInterval(timer); timer = null; } }; const start = () => { stop(); timer = setInterval(next, INTERVAL); restartProgress(); }; sliderRoot.addEventListener('mouseenter', stop); sliderRoot.addEventListener('mouseleave', start); slides.forEach((slide, i) => { slide.addEventListener('change', () => { if (slide.checked) { index = i; start(); } }); }); let startX = 0; let startY = 0; sliderTrackWrap.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; startY = e.touches[0].clientY; stop(); }, { passive: true }); sliderTrackWrap.addEventListener('touchend', (e) => { const deltaX = e.changedTouches[0].clientX - startX; const deltaY = e.changedTouches[0].clientY - startY; if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 60) { deltaX < 0 ? next() : prev(); } start(); }, { passive: true }); progress.classList.add('is-running'); start(); })();
That's me

Ich gestalte Ideen, Marken und digitale Erlebnisse mit Haltung, Klarheit und Konzept. Ob Kampagne, Branding, Content oder UX/UI: Ich mag Gestaltung, die Wirkung hat und im Kopf bleibt.

Ich bin Marek Zdarsky, Grafik Designer und digital Art Director mit über 16 Jahren Erfahrung an der digitalen Schnittstelle von Design, Storytelling und visueller Kommunikation.

 

Kaffeezentrale Schweiz

Seit April 2024 bin ich fest bei der Kaffeezentrale Schweiz angestellt, nachdem ich bereits zuvor als Freelancer für das Unternehmen tätig war.

Eingestiegen bin ich in der Funktion als UI/UX Gestalter. Im Verlauf habe ich jedoch weit über diese Rolle hinaus Verantwortung übernommen und die digitale Entwicklung in mehreren Bereichen aktiv geprägt. Die erzielten Resultate spiegeln sich heute sowohl im Markenauftritt als auch in klar messbaren KPI wider.

Analyse der Ausgangslage und digitale Weiterentwicklung
Dokumentation der ursprünglichen digitalen Ausgangslage und Ableitung zentraler Optimierungsfelder in den Bereichen Website, E-Mail-Marketing, Navigation und Social Media.

Integrierte Kampagne für Loveramics
Entwicklung und Umsetzung einer kanalübergreifenden Kampagne für Loveramics mit Social Media, E-Mail-Marketing, SEO-optimierten Landing Pages, visueller Gestaltung und datenbasierter Performance-Auswertung.

Landing Pages, Bonusprogramm und Marketing-Automation
Entwicklung conversionstarker Landing Pages, Aufbau eines digitalen Bonusprogramms sowie Konzeption segmentierter und automatisierter E-Mail- und Voucher-Strecken.

Produkteinführung des Kaffee-Abonnements
Ganzheitliche Konzeption und Umsetzung der Lancierung des Kaffee-Abonnements über Social Media, E-Mail-Marketing, Landing Pages sowie UX/UI-Optimierungen im Kaufprozess.

Wissensplattform, Content-Struktur und interne Verlinkung
Aufbau thematischer Content- und Wissensseiten zu Herkunft, Zubereitung, Zubehör und Filterkaffee inklusive interner Verlinkung, Cross-Selling und begleitender Social-Media-Kommunikation.

Social Media Kampagnen und organische Content-Entwicklung
Planung, Gestaltung und Umsetzung kanalübergreifender Inhalte für Social Media mit dem Ziel, Markenprofil, Sichtbarkeit und Community-Interaktion nachhaltig auszubauen.

Kampagnenaktivierung, Eventkommunikation und Produktinszenierung
Konzeption und Umsetzung von Aktivierungen für Events, Print und Leadgenerierung sowie Entwicklung hochwertiger Produktinszenierungen für Sortiments- und Produkteinführungen.

Entwicklung eines konsistenten Icon-Systems
Konzeption und Gestaltung eines eigenständigen Icon-Systems für Navigation, Shop und Markenkommunikation zur Stärkung der visuellen Konsistenz über alle digitalen Touchpoints hinweg.

Wachstumsziele 2026
Visualisierung der definierten Zielgrössen bis 2026 für Newsletter, Websitebesuche und Social Media mit klarem Fokus auf Reichweitenaufbau und Marktentwicklung in den relevanten Regionen.

Jumbo Baumarkt

UX/UI-Konzeption, Shop-Struktur und Checkout-Optimierung
Konzeption und gestalterische Weiterentwicklung zentraler Shop-Bereiche mit Fokus auf Navigation, Produktdetailseiten, Konfigurator, Kategorienseiten, Landing Pages, Cross-Selling, Pop-ups sowie eine nutzerorientierte Optimierung des Checkout-Prozesses.

UX/UI-Konzeption, Shop-Struktur und Checkout-Optimierung
Konzeption und gestalterische Weiterentwicklung zentraler Shop-Bereiche mit Fokus auf Navigation.

1
2
3
4
5
6
7
8
9
10
11
12
13
html,body{margin:0;padding:0} .wrapper{ width:1080px; height:500px; position:relative; overflow:hidden; } .wrapper input{display:none} .wrapper .slider-wrapper{ width:100%; height:500px; touch-action:pan-y; } .wrapper .inner{ display:flex; width:1300%; height:100%; will-change:transform; transition:transform 1.15s cubic-bezier(.16,1,.3,1); } .wrapper article{ flex:0 0 7.6923076923%; height:500px; } .wrapper article img{ width:100%; height:100%; object-fit:cover; display:block; } /* Slides */ .wrapper #slide1:checked ~ .slider-wrapper .inner{transform:translateX(0)} .wrapper #slide2:checked ~ .slider-wrapper .inner{transform:translateX(-7.6923076923%)} .wrapper #slide3:checked ~ .slider-wrapper .inner{transform:translateX(-15.3846153846%)} .wrapper #slide4:checked ~ .slider-wrapper .inner{transform:translateX(-23.0769230769%)} .wrapper #slide5:checked ~ .slider-wrapper .inner{transform:translateX(-30.7692307692%)} .wrapper #slide6:checked ~ .slider-wrapper .inner{transform:translateX(-38.4615384615%)} .wrapper #slide7:checked ~ .slider-wrapper .inner{transform:translateX(-46.1538461538%)} .wrapper #slide8:checked ~ .slider-wrapper .inner{transform:translateX(-53.8461538461%)} .wrapper #slide9:checked ~ .slider-wrapper .inner{transform:translateX(-61.5384615384%)} .wrapper #slide10:checked ~ .slider-wrapper .inner{transform:translateX(-69.2307692307%)} .wrapper #slide11:checked ~ .slider-wrapper .inner{transform:translateX(-76.923076923%)} .wrapper #slide12:checked ~ .slider-wrapper .inner{transform:translateX(-84.6153846153%)} .wrapper #slide13:checked ~ .slider-wrapper .inner{transform:translateX(-92.3076923076%)} /* Pfeile */ .wrapper .slider-prev-next-control label{ position:absolute; top:50%; transform:translateY(-50%); width:22px; height:22px; border-top:3px solid rgba(255,255,255,.9); border-right:3px solid rgba(255,255,255,.9); cursor:pointer; display:none; opacity:.85; z-index:10; } .wrapper .slider-prev-next-control .prev{ left:18px; transform:translateY(-50%) rotate(-135deg); } .wrapper .slider-prev-next-control .next{ right:18px; transform:translateY(-50%) rotate(45deg); } /* Pfeile je Slide */ .wrapper #slide1:checked ~ .slider-prev-next-control label:nth-child(1), .wrapper #slide1:checked ~ .slider-prev-next-control label:nth-child(2){display:block} .wrapper #slide2:checked ~ .slider-prev-next-control label:nth-child(3), .wrapper #slide2:checked ~ .slider-prev-next-control label:nth-child(4){display:block} .wrapper #slide3:checked ~ .slider-prev-next-control label:nth-child(5), .wrapper #slide3:checked ~ .slider-prev-next-control label:nth-child(6){display:block} .wrapper #slide4:checked ~ .slider-prev-next-control label:nth-child(7), .wrapper #slide4:checked ~ .slider-prev-next-control label:nth-child(8){display:block} .wrapper #slide5:checked ~ .slider-prev-next-control label:nth-child(9), .wrapper #slide5:checked ~ .slider-prev-next-control label:nth-child(10){display:block} .wrapper #slide6:checked ~ .slider-prev-next-control label:nth-child(11), .wrapper #slide6:checked ~ .slider-prev-next-control label:nth-child(12){display:block} .wrapper #slide7:checked ~ .slider-prev-next-control label:nth-child(13), .wrapper #slide7:checked ~ .slider-prev-next-control label:nth-child(14){display:block} .wrapper #slide8:checked ~ .slider-prev-next-control label:nth-child(15), .wrapper #slide8:checked ~ .slider-prev-next-control label:nth-child(16){display:block} .wrapper #slide9:checked ~ .slider-prev-next-control label:nth-child(17), .wrapper #slide9:checked ~ .slider-prev-next-control label:nth-child(18){display:block} .wrapper #slide10:checked ~ .slider-prev-next-control label:nth-child(19), .wrapper #slide10:checked ~ .slider-prev-next-control label:nth-child(20){display:block} .wrapper #slide11:checked ~ .slider-prev-next-control label:nth-child(21), .wrapper #slide11:checked ~ .slider-prev-next-control label:nth-child(22){display:block} .wrapper #slide12:checked ~ .slider-prev-next-control label:nth-child(23), .wrapper #slide12:checked ~ .slider-prev-next-control label:nth-child(24){display:block} .wrapper #slide13:checked ~ .slider-prev-next-control label:nth-child(25), .wrapper #slide13:checked ~ .slider-prev-next-control label:nth-child(26){display:block} /* Progress */ .wrapper .progress{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; width:min(520px,92%); display:flex; gap:5px; z-index:12; pointer-events:none; } .wrapper .progress .bar{ flex:1; height:3px; background:rgba(255,255,255,.55); border-radius:999px; overflow:hidden; } .wrapper .progress .bar i{ display:block; height:100%; width:0%; background:rgba(0,0,0,.75); border-radius:999px; } .wrapper .progress.run .bar i{animation:none} .wrapper #slide1:checked ~ .progress.run .b1 i{animation:fill 5s linear forwards} .wrapper #slide2:checked ~ .progress.run .b2 i{animation:fill 5s linear forwards} .wrapper #slide3:checked ~ .progress.run .b3 i{animation:fill 5s linear forwards} .wrapper #slide4:checked ~ .progress.run .b4 i{animation:fill 5s linear forwards} .wrapper #slide5:checked ~ .progress.run .b5 i{animation:fill 5s linear forwards} .wrapper #slide6:checked ~ .progress.run .b6 i{animation:fill 5s linear forwards} .wrapper #slide7:checked ~ .progress.run .b7 i{animation:fill 5s linear forwards} .wrapper #slide8:checked ~ .progress.run .b8 i{animation:fill 5s linear forwards} .wrapper #slide9:checked ~ .progress.run .b9 i{animation:fill 5s linear forwards} .wrapper #slide10:checked ~ .progress.run .b10 i{animation:fill 5s linear forwards} .wrapper #slide11:checked ~ .progress.run .b11 i{animation:fill 5s linear forwards} .wrapper #slide12:checked ~ .progress.run .b12 i{animation:fill 5s linear forwards} .wrapper #slide13:checked ~ .progress.run .b13 i{animation:fill 5s linear forwards} @keyframes fill{ from{width:0} to{width:100%} } .wrapper:hover .progress .bar i{ animation-play-state:paused; } (() => { const wrapper = document.querySelector('.wrapper'); if (!wrapper) return; const slides = [...wrapper.querySelectorAll('input[name="slider"]')]; const slider = wrapper.querySelector('.slider-wrapper'); const progress = wrapper.querySelector('.progress'); let index = slides.findIndex(s => s.checked); if (index < 0) index = 0; const INTERVAL = 5000; let timer; const restartProgress = () => { progress.classList.remove('run'); void progress.offsetWidth; progress.classList.add('run'); }; const goTo = i => { index = (i + slides.length) % slides.length; slides[index].checked = true; restartProgress(); }; const next = () => goTo(index + 1); const prev = () => goTo(index - 1); const start = () => { stop(); timer = setInterval(next, INTERVAL); restartProgress(); }; const stop = () => timer && clearInterval(timer); wrapper.addEventListener('mouseenter', stop); wrapper.addEventListener('mouseleave', start); slides.forEach((s, i) => { s.addEventListener('change', () => { if (s.checked) { index = i; start(); } }); }); let sx = 0, sy = 0; slider.addEventListener('touchstart', e => { sx = e.touches[0].clientX; sy = e.touches[0].clientY; stop(); }, {passive:true}); slider.addEventListener('touchend', e => { const dx = e.changedTouches[0].clientX - sx; const dy = e.changedTouches[0].clientY - sy; if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 60) { dx < 0 ? next() : prev(); } start(); }); progress.classList.add('run'); start(); })();

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design.

Simpego Versicherungen

Leadgenerierung durch Offline-Kampagne

Konzeption und Gestaltung einer aufmerksamkeitsstarken Leadgenerierungskampagne. Art Direction, 3D-Visualisierung und Grafikdesign für digitale und analoge Kontaktpunkte.

Markenkommunikation mit aufmerksamkeitsstarker Awareness-Kampagne
Entwicklung einer crossmedialen Kampagne für Print und digitale Kanäle zur Stärkung der Markenwahrnehmung und klaren Positionierung im Wettbewerbsumfeld.

Gamification-Kampagne für E-Mail-Marketing und Landingpage
Konzeption und Gestaltung einer interaktiven Kampagne mit spielerischem Ansatz für E-Mail-Marketing, Landingpage und Querverlinkung zur Aktivierung und Leadgenerierung.

Awareness-Kampagne für On- und Offline-Medien
Konzeption und Gestaltung einer kanalübergreifenden Awareness-Kampagne mit prägnanter Art Direction, 3D-Visualisierung und markenstarker visueller Umsetzung.

Online- und Social-Media-Kampagne zur Leadgenerierung
Entwicklung und Umsetzung digitaler Kampagnen für Social Media und Online-Kanäle mit Fokus auf Reichweite, Interaktion und performante Leadgenerierung.

Crowley Languages

Catherine Crowley
Art Direction, Konzeption, Illustration, Stop Motion & UX/UI

Für die Neugründung von Catherine Crowley entstand während der Pandemie eine visuelle Identität mit viel Charakter. Im Zentrum standen handgezeichnete Doodles: leicht, nahbar und unverwechselbar.

Die Corporate Identity schafft den Spagat zwischen seriöser Wissensvermittlung und spielerischer Leichtigkeit. Sie macht Catherine Crowleys Lehrtätigkeit sichtbar, gibt der Marke Persönlichkeit und funktioniert über Website, Illustration und Animation hinweg.

Zur Website

Bild 1
Bild 2
Bild 3
Bild 4
Bild 5
Bild 6
Bild 7
Bild 8
html,body{ margin:0; padding:0; } .mz-crowley-slider{ width:1080px; max-width:100%; height:630px; position:relative; overflow:hidden; } .mz-crowley-slider > input[type="radio"]{ position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; pointer-events:none !important; appearance:none !important; -webkit-appearance:none !important; } .mz-crowley-slider .mz-crowley-slider-wrapper{ width:100%; height:630px; touch-action:pan-y; } .mz-crowley-slider .mz-crowley-inner{ display:flex; width:800%; height:100%; will-change:transform; transition:transform 1.15s cubic-bezier(.16,1,.3,1); } .mz-crowley-slider article{ flex:0 0 12.5%; height:630px; } .mz-crowley-slider article img{ width:100%; height:100%; object-fit:cover; display:block; } /* Slides */ .mz-crowley-slider #mz-crowley-slide-1:checked ~ .mz-crowley-slider-wrapper .mz-crowley-inner{transform:translateX(0)} .mz-crowley-slider #mz-crowley-slide-2:checked ~ .mz-crowley-slider-wrapper .mz-crowley-inner{transform:translateX(-12.5%)} .mz-crowley-slider #mz-crowley-slide-3:checked ~ .mz-crowley-slider-wrapper .mz-crowley-inner{transform:translateX(-25%)} .mz-crowley-slider #mz-crowley-slide-4:checked ~ .mz-crowley-slider-wrapper .mz-crowley-inner{transform:translateX(-37.5%)} .mz-crowley-slider #mz-crowley-slide-5:checked ~ .mz-crowley-slider-wrapper .mz-crowley-inner{transform:translateX(-50%)} .mz-crowley-slider #mz-crowley-slide-6:checked ~ .mz-crowley-slider-wrapper .mz-crowley-inner{transform:translateX(-62.5%)} .mz-crowley-slider #mz-crowley-slide-7:checked ~ .mz-crowley-slider-wrapper .mz-crowley-inner{transform:translateX(-75%)} .mz-crowley-slider #mz-crowley-slide-8:checked ~ .mz-crowley-slider-wrapper .mz-crowley-inner{transform:translateX(-87.5%)} /* Pfeile */ .mz-crowley-slider .mz-crowley-prev-next-control label{ position:absolute; top:50%; width:22px; height:22px; border-top:3px solid rgba(0,0,0,.9); border-right:3px solid rgba(0,0,0,.9); cursor:pointer; display:none; opacity:.85; z-index:10; } .mz-crowley-slider .mz-crowley-prev-next-control .mz-crowley-prev{ left:18px; transform:translateY(-50%) rotate(-135deg); } .mz-crowley-slider .mz-crowley-prev-next-control .mz-crowley-next{ right:18px; transform:translateY(-50%) rotate(45deg); } /* Pfeile je Slide */ .mz-crowley-slider #mz-crowley-slide-1:checked ~ .mz-crowley-prev-next-control label:nth-child(1), .mz-crowley-slider #mz-crowley-slide-1:checked ~ .mz-crowley-prev-next-control label:nth-child(2){display:block} .mz-crowley-slider #mz-crowley-slide-2:checked ~ .mz-crowley-prev-next-control label:nth-child(3), .mz-crowley-slider #mz-crowley-slide-2:checked ~ .mz-crowley-prev-next-control label:nth-child(4){display:block} .mz-crowley-slider #mz-crowley-slide-3:checked ~ .mz-crowley-prev-next-control label:nth-child(5), .mz-crowley-slider #mz-crowley-slide-3:checked ~ .mz-crowley-prev-next-control label:nth-child(6){display:block} .mz-crowley-slider #mz-crowley-slide-4:checked ~ .mz-crowley-prev-next-control label:nth-child(7), .mz-crowley-slider #mz-crowley-slide-4:checked ~ .mz-crowley-prev-next-control label:nth-child(8){display:block} .mz-crowley-slider #mz-crowley-slide-5:checked ~ .mz-crowley-prev-next-control label:nth-child(9), .mz-crowley-slider #mz-crowley-slide-5:checked ~ .mz-crowley-prev-next-control label:nth-child(10){display:block} .mz-crowley-slider #mz-crowley-slide-6:checked ~ .mz-crowley-prev-next-control label:nth-child(11), .mz-crowley-slider #mz-crowley-slide-6:checked ~ .mz-crowley-prev-next-control label:nth-child(12){display:block} .mz-crowley-slider #mz-crowley-slide-7:checked ~ .mz-crowley-prev-next-control label:nth-child(13), .mz-crowley-slider #mz-crowley-slide-7:checked ~ .mz-crowley-prev-next-control label:nth-child(14){display:block} .mz-crowley-slider #mz-crowley-slide-8:checked ~ .mz-crowley-prev-next-control label:nth-child(15), .mz-crowley-slider #mz-crowley-slide-8:checked ~ .mz-crowley-prev-next-control label:nth-child(16){display:block} /* Progress */ .mz-crowley-slider .mz-crowley-progress{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; width:min(520px,92%); display:flex; gap:5px; z-index:12; pointer-events:none; } .mz-crowley-slider .mz-crowley-progress .mz-crowley-bar{ flex:1; height:3px; background:rgba(255,255,255,.55); border-radius:999px; overflow:hidden; } .mz-crowley-slider .mz-crowley-progress .mz-crowley-bar i{ display:block; height:100%; width:0%; background:rgba(0,0,0,.75); border-radius:999px; } .mz-crowley-slider .mz-crowley-progress.mz-crowley-run .mz-crowley-bar i{ animation:none; } .mz-crowley-slider #mz-crowley-slide-1:checked ~ .mz-crowley-progress.mz-crowley-run .mz-crowley-b1 i{animation:mz-crowley-fill 5s linear forwards} .mz-crowley-slider #mz-crowley-slide-2:checked ~ .mz-crowley-progress.mz-crowley-run .mz-crowley-b2 i{animation:mz-crowley-fill 5s linear forwards} .mz-crowley-slider #mz-crowley-slide-3:checked ~ .mz-crowley-progress.mz-crowley-run .mz-crowley-b3 i{animation:mz-crowley-fill 5s linear forwards} .mz-crowley-slider #mz-crowley-slide-4:checked ~ .mz-crowley-progress.mz-crowley-run .mz-crowley-b4 i{animation:mz-crowley-fill 5s linear forwards} .mz-crowley-slider #mz-crowley-slide-5:checked ~ .mz-crowley-progress.mz-crowley-run .mz-crowley-b5 i{animation:mz-crowley-fill 5s linear forwards} .mz-crowley-slider #mz-crowley-slide-6:checked ~ .mz-crowley-progress.mz-crowley-run .mz-crowley-b6 i{animation:mz-crowley-fill 5s linear forwards} .mz-crowley-slider #mz-crowley-slide-7:checked ~ .mz-crowley-progress.mz-crowley-run .mz-crowley-b7 i{animation:mz-crowley-fill 5s linear forwards} .mz-crowley-slider #mz-crowley-slide-8:checked ~ .mz-crowley-progress.mz-crowley-run .mz-crowley-b8 i{animation:mz-crowley-fill 5s linear forwards} @keyframes mz-crowley-fill{ from{width:0} to{width:100%} } .mz-crowley-slider:hover .mz-crowley-progress .mz-crowley-bar i{ animation-play-state:paused; } (() => { const wrapper = document.querySelector('.mz-crowley-slider'); if (!wrapper) return; const slides = [...wrapper.querySelectorAll('input[name="mz-crowley-slider-radio"]')]; const slider = wrapper.querySelector('.mz-crowley-slider-wrapper'); const progress = wrapper.querySelector('.mz-crowley-progress'); let index = slides.findIndex(slide => slide.checked); if (index < 0) index = 0; const INTERVAL = 5000; let timer; const restartProgress = () => { progress.classList.remove('mz-crowley-run'); void progress.offsetWidth; progress.classList.add('mz-crowley-run'); }; const goTo = i => { index = (i + slides.length) % slides.length; slides[index].checked = true; restartProgress(); }; const next = () => goTo(index + 1); const prev = () => goTo(index - 1); const start = () => { stop(); timer = setInterval(next, INTERVAL); restartProgress(); }; const stop = () => { if (timer) clearInterval(timer); }; wrapper.addEventListener('mouseenter', stop); wrapper.addEventListener('mouseleave', start); slides.forEach((slide, i) => { slide.addEventListener('change', () => { if (slide.checked) { index = i; start(); } }); }); let sx = 0; let sy = 0; slider.addEventListener('touchstart', e => { sx = e.touches[0].clientX; sy = e.touches[0].clientY; stop(); }, {passive:true}); slider.addEventListener('touchend', e => { const dx = e.changedTouches[0].clientX - sx; const dy = e.changedTouches[0].clientY - sy; if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 60) { dx < 0 ? next() : prev(); } start(); }); progress.classList.add('mz-crowley-run'); start(); })();

Markenkommunikation mit aufmerksamkeitsstarker Awareness-Kampagne
Entwicklung einer crossmedialen Kampagne für Print und digitale Kanäle zur Stärkung der Markenwahrnehmung und klaren Positionierung im Wettbewerbsumfeld.

Egal was dir auf dem Herzen liegt – schreib mir einfach. Ich antworte schnell.


+41 79 127 40 50
me.zdarsky@gmail.com

Burstwiesenstrasse 14
8606 Greifensee