Front-end: escalar el texto como fondo al tamaño de la ventana.

Tengo este fondo que he creado, el grande “HOME”. No hay imagen de fondo, solo una etiqueta p:

html

<main id="app homepage">

      <p class="bg_home noselect " id="bg_home">HOME</p>

con este estilo:

css

.bg_home {

  color: var(--main-bg-color);

  position: absolute;

  top: 350px;

  left: 10px;

  -webkit-text-stroke: 1px var(--text-stoke);

  z-index: -1;

  transform: scale(1, 1.2);

  font-size: 42vw;

}

Como puede ver, para obtener este aspecto he tenido que aumentar su tamaño y me gustaría que mantuviera su altura para siempre superponer un poco el área marrón.

Pensé que podría usar algo de javascript para ajustarlo perfectamente según el tamaño de la ventana,
“`javascript vanilla
if(window.addEventListener) {
window.addEventListener(‘resize’, function() {
console.log(‘addEventListener – resize2’);
let x = 1.3;

x = window.innerHeight; if (window.innerWidth <= 1300){ x=1.9; } else if (window.innerWidth <= 1100){ x=1.9999999; } document.getElementById('bg_home').style.transform = `scale(1,${x})`;

}, true);

}
“`
Pero siento que estoy realmente atascado aquí tratando de ajustarlo según ‘window.innerHeight’ o ‘window.InnerWidth’ parece ser realmente difícil, y honestamente siento que mi solución javascript sería demasiado pesada. También siento que me falta algo básico y lo siento mucho si es el caso.

¿Podría alguien por favor guiarme hacia una posible respuesta, de lo contrario probablemente tendré que tomar una captura de pantalla de mi fondo y usarla como una imagen?

davy.ai

June 1, 2023 at 8:04 pm

Posible solución para mantener la altura escalada del fondo

Una posible solución para mantener la altura escalada del fondo es usar una combinación de CSS y JavaScript. Aquí están los pasos:

Establecer la propiedad height del elemento main en 100vh para que ocupe toda la altura de la ventana gráfica.

main {
  height: 100vh;
}

Establecer la propiedad min-height del elemento p en un valor mayor o igual a su altura original.

.bg_home {
  /* ... */
  min-height: 200px;
}

Usar JavaScript para calcular la diferencia entre la altura del elemento main y la altura del elemento p.

const main = document.querySelector('main');
const bgHome = document.querySelector('.bg_home');

const heightDiff = main.offsetHeight - bgHome.offsetHeight;

Usar JavaScript para actualizar la propiedad transform del elemento p cuando se cambia el tamaño de la ventana. El valor scaleY se calcula usando la diferencia de altura y la altura actual del elemento main.

window.addEventListener('resize', () => {
  const scaleY = (main.offsetHeight - heightDiff) / bgHome.offsetHeight;
  bgHome.style.transform = `scale(1, ${scaleY})`;
});

Este enfoque asegurará que el elemento p siempre esté escalado para llenar el elemento main verticalmente, manteniendo sus proporciones originales. Es posible que necesite ajustar el valor min-height y la lógica de escalado para obtener el efecto deseado.

Answer

davy.ai

June 1, 2023 at 8:04 pm
Posible solución para mantener la altura escalada del fondo

Una posible solución para mantener la altura escalada del fondo es usar una combinación de CSS y JavaScript. Aquí están los pasos:
1. Establecer la propiedad height del elemento main en 100vh para que ocupe toda la altura de la ventana gráfica.
```
main {
  height: 100vh;
}
```
1. Establecer la propiedad min-height del elemento p en un valor mayor o igual a su altura original.
```
.bg_home {
  /* ... */
  min-height: 200px;
}
```
1. Usar JavaScript para calcular la diferencia entre la altura del elemento main y la altura del elemento p.
```
const main = document.querySelector('main');
const bgHome = document.querySelector('.bg_home');

const heightDiff = main.offsetHeight - bgHome.offsetHeight;
```
1. Usar JavaScript para actualizar la propiedad transform del elemento p cuando se cambia el tamaño de la ventana. El valor scaleY se calcula usando la diferencia de altura y la altura actual del elemento main.
```
window.addEventListener('resize', () => {
  const scaleY = (main.offsetHeight - heightDiff) / bgHome.offsetHeight;
  bgHome.style.transform = `scale(1, ${scaleY})`;
});
```
Este enfoque asegurará que el elemento p siempre esté escalado para llenar el elemento main verticalmente, manteniendo sus proporciones originales. Es posible que necesite ajustar el valor min-height y la lógica de escalado para obtener el efecto deseado.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Front-end: escalar el texto como fondo al tamaño de la ventana.

Answer

davy.ai

Posible solución para mantener la altura escalada del fondo