ayer vi el sitio web https://flare.xyz
Al desplazarse, puede ver que su logotipo transparente se desplaza sobre una imagen, y la imagen en sí también se desplaza, un poco más lento. No tengo idea de cómo se puede hacer esto? ¿Alguien puede darme alguna dirección? ¿Solo con herramientas o código? ¡Gracias de antemano!
Es simple: simplemente mueva el fondo en el desplazamiento
Si desea un efecto de paralaje, intente desplazarse por el factor 0.9 o algo así, hace que el fondo se mueva lentamente
const circle = document.querySelector('.circle') document.addEventListener('scroll', (event) => { circle.style.backgroundPosition = `${window.scrollY}px 0` }) .background { display: block; width: 400px; height: 1000px; background: orange; display: flex; justify-content: center; align-items: center; } .circle { width: 200px; height: 200px; border-radius: 50%; background: repeating-linear-gradient(45deg, white, teal 30%, cyan 6%); } <div class=background> <div class=circle /> </div>¡Muchas gracias Farid Ахмедов! Lo probé en 1 archivo, pero no funciona. ¿Qué hago mal? El siguiente paso es usar una imagen de fondo en lugar de un degradado y usar una imagen con letras transparentes en lugar de un círculo, pero primero tengo que tener esto funcionando :)
<HTML> <HEAD> <style> .background { display: block; width: 400px; height: 1000px; background: orange; display: flex; justify-content: center; align-items: center; } .circle { width: 200px; height: 200px; border-radius: 50%; background: repeating-linear-gradient(45deg, white, teal 30%, cyan 6%); } </STYLE> </HEAD> <BODY> <SCRIPT> const circle = document.querySelector('.circle') document.addEventListener('scroll', (event) => { circle.style.backgroundPosition = '${window.scrollY}px 0' }) </SCRIPT> <div class="background"> <div class="circle" /> </div> </BODY>