Archived topic
Issue with Ken Burns effect (Page hero)
9 replies · Started by Hans-Gerd on March 24, 2021
Hello,
we have an issue in Page Hero: we have created here at additional CSS rules for the Ken Burns effect. This is also basically implemented well.
However, in the video you can see that the image runs out of the container. Usually the effect is applied directly to the image. But we wanted to use the nice effect that the image merges with the content, i.e. in that case the image should be slightly visible under the menu.
Here the settings (Elements): 
/* additional margin */
@media (min-width: 1024px) {
.home div#page {
margin-top: 40px;
}
}
/* Ken Burns Effekt only on frontpage */
.kopfbild {
position: relative;
overflow: hidden;
/*min-width: 100%;
min-height: 100%;
width: 100%; */
/* Add infinite to loop. */
animation: move 35s ease;
-ms-animation: move 35s ease;
-webkit-animation: move 35s ease;
-animation: move 35s ease;
-moz-animation: move 35s ease;
z-index:-1;
}
@keyframes move {
0% {
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
transform: scale(1.0);
-ms-transform: scale(1.0);
/* IE 9 */
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
50% {
transform: scale(1.1);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari and Chrome */
-o-transform: scale(1.1);
/* Opera */
-moz-transform: scale(1.1);
/* Firefox */
}
100% {
transform: scale(1.0);
-ms-transform: scale(1.0);
/* IE 9 */
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
}
Thanks a lot for support
Best regards,
Hans-Gerd
Hi there,
It's because you're scaling the container rather than the background-image.
The Ken Burns effect is normally applied to a <img> wrapped by a container w/ overflow: hidden;.
Your "move" animation should be animating the background-size and background-position property if you want to achieve the same effect on images added as background-image.
Note: you could try adding body { overflow-x:hidden; } but I'm not sure how well it works. Plus if you have position:sticky on some of your elements, that will not work.
Hi,
thank you very much for the prompt answer. I will check the various possible solutions and then get back to you.
Best regards,
Hans-Gerd
No problem. Let us know how it goes.
Hi,
sorry, but unfortunately I could not solve the issue. I specify the image as custom image in the elements as head element (page hero). This specifies the image as a property of the container (background-image) and not as its own element. Thus, as far as I can see, I cannot assign this effect to this element. I also tried to define the image as a standalone element, but then I can't merge the image with the menu anymore.
Thanks a lot for advice.
Best regards,
Hans-Gerd
Hi there,
you can output the <img> within the page-hero container using this template tag:
{{custom_field.thumbnail_id}}
You will need to absolutely position it etc. to move it behind the content.
Hi,
thank you very much for the prompt answer. I will check this solution and then get back to you.
Best regards,
Hans-Gerd
You're welcome
Hi,
thanks a lot for advice.
We decided not to use the Ken Burns effect on the main page, but only on the post pages. This is how it works now:
/* Ken Burns Effekt auf Beitragsseiten */
.featured-image.page-header-image-single {
overflow: hidden;
}
/* hier die Regeln für das Bild */
.featured-image.page-header-image-single img {
min-width: 100%;
min-height: 100%;
/* Add infinite to loop. */
animation: move 10s ease;
-ms-animation: move 15s ease;
-webkit-animation: move 15s ease;
-animation: move 15s ease;
-moz-animation: move 15s ease;
position: relative;
width: 100%;
}
@keyframes move {
0% {
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
transform: scale(1.0);
-ms-transform: scale(1.0);
/* IE 9 */
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
50% {
transform: scale(1.1);
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari and Chrome */
-o-transform: scale(1.1);
/* Opera */
-moz-transform: scale(1.1);
/* Firefox */
}
100% {
transform: scale(1.0);
-ms-transform: scale(1.0);
/* IE 9 */
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
}
Best regards,
Hans-Gerd
Glad to hear you found a solution!
