Kann man mit einem object einen 
Auteur : Guenther E.
Visité 96,
Followers 2,
Partagé 0
Ist das bei irgendeinem object eingebaut?
Posté le

Vielleicht wissen die Incomedia-Mitarbeiter, ob ein kostenpflichtiges Objekte den Effekt enthält.
Beim Objekt "Galerie" ist der Ken-Burns-Effekt offenbar nicht enthalten.
Aber mit HTML-, CSS- und Javascript-Code im Objekt "HTML Code" ist der Effekt möglich, siehe
A) Meine Testseite >>https://findelinks.de/123test-aufklappmenue-2/ken-burns-effekt.html
B) Webseite mit dem benötigten Code >>https://codepen.io/planetgrafix/pen/AGmXQK
----- In WebSite X5 -----
HTML-Code-Objekt
HTML-Code: Hier zuerst den Code von "HTML" einfügen, dann den Code von "JS".
Erweitert: Hier den Code von "CSS" einfügen.
--------------------------
Das sagt KI dazu, per Html feld und externen code
<style>
/* Container für das Bild */
.ken-burns-container {
width: 100%;
height: 400px; /* Standardhöhe für Desktop */
overflow: hidden;
position: relative;
}
/* Das Bild-Element */
.ken-burns-image {
width: 100%;
height: 100%;
background-image: url('URL_ZU_IHREM_BILD.jpg'); /* HIER IHREN BILD-LINK EINFÜGEN */
background-size: cover;
background-position: center;
/* Animation: 15s Dauer, sanfter Übergang, unendlich, Richtung wechselnd */
animation: kenburns 15s linear infinite alternate;
}
/* Die eigentliche Animation */
@keyframes kenburns {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
/* Responsive Anpassung für Smartphones */
@media (max-width: 600px) {
.ken-burns-container {
height: 250px; /* Reduzierte Höhe für mobile Geräte */
}
}
</style>
<div class="ken-burns-container">
<div class="ken-burns-image"></div>
</div>
Und eine kurze Erklärung dazu, versuche es, ich hatte keine zeit zum testen:
Bild-URL: Ersetzen Sie URL_ZU_IHREM_BILD.jpg durch den Pfad zu Ihrem Bild. Wenn Sie das Bild in WebSite X5 hochgeladen haben, können Sie es im Web-Verzeichnis finden oder es vorab auf Ihren Webserver hochladen und den direkten Link einfügen.
Größe: Passen Sie den Wert height: 400px; im Container an Ihre gewünschte Bildhöhe an.
Anpassung: Mit scale(1.2) bestimmen Sie, wie stark der Zoom sein soll. Ein Wert von 1.1 ist eher dezent, 1.5 wirkt sehr stark. Der Wert 15s steuert die Dauer des Zoom-Vorgangs.
Diese Methode ist sehr sauber, da sie das Bild nicht als statisches Element einbindet, sondern als Hintergrund, der vom Browser flüssig skaliert wird, ohne die Seite unnötig zu verlangsamen.
Guten Tag!
Ich habe Ihren Beitrag als Idee eingestellt, damit ich diese als Anregung melden kann.
Danke! LG