Ryan sound notification

Wat heb ik gedaan?

Ik heb ervoor gezorgd dat de gebruiker een korte notificatie krijgt bij het openen van de website. Deze notificatie zegt dat de gebruiker het geluid moet aanzetten als hij of zij de beste ervaring wilt hebben. Ik heb er animatie's aan toegevoegd zodat de gebruiker doorheeft dat het een notificatie is. Hij verdwijnt ook vanzelf, zodat het de gebruiker geen extra stap kost om de website te gebruiken.

Hoe heb ik dit gedaan?

Ik heb in de libary een component gemaakt genaamd "Notification.svelte". Deze heb ik geïmporteerd in de page.svelte pagina.

<script>
    import { onMount } from 'svelte';
    let showPopup = false;
    let fadingOut = false;
    let slideIn = false; // Nieuwe variabele voor slide-in effect

    onMount(() => {
      // Toon de popup wanneer de website wordt geladen
      showPopup = true;

      // Wacht kort om de slide-in class toe te passen na het tonen van de popup
      setTimeout(() => {
        slideIn = true;
      }, 10); // 10ms is voldoende om de overgang te triggeren

      // Start een timer om de popup na 3 seconden te laten faden
      setTimeout(() => {
        fadingOut = true;
        slideIn = false; // Schakel de slide-in class uit tijdens het faden
        // Wacht op het einde van de fade-out (500ms) voordat je de popup definitief sluit
        setTimeout(() => {
          showPopup = false;
        }, 500);
      }, 3000);
    });
  </script>

Hadil66 / your-tribe-for-life-squad-page

Ryan sound notification #66