[Function] Mystic-Scroll-Driven-Animation

[Seijno]

[Function] Mystic-Scroll-Driven-Animation #39

In deze PR zit de mystical scroll driven animatie, het doel was om een creative animatie te maken binnen dit project met behulp van de scroll driven techniek. LET OP: Dit is NIET bedoelt om gemerched te worden, het is bedoeld als idee, de code is niet responsive, performance, PE vriendelijk.

fixed #39

Design

Het design kan gevonden worden in issue #38

Screenshot van resultaat

Desktop

Tablet

Mobile

Wat er is veranderd

HTML

Dit is in het nieuwe component voor de bubbels:

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<section>
  <Hero {items} />
  <Reviews {items} />
  <TicketCarousel {itemCollection} />
  <HeadLine title="How It Works" />
  <HowItWorks {items} />
  <HeadLine title="What We Do" />
  <WhatWeDo {items} />
  <GiftCard items={items[3]} />
  <div class="bubbles1">
    <Bubbles />
  </div>
  <svg
</svg
  >
  <div class="bubbles2">
    <Bubbles />
  </div>
  <svg
  </svg
  >
  <div class="bubbles3">
    <Bubbles />
  </div>
  <svg
</svg
  >
  <div class="bubbles4">
    <Bubbles />
  </div>
  <svg
   </svg
  >
</section>

Hier zitten de SVG's en het nieuwe component in. (Content van de svgs heb ik leeg gemaakt om overzichtelijk te houden)

CSS

  section {
    height: 100%;
    width: 100vw;
  }
  .glas1,
  .glas2,
  .glas3,
  .glas4 {
    position: absolute;
    width: 12rem;
    top: 870%;
  }
  .glas1 {
    left: 0;
  }
  .glas2 {
    left: 18rem;
  }
  .glas3 {
    right: 18rem;
  }
  .glas4 {
    right: 0rem;
  }
  .bubbles1,
  .bubbles2,
  .bubbles3,
  .bubbles4 {
    position: absolute;
    width: 12rem;
    height: 600%;
  }
  .bubbles1 {
    left: 0;
  }
  .bubbles2 {
    left: 18rem;
  }
  .bubbles3 {
    right: 18rem;
  }
  .bubbles4 {
    right: 0;
  }
  svg {
    animation: animate-in-and-out;
    animation-timeline: view();
  }
  @keyframes animate-in-and-out {
    entry 0% {
      opacity: 0;
      transform: translateY(100%);
    }
    entry 100% {
      opacity: 1;
      transform: translateY(0);
    }

    exit 0% {
      opacity: 1;
      transform: translateY(0);
    }
    exit 100% {
      opacity: 0;
      transform: translateY(-100%);
    }
  }

Styling voor de svg's (en view animatie) en plek waar de bubbels mogen komen.

div {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    background: white;
    border-radius: 3rem;
    animation: colorchange forwards;
    animation-timeline: scroll();
  }
  div:nth-child(1) {
    left: 0;
    margin-bottom: 5rem;
  }
  div:nth-child(2) {
    left: 5%;
  }
  div:nth-child(3) {
    left: 10%;
    top: 90%;
  }
  div:nth-child(4) {
    left: 15%;
  }
  div:nth-child(5) {
    left: 20%;
  }
  div:nth-child(6) {
    left: 25%;
  }
  div:nth-child(7) {
    left: 30%;
  }
  div:nth-child(8) {
    left: 35%;
  }
  div:nth-child(9) {
    left: 40%;
  }
  div:nth-child(10) {
    left: 45%;
  }
  div:nth-child(11) {
    left: 50%;
  }
  div:nth-child(12) {
    left: 55%;
  }
  div:nth-child(13) {
    left: 60%;
  }
  div:nth-child(14) {
    left: 65%;
  }
  div:nth-child(15) {
    left: 70%;
  }
  div:nth-child(16) {
    left: 75%;
  }
  div:nth-child(17) {
    left: 80%;
  }
  div:nth-child(18) {
    left: 85%;
  }
  div:nth-child(19) {
    left: 90%;
  }
  div:nth-child(20) {
    left: 95%;
  }
  div:nth-child(21) {
    left: 100%;
  }

  @keyframes colorchange {
    0% {
      background: yellow;
    }
    20% {
      background: green;
    }
    40% {
      background: blue;
    }
    60% {
      background: purple;
    }
    80% {
      background: red;
    }
    100% {
      background: orange;
    }
  }

De scroll animatie voor de kleuren van de bubbels en de horizontale positie van de bubbels per cocktail

JS

  onMount(() => {
    const elements = document.querySelectorAll('div')

    const minTop = 10 
    const maxTop = 126

    // Voeg willekeurige top-waarden toe
    elements.forEach((element) => {
      // Genereer een waarde tussen minTop en maxTop
      const randomTop = Math.floor(Math.random() * (maxTop - minTop + 1)) + minTop
      element.style.top = `${randomTop}%`
    })
  })

Zorgt voor de random hoogtes van de bubbels

Locatie van aangepaste files/url's

• src/lib/components/molecules/bubbles.svelte +
• src/lib/components/pages/home.svelte

Test rapport

Hier is geen testrapport voor gedaan omdat dit geen prioriteit had.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wogo	❌ Failed (Inspect)			Dec 5, 2024 0:36am

[netlify]

✅ Deploy Preview for wogohva ready!

Name	Link
🔨 Latest commit	8d0434c
🔍 Latest deploy log	https://app.netlify.com/sites/wogohva/deploys/67519e649896b90008e9e341
😎 Deploy Preview	https://deploy-preview-41--wogohva.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.