Pregunta sobre OnePress de Wordpress:

Efecto de Ken Burns en las imágenes de fondo del héroe

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

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *