Easter Egg

Easter Egg

2023

Wat was de opdracht?

Voor dit project heb ik samen met 4 andere studenten gewerkt aan het design van de website van een lasbedrijf. Dit ging vanuit het mediabedrijf Happy Horizon. Aangezien de hele klas (8 groepen) dezelfde opdracht had kwam er op het einde een winnaar uit voor het beste design. En dat waren wij!!

Na het succes van deze opdracht mochten we in groepjes van 2 ons gemaakte design gaan ontwikkelen in HTML, CSS en JS. De opdracht hierbij was om er een easter egg in te bouwen!

Mijn Easter Egg

In de video hiernaast zie je de pagina en Easter Egg die ik heb gemaakt! Ik heb dit gemaakt met HTML, CSS en JavaScript.

Website

De website met easter egg kan je zelf ook bekijken door de website te bezoeken!

Bezoek website

Ontwikkelde Skills

Plannen

Research

Samenwerking

Figma

User Testen

HTML

CSS

Design

Initiatief nemen

<script>
(function () {
  const KEY = 'headerAnimatedOnce';

  try {
    // Set or check first visit flag
    const seen = localStorage.getItem(KEY);
    if (!seen) {
      localStorage.setItem(KEY, '1');
      return; // ✅ First visit: allow animation
    }
  } catch (e) {
    return; // Fail-safe: allow animation if localStorage blocked
  }

  // ✅ Only runs on return visits
  window.addEventListener('DOMContentLoaded', () => {
    const header = document.querySelector('.elementor-element[data-id="59dfe14"]');

    if (!header) return;

    // Remove animation-related classes if they exist
    header.classList.remove('elementor-invisible', 'animated', 'slideInDown', 'animated-fast');

    // Optional: remove animation settings from Elementor’s data-settings
    const settings = header.getAttribute('data-settings');
    if (settings) {
      try {
        const parsed = JSON.parse(settings);
        delete parsed.animation;
        delete parsed._animation;
        delete parsed._animation_delay;
        header.setAttribute('data-settings', JSON.stringify(parsed));
      } catch (e) {
        // Just remove it if it’s malformed
        header.removeAttribute('data-settings');
      }
    }

    // Inline safety override
    header.style.animation = 'none';
    header.style.transition = 'none';
    header.style.opacity = '1';
    header.style.transform = 'none';
    header.style.visibility = 'visible';
  });
})();
</script>

<style>
/* Prevent animation flicker during load for return visits */
.elementor-element[data-id="59dfe14"].elementor-invisible {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
</style>