parallax 相关问题

在 CSS 中，使用 JavaScript，如何将不同的 Y 位置百分比分配给分层背景图像，以便它们随着页面滚动而更新？身体 { 背景图像：你...</desc> <question vote="2"> <p>在 CSS 中，使用 JavaScript，如何将不同的 Y 位置百分比分配给<a href="https://css-tricks.com/css-basics-using-multiple-backgrounds/" rel="nofollow noreferrer">分层背景图像</a>，以便它们随着页面滚动而更新？</p> <pre><code><style> body { background-image: url(img/bg-pattern-01.png), url(img/bg-pattern-02.png), url(img/bg-pattern-03.png); background-position: center 45%, center 50%, center 55%; } </style> </code></pre> <p>因此，在上面的示例中，百分比（45%、50%、55%）不会是静态值，而是受页面垂直滚动位置的动态影响。可能是实际滚动百分比的混合或平均混合。</p> </question> <answer tick="false" vote="0"> <h2>相对于页面顶部和底部的轻松视差滚动</h2> <p><sub>我的问题得到了答案（我已接受），但该贡献者已删除了他们的答案。这是一个有用的答案，它展示了一种可行的可能方法。在查看了这里的其他一些答案后，我能够改进方法并将我的设想放在一起：</sub></p> <p>多层视差滚动背景，可以在任何窗口大小下可靠地显示，并且可以全部包含在 HTML BODY 元素内。（不需要花哨的 DIV 工作。）</p> <p>用于演示的图像资源：</p> <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0RkTWxkLnBuZw==" width="110"/> <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZaMktVLnBuZw==" width="110"/> <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3A3UmdGLmdpZg==" width="60"/> <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3d3Z2M5LnBuZw==" width="110"/> <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0wyWFBhLnBuZw==" width="110"/> <img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzBwMjlpLmdpZg==" width="110"/> <p><sub><a href="https://pixabay.com/videos/fire-embers-glow-hot-camp-fire-45595/" rel="nofollow noreferrer">动画制作</a></sub></p> <p><sub>注意：imgur 目前不支持 WebP，但如果使用，文件大小可以大大减小 - 在我的测试中，WebP 平均约为 PNG 和 GIF 静态背景大小的 8% - 对于那些关心视差背景性能影响的人图片数量。</sub></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Parallax Scroll</title> <link rel="stylesheet" href="css/styles.css"> <style type="text/css"> body{ margin: 0; height: 150vh; /* ensure enough content to allow scrolling */ background-repeat: repeat-x, repeat-x, repeat, /* particle GIF */ repeat-x, repeat-x, no-repeat; /* unscripted */ background-size: 100vw, 100vw, 33vw, /* particle GIF */ 100vw, 100vw, cover; /* unscripted */ background-position: center bottom, /* lay1:btm (nearest) */ center bottom, /* lay2:btm */ center top, /* particle GIF */ center top, /* lay3:top */ center bottom, /* lay3:btm */ center center; /* lay4 (farthest, unscripted, covers page ) */ background-image: url(https://i.stack.imgur.com/DdMld.png), url(https://i.stack.imgur.com/6Z2KU.png), url(https://i.stack.imgur.com/p7RgF.gif), url(https://i.stack.imgur.com/wwgc9.png), url(https://i.stack.imgur.com/L2XPa.png), url(https://i.stack.imgur.com/0p29i.gif); background-blend-mode: lighten, /* gives the foreground crystals a subtle bright transparent effect against the darker ones on lay2 */ normal, /* lay2 darker (more purple) crystals - 'normal' blending is already perfect here */ lighten, /* particle FX layer must use lighten (its background is black, no alpha) */ normal, /* 'multiply' would be alright, but in small browser windows overlap occurs with layer below */ multiply, /* since the bottom layer is very bright, multiply results in a subtle color change when scrolled */ normal /* always 'normal' for the lowest layer in the stack */ } </style> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> </head> <body> <script type="text/javascript"> // adds scrollBottom function | thanks: https://stackoverflow.com/a/30127031 $.fn.scrollBottom = function(scroll){ if(typeof scroll === 'number'){ window.scrollTo(0,$(document).height() - $(window).height() - scroll); return $(document).height() - $(window).height() - scroll; } else { return $(document).height() - $(window).height() - $(window).scrollTop(); } } // defines calcView (main background scrolling function) var calcView = function() { var scrollTop = Math.floor( $(document).scrollTop() ); // dist from elem's top to its topmost visible content var scrollBtm = Math.floor( $(document).scrollBottom() ); // relies on jQuery plugin, defined above // instructs layers to move away from (-amount px) the top or bottom of the page when scrolled // adjust the multiplier (* 0.x) to set the rate of movement relative to the scrolling // perceived distance will be closer with higher values (0.9), and farther with lower values (0.1) $('body').css({ 'background-position' : ` center bottom -${(scrollBtm * 0.9)}px, /* lay1:btm nearest layer (bottom only in this example) */ center bottom -${(scrollBtm * 0.6)}px, /* lay2:btm second nearest layer (bottom only in this example) */ center top -${(scrollTop * 0.3)}px, /* particle GIF */ center top -${(scrollTop * 0.2)}px, /* lay3:top farthest with scripted scrolling, lay3 scroll rate */ center bottom -${(scrollBtm * 0.2)}px, /* lay3:btm farthest with scripted scrolling, lay3 scroll rate */ center center /* farthest layer is unscripted, and always covers the page */ ` }); // to verify scroll distances in the console //console.log( // "scrollTop = " + scrollTop + "px from top" + // "\nscrollBtm = " + scrollBtm + "px from bottom" //); } // binds function to multiple events | thanks: https://stackoverflow.com/a/2534107/2454914 $(document).ready(function(){ // once document is ready, listen for the following... $(document).on('scroll', calcView); // do calcView function if document is scrolled $(window).on('resize', calcView); // do calcView function if window is resized }); </script> </body> </html></code></pre> </div> </div> <p></p> <p>这种方法需要注意的主要事情是使用 <a href="https://api.jquery.com/scrollTop/" rel="nofollow noreferrer">scrollTop</a> 和 <a href="https://stackoverflow.com/a/30127031/2454914">scrollBottom</a> 函数来从页面顶部和底部偏移背景，非常简单。任何给定的感知层（例如 <pre><code>lay3</code></pre>）都可以具有 <em>top</em> 和 <em>bottom</em> 图像。</p> <p>我已将 <em>perceptual</em> 层标记为 <pre><code>lay1</code></pre>、<pre><code>lay2</code></pre> 等，以区别于 CSS 和脚本中的 <em>ordered</em> 层。</p> <p>其中包含一些<a href="https://css-tricks.com/almanac/properties/b/background-blend-mode/" rel="nofollow noreferrer">背景混合模式</a>效果，以说明可以实现的各种结果，对于那些喜欢搞这类事情的人来说。</p> <p>更多详细信息即将推出，但首先请浏览详细注释的代码片段。</p> </answer> </body></html>

javascript css scroll parallax

回答 0 投票 0

使用“ngOptimizedImage”时是否可以有“background-attachment：fixed”类型行为？

我正在使用 Angular (v17) 并尝试按照文档实现图像的延迟加载，文档说 “NgOptimizedImage 不直接支持背景图像 css 属性，但它是

javascript css angular lazy-loading parallax

回答 1 投票 0

如何使元素保持粘性，直到其所有内部内容完全滚动？

我已经用 html 构建了一个移动设备，并希望一旦窗口滚动到此部分，它就会变得粘滞，直到所有内部内容都滚动过去。问题是目前的解决方案确实是

javascript html jquery css parallax

回答 1 投票 0

如何让这种视差效果在移动浏览器上起作用？

我正在尝试基于此codepen创建视差效果：https://codepen.io/chaobu/pen/qsyhf 然而，在移动设备上，这不起作用。如何让视差效果在移动浏览器上起作用...