Tag: parallax

如何进行水平视差滚动: 我正在使用最新版本的Bootstrap，JQuery和Skrollr。我希望有一个静态背景和一些场景，当您通过视差滚动滚动时。我可以在你滚动时制作场景，但我正在寻找一种方法来显示你没有向下移动页面。我想制作一个像这个图像的场景：注意它是如何向右 – 左移动但从未出现过你实际上是在向下滚动页面。这是我能解释的最好的。似乎无法找到任何好的教程来实现这一目标。任何朝着正确方向的帮助都会很出色。

IE7-8中的Jerky Parallax: 我已经在我正在开发的网站中引入了基本的视差效果。它在Chrome，Firefox和IE9中运行顺畅; 但它在IE7和IE8中真的很生涩。我看过更复杂的网站，我看不到像我那样的“急躁”。我只使用两个顶部有扫描线纹理的图像。可能导致这种情况的任何想法？ #intro { background: url(../img/graphics/top-bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-width: 1024px; min-height: 768px; height: 100%; position: relative; } #second { background: url(../img/graphics/content-bg-2.jpg) center no-repeat fixed; position: relative; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-width: 1200px; min-height: 768px; height: 4800px; } […]

如何使用Parallax.js模拟运动？: 我正在尝试用Parallax.js模拟运动，以测试改善其性能的方法。但是，我如何在Parallax.js的originX和originY之间来回循环，以导致圆周运动的方式？ http://jsfiddle.net/frank_o/amvvkm9z/ 伪代码： var scene = $(‘#scene’); scene.imagesLoaded(function() { var circularMovement = [ [0,0], [0.5,0], [1,0], [1,0.5], [1,1], [0.5,1], [0,1], [0,0.5] ]; // Initiate Parallax scene.parallax({ originX: 0, originY: 1 }); circularMovement.each(function() { scene.parallax(‘origin’, N, N); }); scene.masonry({ itemSelector: ‘.layer’ }); }); HTML： …

为什么.anan在动画制作之前会将scrollTop跳转到0？: 我在那个耐克网站上玩Parallax滚动。所以我一直在使用scrollTop来确定用户在页面上的垂直位置，然后我一直根据对该值的更改调整元素的位置。在这里，我舍入scrollTop值并记录它。我稍后会显示日志。 var distance = 60*(Math.round($(window).scrollTop()/60)); console.log(distance); 然后，在单击时，我调用此函数滚动到我传递的scrollTop值。 function goTo(n){ console.log(‘begin animating’); $(‘html,body’).animate({scrollTop: n},2000); } 这是问题，在动画制作之前，滚动顶部值会跳转到0。所以我将在页面的中间位置记录下来： begin animating 0 6240 6180 6120 // etc… 我定位东西的方式依赖于scrollTop值的准确性。所以我的问题是：在完成动画之前，如何让scrollTop值保持跳转到0？如果需要更多信息，请告诉我。 inheritance人网站的现场版本： http ： //theblueeyeguy.com/moon/Illumination/ （点击’下一步’然后’上一个’来打破它）

创造一个’地毯下’的视差页脚？: 我在这个网站上提出问题时非常陌生，但是从阅读中学到了很多东西，所以非常感谢！一点点随机，在这个页脚上看到这个令人敬畏的“地毯下”风格的视差效果 – 并寻找一些关于如何被敲掉的指针？ http://ideaware.co/our_work 任何帮助非常感谢！

Mousemove视差效果移动div的位置: 我正在尝试创建一个轻微的视差效果（我不确定它是否真的构成了视差，但这是一个类似的想法）。当鼠标移动时，有四个层以略微不同的速率移动。我找到了一个很好的例子，提供了类似于我想要的东西： http://jsfiddle.net/X7UwG/2/ 它通过在鼠标移动时移动#landing-content div上的背景位置来实现此目的。 $(document).ready(function(){ $(‘#landing-content’).mousemove(function(e){ var x = -(e.pageX + this.offsetLeft) / 20; var y = -(e.pageY + this.offsetTop) / 20; $(this).css(‘background-position’, x + ‘px ‘ + y + ‘px’); }); }); 但是，我无法找到一种方法来使这个工作不是在background-position转换，而是在div位置转换。例如position:relative; 和top:x使div本身移动一点点。我的理由是div包含CSS动画元素，因此它需要是包含内部内容的div，而不是背景图像。使用上述代码的任何解决方案？

Scratch的水平视差滚动 – 无插件（jQuery）: 有谁知道我能找到一个关于如何通过jsforms从头开始进行水平视差滚动的教程（即没有插件）？或者可以为我提供一个例子我花了很多时间谷歌搜索它，但只能找到使用插件的教程我想从头开始做的原因是因为我想要完全理解视差是如何真正起作用的。我不介意使用jQuery库我只是不想依赖插件来实现效果。

禁用移动设备的Skrollr（<767px）: 首先要感谢@prinzhorn这样一个令人惊叹且function强大的图书馆。我的问题：我已经在我的网站标题中实现了Skrollr视差背景，但我想在移动设备上观看时禁用此function，尤其是iphone等。（最大宽度：767px）。我想知道最好的方法是什么？如果destroy（）函数能够做到这一点，或者我应该使用另一种技术？另外，如果destroy（）是答案，我怎么能正确实现呢？非常感谢和示例或演示非常感谢。

jQuery视差教程？: 我需要在我为客户构建的网站中使用jquery parallax，我主要是一个后端开发人员，所以我正在学习更多关于前端和jquery等的内容。我遇到了一些例子，例如http：// www。 nikebetterworld.com/和教程然而我担心版权问题所以我想知道是否有人为初学者发现了一个可靠而简单的教程来创建视差效果？谢谢