Un usuario preguntó 👇
Este es un gran tema y nunca he visto un tema de una página que me guste. Si bien aprecio la introducción de características como las muchas opciones cambiantes de animación de Texto de héroe y Navegación de división, creo que alguna animación genial para la Imagen / Fondo de héroe sería de más valor para el tema. Siempre admiro el efecto Ken Burns de lo que se puede lograr con solo unas pocas imágenes (ningún video excelente): Ver jqueryscript.net/demo/jQuery-Extension-To-Add-Ken-Burns-Effect-To-Bootstrap-Carousel/ o slippry.com/examples/pictures/
Probablemente mis habilidades no sean suficientes para incluir un tema de este tipo en su hijo.
Autor del tema
(@famethemes)
Hace 1 año, 9 meses
Hola @chrisfo
Gracias por la sugerencia. Sin embargo, todavía no admitimos esta función. Tendremos en cuenta 🙂
¡Que tengas un buen día!
(@chrisfo)
Hace 1 año, 9 meses
Busqué de nuevo y encontré algunos ejemplos de un código CSS haciendo esto muy bien:
Ken Burns solo tiene efecto con la SEC (gira en sentido antihorario mientras se aleja)
Efecto de pantalla completa de Ken Burns sin js (acercarse)
Efecto Ken Burns – CSS puro (panorámica y alejamiento)
Ken Burns de efecto suave usando la propiedad de transferencia (disminuir el zoom)
Encontré el último que encajaba y adapté el código corto en estilo Onepress Child.css:
/* Hero Images Smooth Ken Burns Effect Using the CSS Transition Property: https://codepen.io/Silverink/pen/gbGKoZ
*/
.backstretch img {
animation:move 9s ease infinite; /* Change this to alternate to stop the loop. */
-ms-animation:move 9s ease infinite;
-webkit-animation:move 9s ease infinite;
-0-animation:move 9s ease infinite;
-moz-animation:move 9s ease infinite;
position: absolute;
left:-150px;
top:-150px;
}Parece que funciona bien hasta ahora 🙂 Parece que algo necesita mucho tiempo de CPU para molestarse un poco … especialmente en los teléfonos inteligentes …
Esta respuesta fue modificada hace 1 año, 9 meses.
(@chrisfo)
Hace 1 año, 9 meses
Quiero evitar problemas de rendimiento restringiendo estas pantallas:
@media screen and (max-width: 1281px) and (orientation: landscape) {
...
}(@chrisfo)
Hace 1 año, 6 meses
última corrección de errores de publicación, use:
min-width
Esta respuesta fue modificada hace 1 año, 6 meses.
¿Solucionó tu problema??
0 / 0