Estoy usando este JS y CSS para agregar un efecto de zoom a la imagen del encabezado. Funciona perfectamente en el escritorio.
El problema es que la imagen del héroe móvil no está "llenando" todo el contenedor.
Por lo tanto, necesitaría tener 2 JS diferentes con 2 configuraciones de % diferentes para que funcione tanto en el escritorio como en el móvil.
¿Existe una solución para hacer un script con mis 2 necesidades diferentes que encontrará a continuación según el tamaño de la pantalla? "esta función es para escritorio y esta función es para dispositivos móviles"?
Para el que sabe, estoy usando la función Elementos de GeneratePress para mostrar el encabezado del héroe en todo el sitio.
Aquí está el JS + CSS trabajando para escritorio:
JS
<script> var pagehero = document.querySelector('.page-hero'); function hero_animation(){ pagehero.style.backgroundSize = 100+'%'; pagehero.style.opacity = '1'; } document.onload = hero_animation(); </script>CSS
.page-hero { transition: background-size 1s cubic-bezier(0.1, 0.135, 0.15, 0.86), opacity 1s ease-out 0.1s !important; opacity: 0; background-size: 150% auto; }Aquí está el JS + CSS que necesitaría agregar para dispositivos móviles:
JS
<script> var pagehero = document.querySelector('.page-hero'); function hero_animation(){ pagehero.style.backgroundSize = 200+'%'; pagehero.style.opacity = '1'; } document.onload = hero_animation(); </script>CSS
.page-hero { transition: background-size 1s cubic-bezier(0.1, 0.135, 0.15, 0.86), opacity 1s ease-out 0.1s !important; opacity: 0; background-size: 300% auto; }Gracias por tu ayuda !
Está llamando a la función cuando se carga el documento html/body .
<script> var pagehero = document.querySelector('.page-hero'); function hero_animation(){ pagehero.style.backgroundSize = 100+'%'; pagehero.style.opacity = '1'; } document.onload = hero_animation(); </script>Cámbialo por esto:
<script> var pagehero = document.querySelector('.page-hero'); function hero_animation(){ pagehero.style.backgroundSize = 100+'%'; pagehero.style.opacity = '1'; } document.onload = hero_animation; </script>O esto:
<script> var pagehero = document.querySelector('.page-hero'); function hero_animation(){ pagehero.style.backgroundSize = 100+'%'; pagehero.style.opacity = '1'; } document.onload = function() { hero_animation() }; </script> En segundo lugar, debe cambiar 100/200 a una cadena. JavaScript distingue entre mayúsculas y minúsculas:
pagehero.style.backgroundSize = '100' + '%';O
pagehero.style.backgroundSize = (Number(100).toString()) + '%';