im developing a website in wordpress and i've got a problem that i can't solve by myself. I've made an animation displaying a photos of products on top of the page in the background with a parallax on it. The problem is that i need to block the parallax wrapping on some point. For example, the parallax should stop wrapping at 50%, so the 50% of photos will be still visible after scrolling down. Any ideas how to make it? Im including some css code.
.elementor-12 .elementor-element.elementor-element-5c7dfef:not(.elementor-motion-effects-element-type-background), .elementor-12 .elementor-element.elementor-element-5c7dfef > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
backface-visibility: hidden;
/*cooldown*/
animation: elementor-motion-effects-layer 25s linear infinite 0s;
animation-timing-function: ease-in-out;
min-height: 500px;
/* parallax */
background-attachment: fixed;
transform: none !important;
}
@keyframes elementor-motion-effects-layer {
0% {background-image:url("https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-14-920x518.jpg") , url("https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-4-920x518.jpg")}
25% {background-image:url("https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-4-920x518.jpg") , url("https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-14-920x518.jpg")}
50% {background-image:url("https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-14-920x518.jpg") , url("https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-4-920x518.jpg")}
75% {background-image:url("https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-4-920x518.jpg") , url("https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-14-920x518.jpg")}
100% {background-image:url("https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-14-920x518.jpg") , url("https://wallpaperboat.com/wp-content/uploads/2020/04/aesthetic-moon-wallpaper-1920x1080-4-920x518.jpg")}
}