Question

我有一个我今天一直试图解决的奇怪的错误 - 仍然没有运气。如果你看下面的例子，

http://vitaliyg.com/alpha/hire/

这是发生了什么。全宽背景图像加载到正确位置，沿y轴居中。然后，当我们将鼠标悬停在图像上时，整个图像会跳到中间，然后慢慢将其自身调整回正常的所需位置。

造成这种情况的原因是left: 50%; margin-left: -960px;。这使我们能够正确地居中图像。如果我们没有这个CSS，则悬停不会跳转，但是图像会加载锚定在浏览器的左上角。

在上面的链接中，红色框是内容div。蓝色框是一些与background-image保持一致的文本。

这是我想要实现的目标：

让background-image显示为居中。
当用户将鼠标悬停在background-image上时，它不会跳转到页面中间。
最后，减小用户在x轴上能够“视差”的宽度。现在的方式是，如果患者足够，用户可以从图像的一侧到另一侧看到。我希望视差非常微妙。

另外，我正在使用jParallax，在这里找到：
http://stephband.info/jparallax/

感谢您的帮助！

Answer 1

通过CSS为背景图像设置位置后，似乎jQuery Parallax插件会改变这些设置。然后解决方案是在jQuery Parallax处理该视差层之后应用这些设置。

首先，从margin-left课程中删除left和.parallax-layer#background。

.parallax-layer#background {
  background-image: url('../images/bg.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 1920px;
  height: 620px;
}

理想情况下，使用相同的方法将蓝色框居中（除非您希望它部分偏离屏幕）。我还根据你的HTML删除了非必要的CSS。

.parallax-layer#tagline {
  background-color: blue;
  width: 400px;
  height: 400px;
}

最后，添加从背景和标语选择器中删除的CSS规则，以便在jQuery Parallax操作这些项目后应用它们。

jQuery(document).ready(function(){
    jQuery('#parallax .parallax-layer')
    .parallax({
        mouseport: jQuery('body')
    });
  jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
  jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});

当鼠标进入视口时，您不再会在背景图像的左侧看到大的白色部分（正文背景颜色）。

这个 jQuery Parallax 插件根据设计对齐顶部/左侧的所有内容。如果鼠标进入从蓝色框右侧的视口，该框正确地动画到该位置。

但是，如果鼠标从蓝色框的左侧进入，该框将“跳转”到光标位置。您可以考虑删除上面的最后一个jQuery行，这样蓝色框在浏览器加载时是顶部/左侧，或者使用较低的百分比值，如 25% 。

对于那些登陆此问题/答案并希望使用一些真正的标记的人，我已经设置了两个jsFiddles。一个jsFiddle复制了问题，另一个解决方案如上所示。

Original Problem - jsFiddle
Fixed Applied - jsFiddle

两个jsFiddles都处于全屏模式，因此可以看到视差效果。

查看原始问题的说明：
1。启动上述原始问题jsFiddle Link 2. 按jsFiddle播放按钮，小心不要进入视口。如果蓝框以任何方式移动...您已进入视口，请再次按下播放按钮 3. 从视口的顶部/左侧输入，您将看到问题... HTML正文（白色）被视为背景图像重新调整自身。
4。随时按播放按钮重置网页。

要查看固定应用，请启动上面的链接或在浏览器地址栏中修改URL，以便您看到该jsFiddle的修订版1。（即http://jsfiddle.net/UG4Sq/1/embedded/result/）

蓝色框表示通过文字jsFiddle您的观看。干杯！

视差图像加载精细，但在悬停时跳到中心

1 个答案: