Slider mit Ken Burns Effekt

Hi, anscheinend (ungetestet) hat der Smart Slider 3 diesen Effekt kostenlos an Bord.

Oder du benutzt Custom CSS, in etwa so:

.slider-image {
animation: kenburns 20s ease-in-out infinite;
}

@keyframes kenburns {
0% {
transform: scale(1) translate(0, 0);
}
100% {
transform: scale(1.2) translate(-10px, -10px);
}
}

Du könntest einen Slider bauen (mit einem Plugin deiner Wahl) und dann mittels Browserkonsole die sog. Selektoren ausfindig machen, um die jeweiligen Slides per CSS ansprechen zu können. Bei SS3 wäre das sowas wie div#n2-ss-4 .n2-ss-slider-2 . Statt .slider-image müsstest du dann diesen Selektor benutzen. Das Ganze kannst du z. B. im Customizer als individuelles CSS eintragen. Wenn dir das zu kompliziert ist, dann wirst du dir Hilfe dafür holen müssen. Ich bin nicht in der Lage, das alles hier haarklein aufzuführen, und schon gar nicht, wenn du uns deine URL vorenthältst (was allerdings auch nur etwas nutzen würde, wenn da bereits ein Slider wäre).

Hi @vocaris and @presskopp

Thank you for recommending Smart Slider 3, however the Ken Burns effect is only available in the Pro version:

• https://smartslider.helpscoutdocs.com/article/1780-simple-slider-type#ken-burns-effectpro

We don’t really recommend custom CSS solution, as we are unable to provide help for questions and problems connected to custom CSS, but if you are fine with the solution that @presskopp offered, then you could target the Slide background images with a CSS selector like this:

#n2-ss-44 .n2-ss-slide-background-image picture 

where 44 refers to the ID of the slider:

• https://smartslider.helpscoutdocs.com/article/1955-slider-and-slide-id

Note: If your slider will contain only images, then as an alternative solution what could probably work for you is the Slide background animation feature:

• https://smartslider.helpscoutdocs.com/article/1780-simple-slider-type#background-animation

where we have some options even in the Free version. E.g. with the „Zoom“ animation and a very slow speed (e.g. Super slow 3x or 10x) you could create somewhat of a similar effect to the Ken Burns effect.
( But this will only work if you slide doesn’t have content, as the content will only show up after the background animation has finished. )

Best regards,
Laszlo.

• Diese Antwort wurde vor 2 Monaten, 3 Wochen von Laszlo geändert. Grund: link to docs