Tag: 视差

jQuery – parallax – 正确更新背景位置: 目标这是对此问题的后续问题。我正在尝试创建一个视差滚动效果。视差容器的实现方式如下：当容器滚动到视图中并在离开视图时停止时，视差效果成功启动。问题不幸的是，当我将视差容器放在页面上时，效果开始于错误位置的背景位置。我理解为什么会出现这个问题，但我不确定如何解决它。我需要的基本上是这样的：一旦视差容器滚动到视图中就开始效果：工作。离开视图后停止效果：工作。仅将背景位置移动到已进入视图的滚动距离。不是相对于页面顶部滚动的距离。在这里摆弄对于页面下方的视差容器：您可以看到图像的边缘。我正在努力寻找解决方案。思考到目前为止，我的尝试基于这样的想法，即将视差容器的距离仅限于页面顶部一次（不要用每个滚动更新它）并在计算中实现它。但我似乎无法让它正常工作。我错过了什么吗？进一步澄清：任何页面上都可以有多个视差容器。每个人都可以拥有自己的背景图像集。（在CSS中）我不知道页面上会有多少视差容器。我不知道他们在哪里。只有那些可见的移动。码只有相关部分： $(window).scroll(function(){ // Bind window scroll event $( “.parallax” ).each(function() { if( $( this ).is_on_screen() ) { // Check if […]

填充容器的视差背景图像: 我正在使用stellar.js将视差效果应用于背景图像。背景图像周围的容器高度由javascript设置为窗口高度减去标题的高度。我将背景图像设置为覆盖在css中，并希望它填充容器而不管屏幕大小。这没有视差效果，但是一旦我应用了视差效果，定位就会改变，所以当容器很高时，图像不会填满它。我和Stellar.js的创建者Mark Dalgleish谈过，看看他是否有任何想法，他说背景图像必须高于容器才能填充它，这几乎就是我得出的结论。。所以我想知道是否有不同的方法可以实现这一目标。有没有人有任何想法？这是我试图让它工作的网站。如果您通过从侧面拉入浏览器窗口并重新加载页面来调整其大小，您将看到我的意思。图像下方有一个间隙。 http://sonomarinwebdesign.com/agnitio

滚动浏览固定的全屏DIV可以执行Bagigia.com上显示的动画幻灯片: 是否有某种插件或框架可用于复制http://bagigia.com上的function？我知道我可以WGET整个来源，但需求是一些非常自定义和逆向工程的Bagigia上发现的几个JS文件似乎是一个坏主意。或者是吗？这是我最好的选择吗？

向下滚动页面时多次更改背景颜色: 我正在研究这个项目，我正在使用视差滚动创建一个网站。它应该是一个长的寻呼机。当您向下滚动页面时，当您到达页面的每个新部分时，背景颜色应该会改变。我花了几天时间在网上搜索，也在这里搜索stackoverflow，但我没有找到任何可行的方式。我在堆栈上找到了这个脚本： var tStart = 100 // Start transition 100px from top , tEnd = 500 // End at 500px , cStart = [250, 195, 56] // Gold , cEnd = [179, 217, 112] // Lime , cDiff = [cEnd[0] – cStart[0], cEnd[1] – cStart[1], cEnd[1] – cStart[0]]; $(document).ready(function(){ $(document).scroll(function() { var […]

jQuery – 分别处理同一个类的多个实例？: 目标：我正在尝试创建一个视差滚动效果。视差容器的实现方式如下：当它的容器滚动到视图中时，我需要启动视差效果。离开视图后，效果需要停止。问题：到目前为止jQuery工作得很好。但是：因为我可以在一个页面上有多个视差容器（例如一个在顶部，一个在底部），我需要它们由jQuery 独立处理。目前效果是…… 1.）一旦第一个视差容器滚动到视图中，就触发每个视差容器 2.）每个视差容器离开视野后停止。所以还不是解决方案。思考我认为它应该适用于jQuerys .each（），但到目前为止我无法真正开始工作。当我尝试实现它时，我想我在某处混淆了嵌套函数。码这是我目前的代码： $(document).ready(function(){ $.fn.is_on_screen = function(){ var win = $(window); var viewport = { top : win.scrollTop(), left : win.scrollLeft() }; viewport.right = viewport.left + win.width(); viewport.bottom = viewport.top + win.height(); var bounds = this.offset(); bounds.right […]

如何使用jQuery（通过滚动或触发动画）为PNG序列设置动画效果: 越来越多我看到一个效果，其中png被加载到一系列DIV（或一个div）中，然后逐帧排序，或者基于按钮点击或基于滚动。我试图查看代码，我知道javascript正在做繁重的工作，但我仍然有点迷失，有没有关于这种技术的教程？例子？动画的例子（多个div） http://atanaiplus.cz/index_en.html ：动画的例子（一个div）： http ： //www.hyundai-veloster.eu/ 滚动动画的示例： http ： //discover.store.sony.com/tablet/#design/ergonomics

如何在垂直滚动条上使用Stellar.js从侧面移动/动画元素？: 我正在使用Stellar.js jQuery插件来创建视差滚动效果，但我不确定Stellar是否支持我要完成的任务。我有基本的视差滚动影响正常工作（主要基于TutsPlus的本教程）。我想要实现的是在用户向下滚动页面时使用它，某些元素从所有不同的角度移动/动画到视图中 – 与滚动位置相关联。例如，当用户向下滚动页面时，苹果从屏幕的右上方位置进入视图，并且当用户继续向下滚动页面时，苹果沿对角线路径向左下方位置移动。屏幕。如果用户向上滚动，苹果将以向后的方式沿着相同的路径继续。 Stellar有可能吗？我必须使用不同的插件吗？我可以使用另一个插件WITH Stellar来实现这种效果吗？任何有关这方面的帮助将不胜感激。如果您需要更多信息，请告诉我。谢谢！