Kommentare

BeRo schrieb am 09.03.2019 um 22:09 Uhr

[...] auf der Webseite bewegen? [...]

Definiere "bewegen" doch mal genauer. Ich bin sicher dass uns dann dazu was einfällt 😉

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

dieter-greif schrieb am 09.03.2019 um 22:18 Uhr

"bewegen": von links nach rechts und wieder zurück

BilderMacher schrieb am 09.03.2019 um 22:57 Uhr

"sondern eine Art Animation." - kann man ja mittels Animation erstellen. Öffne ein neues Projekt als Animation...

"Je mehr die Menschen wissen, desto weniger müssen sie glauben!"

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Ich kann vieles, darf aber nicht alles.
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

-------------

Hardware / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 CPUs), ~2.3GHz
12288 MB RAM
DirectX 12
 

Intel(R) UHD Graphics (für Import, Verarbeitung, Export)

NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

  • Video deluxe 2016 Premium
  • Video deluxe 2025 Premium
  • Video Pro X 16
  • Photostory Deluxe 2025
  • Samplitude X7 Suite
  • ACID Pro 11
  • Music Maker 2025 Premium
  • MAGIX/XARA Graphic-/Web-Designer

-----------------------------------------------------------------------------------

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.5011
Leistung    Windows Feature Experience Pack 1000.19060.1000.0

------------------------------------------------------------------------------------

Standardbrowser: Mozilla Firefox 131.0.3 (64-Bit)

BeRo schrieb am 10.03.2019 um 00:23 Uhr

Abhängig davon, welche Objektart Du animieren willst, kannst Du die Xara Designer interne Lösung nicht brauchen, weil damit "nur" GIF- oder Flash Animationen erstellt werden.
Da Flash aus den bekannten Gründen sicher nicht infrage kommt bliebe nur noch GIF übrig. 😔

Sehr viel flexibler bist Du, wenn Du die Animation mit einem kleinen CSS Script vornimmst. Dann kannst Du beliebige Objekte (Bilder, Grafiken, Texte, etc.) über den Bildschirm wandern lassen.

In der Demo habe ich das z. B. mit der Skizze eines Pferdes gemacht.

Schau's Dir mal an (klick)

Wenn das passt "verrate" ich Dir den Scriptcode, den Du in max. 5 Minuten eingebaut hast... 😊

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

dieter-greif schrieb am 10.03.2019 um 08:43 Uhr

.

In der Demo habe ich das z. B. mit der Skizze eines Pferdes gemacht.

Schau's Dir mal an (klick)

Wenn das passt "verrate" ich Dir den Scriptcode, den Du in max. 5 Minuten eingebaut hast... 😊

Ja, genau das meinte ich.

 

BeRo schrieb am 10.03.2019 um 12:53 Uhr

[...] genau das meinte ich. [...]

OK, im u. a. Screenshot siehst Du, wie Du den weiter unten geposteten Code in den WD einbauen kannst:

Und hier kommt der CSS Scriptcode + HTML Tag mit den Daten für das animierte Objekt:

<img class="slide-right" src="./index_htm_files/skizze.png" width="210" height="100%" alt="Pferd">
<!-- Zuweisung zur CSS Klasse + Objektquelle mit Größenangabe und Pfad -->

<style>
.slide-right {  /*CSS Klasse für Animationsart und Laufzeit (hier 4 Sekunden)*/
    -webkit-animation: slide-right 4s linear infinite alternate both;
            animation: slide-right 4s linear infinite alternate both;
}
</style>

<style>
/* ----------------------------------------
 * animation slide
 * ----------------------------------------
 */
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0); /*Animation startet links, bei 0px */
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(800px); /*Animation endet rechts, bei 800px*/
            transform: translateX(800px);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(800px);
            transform: translateX(800px);
  }
}
</style>

den o. a. Code übernimmst Du am besten mit copy & paste in den HTML Body des Platzhalters, den du für Dein Projekt angelegt hast.
Natürlich musst Du noch den Dateinamen (und den Pfad) im HTML Tag auf das von Dir benutzte, animierte Objekt anpassen.
Auch die Animations-Laufzeit + Start und Endpunkt müssen noch angepasst werden, damit es in Deine Seite passt.

Sinnvollerweise kopierst Du die Grafik (oder das Bild) für Deine Animation direkt in das Hilfsverzeichnis Deines Projekts. Der WD sorgt dann dafür, dass das Objekt korrekt im Verzeichnis "index_htm_files" abgelegt wird, damit die Pfadangabe "./index_htm_files" nicht zu einem Fehler führt!

Hier kannst Du die lauffähige Projektdatei herunterladen (inkl. Hilfsverzeichnis) und sie ggf. als Muster für Deine Arbeit verwenden.

Der komplette Code ist das Ergebnis eines Codegenerators, den Du hier finden kannst. Da gibt's noch "haufenweise" andere Codebeispiele für CSS gesteuerte Animationen... 😉

Na dann, viel Erfolg 👍

Zuletzt geändert von BeRo am 10.03.2019, 12:59, insgesamt 3-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

dieter-greif schrieb am 10.03.2019 um 14:25 Uhr

Danke sehr, genau dies habe ich gesucht!

Adi-Brugger schrieb am 20.11.2020 um 07:12 Uhr

Vermutlich ist es relativ unmöglich, den Code des Googe Web Designers in dieses Beispiel einzufügen. ;) Ok, dann mach ich das alles von Hand.

Müssen die Keyframes zweimal definiert werden? Für verschiedene Browser?

BeRo schrieb am 20.11.2020 um 10:04 Uhr

@Adi-Brugger

Du postest hier in einem fremden Thread zu einem Thema, das in einem anderen (Deinem) Thread behandelt wurde. Dein Kommentar sorgt hier also ein bisschen für Verwirrung, weil keine Mensch weiß, worauf sich Deine Info- und Frage bezieht. 😕

Deine Frage...

[...] Müssen die Keyframes zweimal definiert werden? Für verschiedene Browser?

Kann man mit "nein" beantworten. Die Keyframes arbeiten unabhängig vom jeweils eingesetzten Browser.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