document.querySelector('#navbar-icon').addEventListener('click', function () {
// Wähle alle Elemente, die "slide-target" als Teil ihrer Klasse enthalten
const slidingElements = document.querySelectorAll('[class*="slide-target"]');
const menuWrapper = document.querySelector('.menu-outer-wrapper'); // Menü-Wrapper-Element
// Deaktiviert Scrollen, solange das Menü sichtbar ist
if (menuWrapper && window.getComputedStyle(menuWrapper).display !== 'none') {
disableScroll(); // Scrollen deaktivieren
}
slidingElements.forEach((slidingElement, index) => {
// Setze die Ausgangsposition zurück (off-screen)
slidingElement.style.transition = 'none';
slidingElement.style.opacity = '0'; // Unsichtbar machen
slidingElement.style.transform = 'translateX(100vw)'; // Ausgangsposition (rechts außerhalb)
// Lasse die Animation mit Verzögerung starten
setTimeout(() => {
slidingElement.style.transition = 'transform 1s ease-in-out, opacity 1s ease-in-out'; // Smooth transition
slidingElement.style.opacity = '1'; // Einfaden
slidingElement.style.transform = 'translateX(0)'; // Zurück zur Endposition
}, index * 100); // Verzögerung von 100ms pro Element
});
});
// Funktion zum Deaktivieren des Scrollens
function disableScroll() {
document.body.style.overflow = 'hidden'; // Verhindert Scrollen
document.body.style.height = '100%'; // Sicherstellen, dass die Höhe fixiert bleibt
// Blockiere auch Touch-Scrollen auf mobilen Geräten
document.addEventListener('touchmove', preventDefaultScroll, { passive: false });
document.addEventListener('wheel', preventDefaultScroll, { passive: false });
}
// Funktion zum Aktivieren des Scrollens
function enableScroll() {
document.body.style.overflow = ''; // Scrollen aktivieren
document.body.style.height = ''; // Höhe zurücksetzen
// Entferne die Event-Listener für Scroll-Blockade
document.removeEventListener('touchmove', preventDefaultScroll);
document.removeEventListener('wheel', preventDefaultScroll);
}
// Funktion, um Standard-Scrollen zu verhindern
function preventDefaultScroll(event) {
event.preventDefault();
}
// Überwacht Änderungen am Display-Status von menu-outer-wrapper
const observer = new MutationObserver(() => {
const menuWrapper = document.querySelector('.menu-outer-wrapper');
if (menuWrapper && window.getComputedStyle(menuWrapper).display === 'none') {
enableScroll(); // Scrollen aktivieren, wenn Menü ausgeblendet ist
}
});
// Beobachte das menu-outer-wrapper
const menuWrapper = document.querySelector('.menu-outer-wrapper');
if (menuWrapper) {
observer.observe(menuWrapper, { attributes: true, attributeFilter: ['style'] });
}
yeswecan!cer
The Full Picture
Digitalization in the German healthcare system is vital for the survival of over 4 million people currently suffering from cancer – 500,000 are diagnosed every year, 43 % of all women and 51 % of all men in Germany at least once in their life.
But the strict interpretation of the European General Data Protection Regulation (GDPR) blocks progress and real change.
yeswecan!cer, Germany's largest self-help group for cancer patients, aimed at raising awareness about this life-threatening issue.
The campaign idea deliberately uses the comparison of data and pixels. The smallest unit of data representation is a pixel. However, a single pixel is just a rectangle; only the proper combination of numerous data units will form a recognizable image. Medicine relies on information to get the full picture. Even minimal inaccuracies or missing diagnoses can lead to wrong decisions. To pull people into the subject we lead the viewer down the wrong path. One might think they are seeing a pixelated old master, yet a completely different truth is hidden behind it. Where the pixels become denser, it becomes clear: it is a matter of life and death.
To achieve maximum impact, three levels of perception needed to be precisely overlaid and harmonized. At the bottom, the harsh reality of cancer patients. Above that, a famous painting by an Old Master. And at the top, the pixelated version of the famous painting. Through the gaps in the pixelated image, the reality becomes strikingly clear.
Bringing an entire nation to rethink is a huge task that cannot be accomplished in the short term. But during the campaign period, visibility was not only raised to a record high, people engaged with the topic sustainably.
.jpeg){kind=tracking}
