Maison > Questions et réponses > le corps du texte
J'essaie de faire en sorte que l'image d'arrière-plan réduise l'opacité lors du défilement et une fois éloignée de la page de destination, en utilisant le javascript Vanilla pour la réduire à un minimum de 0,5. J'ai essayé d'ajouter Math.max()
dans la fonction de défilement pour le laisser tomber uniquement à 0,5, mais cela a fait que l'image reste à 0,5 pour toutes les pages.
Je souhaite que la page de destination ait toujours une opacité de 1 et que toutes les autres pages aient une opacité de 0,5. Je suis capable d'animer le défilement mais j'ai besoin qu'il s'arrête à 0,5.
const landingHeight = document.getElementById("section-landing").offsetHeight; window.onscroll = function() { const opcFilter = (window.pageYOffset/ landingHeight); document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opcFilter + "), rgba(255, 255, 255, " + opcFilter + ")), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg) no-repeat"; }
body{ margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; scroll-behavior: smooth; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg); background-repeat: no-repeat; background-attachment: fixed !important; background-size: cover !important; background-position: center top !important; } nav{ width: 100%; background: #C1C8D0; overflow:hidden; position: fixed; top:0; } ul{ margin: 0; padding: 0; list-style: none; } li{ float: right; } a{ padding: 5px; width: 130px; display: block; text-align: center; font-weight: bold; color: black; text-decoration: none; } div{ height: 1000px; overflow: scroll; }
<body> <nav> <ul> <li><a href="#section-page2">Page 2</a></li> <li><a href="#section-page1">Page 1</a></li> <li><a href="#section-landing">Landing Page</a></li> </ul> </nav> <div class="section" id="section-landing"> <h1 class="title ">Landing Page</h1> <p> The background image here will have an opacity of 1. As we scroll to the next page, the opacity will transition to 0.5. </p> </div> <div class="section" id="section-page1"> <h1>Page 1</h1> <p> Opacity is now have 0.5 and will stay there for the remaining pages. Scrolling back up to the landing page will set opacity to 1. </p> </div> <div class="section" id="section-page2"> <h1>Page 2</h1> <p> Another page of opacity 0.5 </p> </div> </body>
P粉5584781502024-04-05 12:56:14
Vous devez ajouter Math.min
而不是 Math.max
comme indiqué ci-dessous :
(J'ai aussi ajouté un window.onload
以便在代码片段中运行,但如果您的脚本加载是 defer
ed qui n'est pas obligatoire)
window.onload = () => { const landingHeight = document.getElementById("section-landing").offsetHeight; window.onscroll = () => { const opcFilter = Math.min(0.5, window.pageYOffset / landingHeight); document.body.style.background = `linear-gradient(rgba(255, 255, 255, ${ opcFilter }), rgba(255, 255, 255, ${ opcFilter })), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg) no-repeat`; } }
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; scroll-behavior: smooth; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg); background-repeat: no-repeat; background-attachment: fixed !important; background-size: cover !important; background-position: center top !important; } nav { width: 100%; background: #C1C8D0; overflow: hidden; position: fixed; top: 0; } ul { margin: 0; padding: 0; list-style: none; } li { float: right; } a { padding: 5px; width: 130px; display: block; text-align: center; font-weight: bold; color: black; text-decoration: none; } div { height: 1000px; overflow: scroll; }
Landing Page
The background image here will have an opacity of 1. As we scroll to the next page, the opacity will transition to 0.5.
Page 1
Opacity is now have 0.5 and will stay there for the remaining pages. Scrolling back up to the landing page will set opacity to 1.
Page 2
Another page of opacity 0.5