标签: parallax

我试图让文本以与其父div(以1/10速度滚动)相同的速度滚动.目前,它以正常速度滚动.我做错了什么？

HTML:

<div id="blank" class="page">
  <p>blah blah blah</p>
</div>

CSS:

body { background:url(images/background.gif); }
.page {  overflow: auto; width: 580px; color: white; }
#blank { background: url(images/02.jpg) 50% 0 no-repeat fixed; height: 2300px;}

JS:

$('#blank').parallax("50%", 0, 0.1, true);
$('#blank p').parallax("50%", 0, 0.1, true);

我目前正在与一家编写了我网站大部分内容的网络公司合作.他们即将把网站交给我,但Safari中的视差滚动存在问题; 适用于所有其他浏览器.此外,我在页面左侧有一个小部件也受到影响.垂直滚动时非常不稳定.非常感谢任何建议和帮助.这是该网站的链接:

http://zerochroma.nclud.me/product/vario-protect-iphone-4-4s

问题似乎只在野生动物园中.

我正在尝试在分页滚动视图上实现水平视差,这使得一个视图看起来在x方向上前进得更快但在相同点上"着陆"(例如,说(0,0)).这是我的常规设置/视图层次结构:

• (透明卷轴,拦截/传递滚动事件)
• (物体叠加,我想在x方向上移动1.2倍,但不超过它的"着陆点")
• (我希望在x方向以1.0x的速度移动的另一个叠加)

我知道它必须做一些修改contentOffset的事情,我让我的代表都进行了设置,这样他们就能以1x的速度向相同的方向移动......任何有关解决方案的提示？

我有一个具有固定位置的元素,但是能够使用我在JsFiddle上从这个例子中使用的jQuery计算向左和向右滚动.

$(window).scroll(function(event) {
var x = 0 - $(this).scrollLeft();
var y = $(this).scrollTop();

// whether that's below the form
if (y >= top) {
    // if so, ad the fixed class
    $('.scroll_fixed').addClass('fixed');
} else {
    // otherwise remove it
    $('.scroll_fixed').removeClass('fixed');
}

$(".scroll_fixed").offset({
    left: x + leftInit
});

});

该解决方案效果很好,直到我必须向左滚动,其中元素滚动"视差"对文档的其余部分 - 即,它滚动大约是文档其余部分的两倍.

我知道这是jQuery计算的问题,但是想知道是否有人之前遇到过这个问题？如果是这样,你是如何解决的？我有点亏......

编辑

问题解决了 - 这是因为代码使用$(window).scrollLeft(); 而不是我希望操纵的元素范围内的父元素.

包装器div被归类为"wrapperDiv",因此我使用了$(".wrapperDiv").scrollLeft();

我会按照要求标记这个问题,但由于我是Stack Overflow的新手,我再也无法回答7个小时....

我正在构建一个具有视差滚动背景的网站,类似于spotify.com主页.我正在使用transform3d移动图像并认为我将动画包装在requestAnimationFrame中以提高性能.在Chrome中运行良好但在Firefox中我看到一些白色闪烁,其中图像正在重绘.实际上,当动画不在requestAnimationFrame中时,Firefox似乎工作得更好.有谁知道为什么会这样或我如何进一步优化？

这是源代码的链接:

http://codepen.io/fatlinesofcode/pen/xcnKh

和bug的截图.

我有一条像垂直蛇一样的路线.(像这样http://www.my-favorite-coloring.net/Images/Large/Animals-Reptiles-Snake-31371.png)

如何在滚动时按X和Y位置移动路径上的元素(圆圈10x10)？

Horizo​​nal还可以:

    var coin = $('#coin');

    $(window).scroll(function(){
        var coinTop = coin.css('top'),
            cointLeft = coin.css('left');

        if($(window).scrollTop() > 100 && $(window).scrollTop() < 600){
            $("#coin").css({ "left":  contLeft + 'px' });
        };
    });

但是我如何沿着路线顺利移动它？

我正在使用Keith Clark的CSS-only方法创建一个双层视差效果,以便背景图像的滚动速度低于网站其他内容的速度.为了清楚起见,图像覆盖整个页面,内容位于其上.

我的网站分为两个主要div元素(和一个容器div) - 一个用于背景图像,另一个用于页面内容.下面是我用于不同div元素的代码.

.container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  position: absolute;
  left: 0;
  right: 0;
}

