Suchergebnisse

Hmm habe mit purem CSS nicht das Gewünschte gefunden, vielleicht findet das jemand. Mit kleinem Javascript geht es immerhin. https://codepen.io/Oliver7777/pen/ExBBqmV

So hab mal mein Beispiel mit einfachem Javascript zum Laufen gebracht. Es gibt einen Container mit 900px Breite in dem das Logo liegt. https://codepen.io/Oliver7777/pen/wvLLwEW

Ah so funktioniert es. War so frei es in einen Pen zu packen: https://codepen.io/Oliver7777/pen/LYKKxpK Was kann man machen transform: translateX(calc(50vw - 50%)); Wenn das alles in einem kleineren Wrap gepackt ist?

Hi mal wieder ein Pen: https://codepen.io/Oliver7777/pen/RwzzbKO Hmm aber ich sehe grad, dass man den ganzen Bereich hovern kann, ich gucke mir das nochmal an! https://codepen.io/Oliver7777/pen/wvLLwEW Jetzt ist der Hoverbereich kleiner, aber bleibt links.

Hmm habe das noch mal getestet mit Text. <div class="div1"><span>Text</span></div> .div1 span { visibility: hidden; /* geht nicht */ display: none; /* geht nicht */ opacity:0; /* geht nicht */ color:transparent; /* geht als einziges */ } Ich weiß ja nicht, was du noch vorhast, aber wenn du Text...

musst du vor dem schließenden body-tag einfügen (mit <script></script>)!

Ah ok null Plan von Outlook :) Benutze es nicht...

Hmm mal mit Gmail verschickt und 1und1 webmailer geöffnet: Flex gap:20px kennt er nicht!

Achso flex geht nicht?

Da du keine Tabelle eigentlich brauchst, hier eine Vorlage nur mit <div> https://codepen.io/Oliver7777/pen/OJeGrmq

Hmmm bei mir schon, wie hast du den Schnippsel eingebaut?

Eine Notlösung: if (navigator.userAgent.indexOf("Chrome") != -1) { for (let el of document.querySelectorAll(".container > div")) { el.style.animationDelay = "0.5s"; } } Wie schauts denn im Safari aus?

Hmm hab's auch mal lokal getestet. .container > div { animation-delay: 0.5s } So funktioniet es im Chrome, allerdings ohne Verzögerung! Im Firefox ist die Verzögerung da! Echt verhext!

Hast Du einen Link?

Mal in nen Pen kopiert, geht doch wie gewünscht ?? https://codepen.io/Oliver7777/pen/OJeGmyM

Jo passt ja :wink:. Ansonsten wäre es eine komplizierte Formel, die nicht einfach von der Breite des Karussells ausgeht.

Kannst Du nochmal erläutern wie du auf die Werte 1.5 und 3 kommst? perspective = (wSlider3D * 3) + 'px', translateZ = (wSlider3D * 1.5) + 'px';

aspect-ratio:1 sorgt dafür, dass es quadratisch ist!

Hi hab mal nen Pen erstellt: https://codepen.io/Oliver7777/pen/eYwXNYj Musst mit media Queries noch anpassen wie die Schriftgröße ist, damit es im Quadrat noch passt.

Wie bist Du in Berührung mit der Webanimations-API gekommen?