Wie kann ich einen Welleneffekt in meine Hero Sektion einbauen?

Es kommen immer wieder Grafiker oder gleich Kunden zu mir die wilde Effekte auf ihre Webseite eingebaut haben wollen. Für viele diese Effekte gibts gute Alternative und manchmal muss ich auch nein sagen – so ergings mir mit Welleneffekten die natürlich aussehen sollen. Oft sagte ich dazu nein 🙂

Ab jetzt kann ich ja sagen und ihr auch. Ich habe nämlich eine JQuery Bibliothek gefunden mit der ihr diesen Welleneffekt in eure Webseite eingebauen können und ja man kann es selbst konfigurieren und die Wellen reagieren auf eure Mauszeiger

Video

JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
    <script src="script.js"></script>

HTML

<main class="hero">
      <div class="hero_foto"></div>
      <div class="hero_verlauf"></div>

      <h1 class="hero_titel">Stille Wasser,<br /><em>gründen</em> Tief.</h1>
    </main>

CSS

:root {
  --tinte: #0a1929;
  --nebel: #e8f4ff;
  --akzent: #6ad7c5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--tinte);
  color: var(--nebel);
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}

.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
}

.hero_foto,
.hero_verlauf {
  position: absolute;
  inset: 0;
}

/* Foto-URL unten tauschen fuer eigenes Bild */
.hero_foto {
  z-index: 0;
  background-color: var(--tinte);
  background-image: url("https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=2400&q=80&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
}

.hero_verlauf {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(10, 25, 41, 0.78) 0%, rgba(10, 25, 41, 0.48) 36%, rgba(10, 25, 41, 0.08) 62%, rgba(10, 25, 41, 0) 100%);
}

.hero_titel {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 0 1.5rem;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 8.5vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--nebel);
  margin: 0;
  max-width: 14ch;
}

.hero_titel em {
  font-style: italic;
  color: var(--akzent);
}

Javascript

$(function () {
  $(".hero_foto").ripples({
    resolution: 512,
    dropRadius: 10,
    perturbance: 0.085,
    interactive: true,
  });
});

Link

Hier findet ihr die jQuery Ripple Bibliothek und findet auch weitere Anleitungen