hola chicos, soy nuevo en javascript y estoy tratando de descubrir cómo cambiar la imagen de fondo de mi sección mientras desplazo los textos respectivos. actualmente quiero cargar 3 fondos diferentes pero tengo problemas para tratar de averiguarlo. a continuación se muestra el código que estoy usando .do lmk si tiene alguna sugerencia. gracias de antemano .
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>3d model</title> <style> @import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } /* custom webkit scrollbar */ html { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } body { overflow-x: hidden; font-family: 'Krona One', sans-serif; background-color: rgb(0, 0, 0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } canvas { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; } .section { width: 100%; height: 100vh; display: grid; place-items: center; scroll-snap-align: center; user-select: none; } h1 { font-weight: 500; font-size: 5vw; text-transform: uppercase; color: white; line-height: 100%; text-align: center; } h2 { font-weight: 500; font-size: 6vw; text-transform: uppercase; -webkit-text-stroke: 1px white; color: transparent; } </style> </head> <section class="section"> <h1 id="gold">Gold</h1> <h2 id="silver">Silver</h2> <h1 id="blue">Light Blue</h1> </section> </body> </html>Puede usar la propiedad :hover en CSS para agregar estilos solo cuando el mouse esté sobre el elemento HTML específico; y para agregar una imagen puede usar la propiedad CSS background: url(URL_HERE);
Por ejemplo, su ID de gold se puede configurar para mostrar un fondo creando una propiedad de :hover específica como tal:
#gold:hover { background: url(" https://via.placeholder.com/600x200.png/FFFF00/"); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>3d model</title> <style> @import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } /* custom webkit scrollbar */ html { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } body { overflow-x: hidden; font-family: 'Krona One', sans-serif; background-color: rgb(0, 0, 0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } canvas { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; } .section { width: 100%; height: 100vh; display: grid; place-items: center; scroll-snap-align: center; user-select: none; } h1 { font-weight: 500; font-size: 5vw; text-transform: uppercase; color: white; line-height: 100%; text-align: center; } h2 { font-weight: 500; font-size: 6vw; text-transform: uppercase; -webkit-text-stroke: 1px white; color: transparent; } #gold:hover { background: url(" https://via.placeholder.com/600x200.png/FFFF00/"); } #silver:hover { background: url(" https://via.placeholder.com/600x200.png/CCCCCC/"); } #blue:hover { background: url(" https://via.placeholder.com/600x200.png/0000FF/"); } </style> </head> <body> <section class="section"> <h1 id="gold">Gold</h1> <h2 id="silver">Silver</h2> <h1 id="blue">Light Blue</h1> </section> </body> </html>Para cada imagen, deberá proporcionar una clase separada; si no desea este comportamiento, considere usar JavaScript en su lugar para ajustar dinámicamente la imagen de fondo.
Primero necesita obtener el elemento y luego debe establecer la propiedad backgroundImage en ese elemento como
var goldElement = document.getElementById('gold'); goldElement.addEventListener('mouseover'), (event)=> { `goldElement.style. backgroundImage = "url('path_to_image')" ` }Y cambie el fondo a normal cuando el mouse se vaya.
goldElement.addEventListener('mouseleave', (event)=> { `goldElement.style. backgroundImage = "url('')" ` }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>3d model</title> <style> @import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } /* custom webkit scrollbar */ html { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } body { margin:0; padding:0; overflow-x: hidden; font-family: 'Krona One', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } canvas { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; } .section { width: 100%; height: 100vh; display: grid; place-items: center; scroll-snap-align: center; user-select: none; background-color: rgb(0, 0, 0); } h1 { font-weight: 500; font-size: 5vw; text-transform: uppercase; color: white; line-height: 100%; text-align: center; } h2 { font-weight: 500; font-size: 6vw; text-transform: uppercase; -webkit-text-stroke: 1px white; color: transparent; } </style> </head> <body> <section class="section"> <h1 id="gold" onMouseOver="gold()" onMouseOut="leave()">Gold</h1> <h2 id="silver" onMouseOver="silver()" onMouseOut="leave()">Silver</h2> <h1 id="blue" onMouseOver="blue()" onMouseOut="leave()">Light Blue</h1> </section> <script> var sect = document.querySelector('section'); function gold(){ sect.style.background = '#FFD700'; } function silver(){ sect.style.background = '#C0C0C0'; } function blue(){ sect.style.background = '#ADD8E6'; } function leave(){ sect.style.background = '#000000'; } </script> </body> </html>Si desea permanecer en el color que acaba de pasar, elimine la función de abandono del código anterior y también de las etiquetas.