Beiträge von Lukas98

Zitat von b3317133

Wenn es anders als hier aussieht, ist die Einbindung falsch oder es gibt Konflikte mit sonstigen Komponenten.

Das ist ein öffentliches Forum, für private Hilfe siehe Bereich Jobbörse.

Was hat das mit der Jobbörse zu tun, wenn ich einfach nicht das Passwort, was die Seite zur Zeit noch schützt, hier veröffentlichen möchte?

Zitat von b3317133

• Wo/wie genau wird der Code eingebunden?
• Link zur Seite mit dem Code?
• Was genau wird falsch dargestellt?

Alleine für sich scheint der Code zu funktionieren...

Den HTML Code binde ich über das Textmodul von divi ein - css über die css Einstellung des Textmoduls

JS über das Code Modul von Divi

Die Seite ist noch passwortgeschützt, dann dir aber das pw per Nachricht zukommen lassen

Bei mir erscheint der Text immer komplett und verschwindet dann wieder komplett im loop

das soll so nicht sein

Hallo,

ich möchte folgende Codes (HTML,CSS und Js) auf meiner WP Seite einbinden.
Ich benutze das Divi Theme.
Des Weiteren benutze ich ein Child Theme dessen.
Jedoch wird die Textanimation einfach falsch dargestellt, kann mir jemadn behilflich sein ?

HTML

<h1 class="ml6">
  <span class="text-wrapper">
    <span class="letters">Beautiful Questions</span>
  </span>
</h1>


<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

CSS

.ml6 {
  position: relative;
  font-weight: 900;
  font-size: 3.3em;
}


.ml6 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}


.ml6 .letter {
  display: inline-block;
  line-height: 1em;
}

JS

// Wrap every letter in a span
var textWrapper = document.querySelector('.ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");


anime.timeline({loop: true})
  .add({
    targets: '.ml6 .letter',
    translateY: ["1.1em", 0],
    translateZ: 0,
    duration: 750,
    delay: (el, i) => 50 * i
  }).add({
    targets: '.ml6',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });