当从不同位置观看时导致物体的位置或方向看起来改变的效果,例如通过取景器和相机的镜头
我正在制作一个网站,我想集成一个响应鼠标移动的视差效果。一切似乎都可以接受 z 值,这增加了它的深度。 我有两种不同的乐趣...
每当我滚动页面时,视差 div 的额外内容就会开始出现。怎么解决?
这是额外部分的图像: 我尝试了overflow-y;hidden,每当我尝试滚动它时它仍然出现。 这是背景和前景图像的 CSS 代码 #背景{ 最大黑...
我需要在主页的一部分中具有“分层外观”。像下面这样的东西 http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html 特别是从幻灯片 3 到幻灯片 4...
我正在寻找视频视差效果的插件。我有 4 个视频使用我想要的视频视差效果。这可能吗?谁能给我推荐一个插件。
当我在汽车和 obione 周围移动鼠标时,404 错误有点晃动,我真的很喜欢这种效果:P。我将如何重新创建它?你可以在这里找到我正在谈论的内容。 ...
我目前正在构建一个具有多层 PNG 图像的视差滚动效果的部分。 链接:https://albertyhu.github.io/tutorial/content/
我正在尝试创建一个纯CSS视差效果。它在 Firefox (122.0.1) 中运行良好,但在 Chrome (121.0.6167.139) 中运行不佳。 在 Firefox 中,背景图像被缩小,您可以看到
我使用教程在网站上尝试视差,一切正常,除了视差元素内有一个滚动条。身体上没有任何边缘。 我无法通过
我只是想在我的一个网站上使用scrollr。这是我第一次使用这个插件。我看到了这个例子。 基本上我感兴趣的是如何暂停 div 并显示动画。 所以 html ...
我正在尝试在不使用背景图像和背景附件:固定的情况下创建视差效果,因为背景附件:固定在iOS上效果不佳。这是我想出的: 哈...
所以我想让页面的主要内容滚动到我的网站标题上。站点标题由背景图像和其上的一些文本组成。现在的问题是我无法将文本发送到...
我想向我的网站添加一些纯 CSS 视差滚动功能,但我尝试过的所有方法似乎都不起作用。我也在这里寻找答案,但没有任何答案可以回答我的问题......
我有来自background-url的背景图像,当我输入:background-attachment:fixed;时,我的视差适用于该图像。 我怎样才能让背景图像在我
如何通过使用 JavaScript 更新背景位置值来实现 CSS 视差滚动?
在 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>
使用“ngOptimizedImage”时是否可以有“background-attachment:fixed”类型行为?
我正在使用 Angular (v17) 并尝试按照文档实现图像的延迟加载,文档说 “NgOptimizedImage 不直接支持背景图像 css 属性,但它是
我已经用 html 构建了一个移动设备,并希望一旦窗口滚动到此部分,它就会变得粘滞,直到所有内部内容都滚动过去。问题是目前的解决方案确实是
我正在尝试基于此codepen创建视差效果:https://codepen.io/chaobu/pen/qsyhf 然而,在移动设备上,这不起作用。如何让视差效果在移动浏览器上起作用...
为什么 trajAdjust 函数中的 while 循环在参数变为 false 时不退出?
ptFront 变量链接到我的视差螺旋桨板上的 QT 电路。当光电晶体管看到白墙时,值会降至 18000 以下,当它看到除白色以外的任何东西时,值会下降到 18000 以下
我尝试使用CSS创建视差图像。我已经创建了它,但图像未显示完整的 div。我的意思是背景尺寸不包括在内。我怎样才能做到完整呢? 例如,当我应用这个时,图像...
任何人都可以提供一些有关此类(Google Assistant)页面如何工作或如何在 Next.js/React 中实现类似效果的见解吗?我分为三个部分:在第一部分中,用户...