WebSite X5Help Center

 
Guenther E.
Guenther E.
User

Kann man mit einem object einen  de

Autor: Guenther E.
Visitado 98, Followers 2, Compartido 0  

Ist das bei irgendeinem object eingebaut?

Publicado en
3 RESPUESTAS
Daniel W.
Daniel W.
User
Usuario del mes DEUsuario del mes EN

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.

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

Leer más
Publicado en de Daniel W.
Bernhard K.
Bernhard K.
User

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.

Leer más
Publicado en de Bernhard K.
Incomedia
Elisa B.
Incomedia

Guten Tag!

Ich habe Ihren Beitrag als Idee eingestellt, damit ich diese als Anregung melden kann. 

Danke! LG

Leer más
Publicado en de Elisa B.