.background {
  background-image: url(images/background.jpg);
  background-size: cover;
  position: absolute;
  /* margin-bottom: -200em;
     overflow: hidden; */
  height: 200em;
  left: 0;
  right: 0;
  transform: translateZ(-2px) scale(3);
}

.page-content {
  transform: translateZ(0);
}

如果没有添加margin-bottom和overflow属性,一旦将背景div元素设置为足以覆盖所有页面内容的高度,背景元素将最终留下垂直白色空间.

添加负边距后,问题在Chrome中得到修复,并在Firefox*中排序,并且我将div元素的高度和负边距增加到远远超过确保它适用于不同页面长度所需的范围.

虽然IE 11仍有白色空间.通常,该background-size: cover;属性会删除任何空白区域,但这不适用于视差效果.

你知道有什么方法可以删除适用于IE9 +和其他主流浏览器的空白区域,还是我运气不好？

这是一个JSFiddle,其代码与我正在创建的网站几乎完全相同.

*Firefox没有空格,但负边距对所有页面长度都不起作用.对于较短的页面,您可以滚动浏览页面内容的末尾.我可以通过更改每个页面的高度和边距来解决这个问题,但如果可能的话,我们将感谢全球解决方案.

我试图在没有固定背景高度的情况下获得纯CSS视差效果.这已在一些 地方进行了描述,但它们有一个共同的约束条件,即背景层必须具有固定的已知高度.

由于某些动态内容,我希望在没有固定的,已知的背景高度的情况下使效果正常工作.

我的最小例子是:https://jsfiddle.net/yf8oyben/

#container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.background {
  transform: translateZ(-1px) scale(2);
  width: 100%;
  background: lightgreen;
  height: 250px;  /* Assumes bg height */
  position: absolute;  /* Assumes bg height */
  top: calc(125px - 50vh);  /* Assumes bg height */
}
.foreground {
  background: rgba(0, 0, 255, 0.5);
  width: 100%;
  position: absolute;  /* Assumes bg height */
  top: 250px;  /* …

我整天都在阅读，但没有成功。

基本上希望能够在android.support.design.widget.CollapsingToolbarLayout中设置ImageView来更改其高度，具体取决于检测到的onOffsetChanged更改，以便在折叠以适合整个图像宽度和“缩放”时将“缩小” -in”，即可进行正常的centerCrop行为。

我尝试在onOffsetChanged中设置ImageView的高度，但是由于CollapsingToolbarLayout也在重新放置它，这会导致其他问题。

我在ParallaxListView项目中看到的示例功能，但希望使用CollapsingToolbarLayout。

任何人都可以提供示例代码（如果可能）吗？

也看到了这个项目，但又有类似的局限性。其他项目也是如此。

我正在尝试第一次制作视差并遇到麻烦。

我正在遵循本教程，然后尝试向后工作。但是，代码无法正常工作，我不确定在哪里出错了，我跳到其他一些教程，并尝试调整不同div和CSS块的名称，因此现在的代码有点混乱。

.html {
  height: 100%;
  overflow: hidden;
}

.body {
  max-width: 30px color: #fff;
  margin: 0;
  padding: 0;
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100% overflow-y: scroll;
  overflow-x: "Luna"
}

header {
  box-sizing: border-box;
  min-height: 100vh;
  padding 30vw 0 5vw;
  position: relative;
  transform-style: inherit;
  width: 100vw;
}

header h1 {
  margin-top: -100px;
}

header,
header:before {
  background: 50% 50% / cover;
}

header::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: block; …