1 

body {
    height: 150vh;
}

#hero {
    position: relative;
    border: none;
    height: 100vh;
}

#hero .hero-image {
    background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 95%;
}

#hero .hero-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.2);
}

#hero .skewhero-mask {
    height: 100%;
    position: absolute;
    top: 0;
    left: 10vw;
    width: 45vw;
    overflow: hidden;
    transform: skew(24deg) translateX(0vh) translateY(0%);
}

#hero .skewhero-parallax {
    transform: translateX(0vh);
    width: 200%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#hero .skewhero-image {
    background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
    height: 100%;
    background-size: 110% auto;
    background-attachment: fixed;
    transform-origin: right top;
    transform: skew(-24deg);
}
<section id="hero">
    <div class="hero-image">
    </div>
    <div class="skewhero-mask">
      <div class="skewhero-parallax">
        <div class="skewhero-image"></div>
      </div>
    </div>
</section>

我真的被这个困住了。我正在设计一个视差效果，我background-position使用 jQuery 移动固定背景的属性。jQuery 在这里没有错，所以我不会在此处包含它以降低问题的复杂性。

在 Chrome 中，我得到了想要的效果。在 Firefox 或 Edge 中，这是一场噩梦。我还没有在 Opera 上测试过它。background-attachment: fixed在这些浏览器中从类中删除时.skewhero-image，我注意到没有任何区别。该属性没有做任何事情，因为当我在 Chrome 中删除相同的属性时，我会得到与其他浏览器相同的不良结果。

如何更改我的代码以实现与现在在 Chrome 中完全相同的效果，但在所有其他桌面浏览器中也是如此？不包括移动浏览器。

基本上，猫的形象不能移动，只能移动它周围的容器。在 Chrome 中，这可以按预期工作。在 Firefox 或 Edge 中，猫随容器移动，而不是固定在视口上。

编辑：我发现从自身和所有父级中省略所有 transform属性会将图像修复到视口。有什么可以补救的吗？

4

2 回答 2

0

我不确定您使用的是什么版本的 Firefox，但我刚刚创建了 codepen，它工作正常

<https://codepen.io/anon/pen/ZgpgZP>

如果仍有问题，请详细描述

于 2019-07-26T15:34:28.873 回答
0 

$(function() {
	"use strict";
	var $skp = $('.skewhero-parallax');
	var $skm = $('.skewhero-mask');
	var $hi = $('.hero-image');

	function calcParallax() {
			var $scroll = $(document).scrollTop();
			$skm.css({'transform':'skew(24deg) translateX(-' + (0.445 * $scroll) + 'px)'});
			$skp.css({'transform':'translateY(' + $scroll + 'px)'});
			$hi.css({'transform':'translateY(' + $scroll + 'px)'});
	}

	$(window).on('scroll', function () {
		calcParallax();
	});

	$(window).resize(function() {
		calcParallax();
	});
});
body {
  height: 150vh;
}

#hero {
    position: relative;
    border: none;
    height: 100vh;
}

#hero .hero-container {
	height: 95%;
	overflow: hidden;
}

#hero .hero-container:after {
	content: "";
	position: absolute;
	background: rgba(0,0,0,0.2);
	height: 95%;
	top: 0;
	left: 0;
	right: 0;
}

#hero .hero-image {
	height: 100%;
	background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
	background-repeat: no-repeat;
	background-size: cover;
	will-change: transform;
}

#hero .skewhero-mask {
	height: 100%;
	position: absolute;
	top: 0;
	left: 10vh;
	width: 45vw;
	overflow: hidden;
	transform: skew(24deg) translateX(0vh);
	will-change: transform;
}

#hero .skewhero-parallax {
	width: 200%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	transform: translateY(0px);
	will-change: transform;
}

#hero .skewhero-image {
	background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
	background-repeat: no-repeat;
	height: 100%;
	background-size: 110% auto;
	background-position: 0px -35px;
	transform-origin: right top;
	transform: skew(-24deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
    <div class="hero-container">
        <div class="hero-image"></div>
    </div>
    <div class="skewhero-mask">
      <div class="skewhero-parallax">
        <div class="skewhero-image"></div>
      </div>
    </div>
</section>

我找到了解决我的问题的替代解决方案。此外，似乎浏览器能够更好地处理此解决方案。background-attachment:fixed导致严重的性能问题。这是因为浏览器在滚动时必须重新绘制整个图像。源 #1和源 #2。我自己对此进行了测试，可以确认滚动时存在严重滞后。我已经开始使用该transform: translate()属性，它对此进行了更多优化，因为浏览器不必重新绘制整个图像。

因为我想用 jQuery 为我的视差效果设置动画，所以我在我的代码中模仿了固定的背景效果。我添加了所需效果的代码片段，它适用于 Chrome、Firefox 和 Edge。

于 2019-07-27T17:51:08.073 回答