Html Einbettung vs. Websitebaukasten

[MoistPony]

Hi,
ich bin relativ neu beim Websitebau und möchte mir ein Online Portfolio zur Bewerbung bauen. Ich benutze dafür Figma und Dora. Ich hab nun einen html Code eingebettet, der ein Highlight dem Mauscusor folgen lässt, allerdings hat das zur Folge, dass innerhaltb dieses Bereiches keine Mausfunktionen, also Scrollen, Klicken oder Hovern mehr funktionieren. Ich gehe davon aus, dass das daran liegt, dass der eingebettete Code nicht wirklich mit dem Baukastenelementen der Website interagiert und eben dieser Code das Maussignal vollständig abfängt. Hat jemand eine Idee, wie ich das Maussignal im Code wieder freigeben kann, oder noch besser nicht abfange, sondern nur kopiere?

Hier ist der Html code:

<div id="blob"></div>
<div id="blur"></div>

<style>
  body {
  background-color: black;
  height: 100vh;
  margin: 0rem;
  overflow: hidden;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }
 
  50% {
    scale: 1 1.5;
  }
 
  to {
    rotate: 360deg;
  }
}

#blob {
  background-color: white;
  height: 34vmax;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: linear-gradient(to right, aquamarine, teal);
  animation: rotate 30s infinite;
  opacity: 0.3;
}

#blur {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
  backdrop-filter: blur(12vmax);
}
</style>

<script>
  /* -- Glow effect -- */

const blob = document.getElementById("blob");

window.onpointermove = event => {
  const { clientX, clientY } = event;
 
  blob.animate({
    left: `${clientX}px`,
    top: `${clientY}px`
  }, { duration: 3000, fill: "forwards" });
}
</script>

(Habe ich aus einem codepen zusammengeschmissen: https://codepen.io/Hyperplexed/pen/KKBjvbG)

Anbei noch ein paar Bilder als kontext. "Embed 1" ist die unterste Ebene, welche den Code enthält, also liegt es zumindest nicht an der Lage der Ebene. Hoverelemente, wie die Buttons funktionieren nicht mehr und Scrollen/ Klicken wie gesagt auch nicht.
Bin für jede Hilfe dankbar

Beste Grüße,
MoistPony

 

[Sempervivum]

Ich gehe davon aus, dass das daran liegt, dass der eingebettete Code nicht wirklich mit dem Baukastenelementen der Website interagiert und eben dieser Code das Maussignal vollständig abfängt.

Da denkst Du schon in die richtige Richtung. Die beiden Elemente #blob und #blur überdecken alles andere und die Mausaktionen gelangen nicht an die übrigen Elemente. Du kannst sie jedoch durch "pointer-events: none:" für Mausaktionen durchlässig machen:

        #blob,
        #blur {
            pointer-events: none;
        }

 

[MoistPony]

Du kannst sie jedoch durch "pointer-events: none:" für Mausaktionen durchlässig machen:
#blob,
#blur {
pointer-events: none;
}

Hi, danke für den Vorschlag. Die Maßnahme scheint leider nichts zu bringen. Die Seite reagiert leider weiterhin nicht auf auf sämtliche Mausaktionen, auch nachem ich den vorgeschlagenen Code entsprechend eingefügt habe :|.

 

[Sempervivum]

Ich hatte das nicht vollständig getestet, sondern nur im Seiteninspektor eingetragen, um sicher zu gehen, dass dadurch die Effekte beim Bewegen der Maus nicht verloren gehen. Wenn es so nicht geht, dann poste doch mal den vollständigen Code, wenn er nicht zu umfangreich ist, damit ich es untersuchen kann.

 

[MoistPony]

Hi,
es ist der vollständige Code. Ich benutze den Dora Baukasten, da ich mich mit HTML kaum auskenne. Die Seite lässt es zu in verschiedenen Ebenen html Code einzubetten um spezielle Effekte etc. zu erreichen. Dadurch kann es sich natürlich bei dem Problem um einen Fehler von Dora handeln, allerdings gibts da leider noch nicht so viel hilfe, daher hatte ich auf eine Lösung im Code gehofft. Hier nochmal der Code nach deinem Vorschlag:
<div id="blob"></div>
<div id="blur"></div>

<style> 
  body {
  background-color: black;
  height: 100vh;
  margin: 0rem;
  overflow: hidden;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }
 
  50% {
    scale: 1 1.2;
  }
 
  to {
    rotate: 360deg;
  }
}

#blob {
  pointer-evenbts: none;
  background-color: white;
  height: 34vmax;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: linear-gradient(to right, aquamarine, teal);
  animation: rotate 35s infinite;
  opacity: 0.4;
}

#blur {
  pointer-events: none;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
  backdrop-filter: blur(12vmax);
}
 

 
</style>

<script>
  /* -- Glow effect -- */
 
const blob = document.getElementById("blob");

window.onpointermove = event => {
  const { clientX, clientY } = event;
 
  blob.animate({
    left: `${clientX}px`,
    top: `${clientY}px`
  }, { duration: 3000, fill: "forwards" });
}
</script>

Vielen Dank für dein Interesse

 

[Sempervivum]

OK, anscheinend kannst Du in dem Baukasten benutzerspezifischen Code einbauen. Ich werde das weiter untersuchen.
Oder hast Du es online, das wäre am besten, wenn Du die URL posten könntest?

 

[MoistPony]

Dankesehr. Hier wäre die URL: https://rieke-design.dora.run/
Die Website läuft immer direkt über Dora, deshalb bin ich mir nicht sicher, ob die überhaupt über html läuft oder evtl. nur von deren Server gestreamt wird...

 

[Sempervivum]

Danke, gut dass Du den Link gepostet hast.
Das HTML und CSS ist ein einem iFrame eingebettet und ich sehe keine Möglichkeit, die Animation zu erhalten und gleichzeitig den Rest bedienbar zu lassen. Ich kann zwar den Eltern-Container mit pointer-event: none; versehen aber das wirkt dann auch auf die Elemente der Animation und sie funktioniert nicht mehr.
Vielleicht hat da noch jemand anders eine Idee.

 

[MoistPony]

OK, evntuell muss ich dann von solchen animationen ablassen. Vielen Dank, dass dich da so rein gehängt hast