Wie erstelle ich einen rotierenden Titel?

BilderMacher schrieb am 05.02.2022 um 12:08 Uhr

Hallo,

du könntest eine Animation (GIF) erstellen, damit dein Titel rotiert.

Dazu sollte auch im Handbuch etwas stehen.

BilderMacher schrieb am 05.02.2022 um 12:35 Uhr

Wobei du auch auf die "Web-Animationen..." zurückgreifen kannst.

Melodiesoft schrieb am 05.02.2022 um 12:51 Uhr

Wobei du auch auf die "Web-Animationen..." zurückgreifen kannst.

...das habe ich auf meinen Webseiten bereits angewendet. Aber ich dachte da an einen Titel der sich horizontal um sich selbst dreht. Trotzdem vielen Dank. Werde mal weitersuchen. LG und bleiben Sie gesund.

marboe schrieb am 05.02.2022 um 13:19 Uhr

ich dachte da an einen Titel der sich horizontal um sich selbst dreht.

Das wäre dann eine Slideshow.

Du könntest ein Bild deines Textes machen und dieses per zB Wowslider animieren. Gruß Marboe

BilderMacher schrieb am 05.02.2022 um 13:19 Uhr

3D-Maker-Animation vielleicht?

Melodiesoft schrieb am 05.02.2022 um 13:25 Uhr

ich dachte da an einen Titel der sich horizontal um sich selbst dreht.

Das wäre dann eine Slideshow.

Du könntest ein Bild deines Textes machen und dieses per zB Wowslider animieren. Gruß Marboe

...den werde ich sofort versuchen - sieht sehr vielversprechend aus. Genau so hatte ich mir das vorgestellt. Danke

Melodiesoft schrieb am 07.02.2022 um 13:11 Uhr

ich dachte da an einen Titel der sich horizontal um sich selbst dreht.

Das wäre dann eine Slideshow.

Du könntest ein Bild deines Textes machen und dieses per zB Wowslider animieren. Gruß Marboe

..inzwischen habe ich ein Ergebnis zu vermelden. Siehe hier: https://www.melodiesoft-garbsen.de/me-ga/xbox/index.html Doch wie bekomme ich den Link in meiner Webseite untergebracht?

marboe schrieb am 07.02.2022 um 13:26 Uhr

Fein. Du kannst entweder der Anleitung von Wowslider zum Einbau folgen, oder du suchst hier im Forum. Da gab es schon ein zwei Beiträge dazu. Am einfachsten geht es per iframe.
Beachte, dass du für diverse Größen des Sliders für entsprechende Varianten auch getrennte Slider und getrennte iframe-Codes benötigst. Gruß Marboe

Robbin schrieb am 07.02.2022 um 21:15 Uhr

@Melodiesoft

ich dachte da an einen Titel der sich horizontal um sich selbst dreht.

Schau dir mal die Demo an, die ich hier angelegt habe.
Wenn es das ist, was du gesucht hast, dann kannst du das mit dem WOW Slider leider nicht machen.
Mit ein paar Zeilen CSS ist das aber direkt im Web Designer in 5 Minuten machbar... 😉

Melodiesoft schrieb am 08.02.2022 um 09:23 Uhr

@Melodiesoft

ich dachte da an einen Titel der sich horizontal um sich selbst dreht.

Schau dir mal die Demo an, die ich hier angelegt habe.
Wenn es das ist, was du gesucht hast, dann kannst du das mit dem WOW Slider leider nicht machen.
Mit ein paar Zeilen CSS ist das aber direkt im Web Designer in 5 Minuten machbar... 😉

...danke für den Tipp, doch mit CSS kenne ich mich gar nicht aus. Das, was ich da mit Wowslider

gemacht habe: https://www.melodiesoft-garbsen.de/me-ga/xbox/index.html entspricht meinen Vorstellungen.

LG

Robbin schrieb am 08.02.2022 um 10:02 Uhr

@Melodiesoft

was ich da mit Wowslider gemacht habe ... entspricht meinen Vorstellungen.

Bestens, dann musst du nichts weiter tun. 😊
Für alle anderen, die eine Grafik einbauen möchten, die sich um sich selbst dreht, hier die Details:

verbesserte-, einfachere Version vom 08.02.2022, 20:52 h

Der u. a. CSS Code kann mit copy & paste übernommen werden

<style>
.Logo { animation: perspect 4s infinite linear }
@keyframes perspect {
   0% {transform:perspective(600px) rotateY(0deg)}
   25% {transform:perspective(600px) rotateY(-90deg)}
   50% {transform:perspective(600px) rotateY(-180deg)}
   75% {transform:perspective(600px) rotateY(-270deg)}
   100% {transform:perspective(600px) rotateY(-360deg)}
}
</style>

Die im Code angelegte Klasse ".Logo" kann übernommen werden wenn der eigenen Grafik der Name "Logo" (HTMLclass=Logo) als CSS Klasse zugewiesen wird. Dabei sollte der Klassenname für alle identischen Grafiken, die ggf. in den Varianten angelegt werden 1:1 übernommen werden.
Für die Smartphone Variante muss die Grafik (Text Grafik) mit einem alternativen Namen ein 2. Mal angelegt werden, z. B. "Logo_s". Sie sollte aber in jedem Fall die gleiche Klassen Zuweisung (HTMLclass=Logo) als Namen bekommen.

Wenn Fragen dazu auftauchen, einfach wieder melden...

Melodiesoft schrieb am 09.02.2022 um 10:53 Uhr

@Melodiesoft

was ich da mit Wowslider gemacht habe ... entspricht meinen Vorstellungen.

Bestens, dann musst du nichts weiter tun. 😊
Für alle anderen, die eine Grafik einbauen möchten, die sich um sich selbst dreht, hier die Details:

verbesserte-, einfachere Version vom 08.02.2022, 20:52 h

Der u. a. CSS Code kann mit copy & paste übernommen werden
<style>
.Logo { animation: perspect 4s infinite linear }
@keyframes perspect {
   0% {transform:perspective(600px) rotateY(0deg)}
   25% {transform:perspective(600px) rotateY(-90deg)}
   50% {transform:perspective(600px) rotateY(-180deg)}
   75% {transform:perspective(600px) rotateY(-270deg)}
   100% {transform:perspective(600px) rotateY(-360deg)}
}
</style>
Die im Code angelegte Klasse ".Logo" kann übernommen werden wenn der eigenen Grafik der Name "Logo" (HTMLclass=Logo) als CSS Klasse zugewiesen wird. Dabei sollte der Klassenname für alle identischen Grafiken, die ggf. in den Varianten angelegt werden 1:1 übernommen werden.
Für die Smartphone Variante muss die Grafik (Text Grafik) mit einem alternativen Namen ein 2. Mal angelegt werden, z. B. "Logo_s". Sie sollte aber in jedem Fall die gleiche Klassen Zuweisung (HTMLclass=Logo) als Namen bekommen.

Wenn Fragen dazu auftauchen, einfach wieder melden...

Wow...das war mal ein superspitzenmäßiger Tipp, für den ich mich auf diesem Wege bedanken möchte: Dankeschön. Hier das Ergebnis: https://www.melodiesoft-garbsen.de/me-ga/neuheiten/index.html