Estoy tratando de crear un efecto de fondo de paralaje con un texto oculto. Me enfrento a dos problemas:
El efecto de paralaje no funciona en absoluto cuando background-size: contain; Está establecido.
El efecto de paralaje, por la razón que sea, no funciona fuera de Codepen: cuando se escala completamente en cromo, el efecto desaparece y se comporta exactamente como si el fondo estuviera pegado al mouse... No estoy seguro de si se trata de un problema de escala. o problema con Chrome y mi método.
Aquí está mi código:
(function() { // Add event listener document.addEventListener("mousemove", parallax); const elem = document.querySelector("#text"); // Magic happens here function parallax(e) { let _w = window.innerWidth / 2; let _h = window.innerHeight / 2; let _mouseX = e.clientX; let _mouseY = e.clientY; let _depth1 = `${50 - (_mouseX - _w) * 0.01}% ${50 - (_mouseY - _h) * 0.01}%`; let _depth2 = `${50 - (_mouseX - _w) * 0.02}% ${50 - (_mouseY - _h) * 0.02}%`; let _depth3 = `${50 - (_mouseX - _w) * 0.06}% ${50 - (_mouseY - _h) * 0.06}%`; let x = `${_depth3}, ${_depth2}, ${_depth1}`; console.log(x); elem.style.backgroundPosition = x; } })(); .background { background: #000; } #text { background: url("https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1957&q=80"); /*background-size: contain;*/ -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 8vw; } <body class="background"> <h1 id="text"><b>Galaxy</b></h1> </body>La solución resultó ser que depende del tamaño de la imagen, que parece debe ser más pequeña que el contenedor (en este caso, toda la pantalla/cuerpo) para que esto funcione.
La imagen que estaba usando en el codepen anterior era diferente a la imagen que estaba usando en mi instancia local. Para que se comporte correctamente, simplemente apliqué background-size: 50%; a mi imagen de fondo local mucho más grande para que se comporte más como la imagen de fondo más pequeña utilizada en el codepen.