我的背景图片是6830像素x 768像素。我也有在页面中心的内容。背景设置为使用
background-size: cover;
background-position: 0 50%;
当用户按步骤进行时,背景需要设置动画(在非常宽的背景中向左滚动到另一个场景)。每个场景的设计为1366px x 768px。因此,当窗口高度为768px时,每个步骤需要将背景移动1366px。当视口分辨率完全相同时,将背景设置为动画非常容易,但是如果它大或小,那么我需要计算移动背景的程度。这就是我一直在努力的方向。根据视口大小与背景大小相比计算滚动量所需的数学运算是什么?
答案 0 :(得分:0)
background-size: cover;
, 6830px
会破坏一些事情,一个小的修正方法是将背景大小更改为auto 100%
;
您的问题的解决方案是使用Luke提到的百分比,但是在使用background-position
这里的Docker natively support´s Windows
仍然存在关于视口宽高比不同的问题,在完美的世界中,它始终是1366:768
。您必须通过在顶部或底部或两者的视口外部留空空格或空格来妥协。取决于视口的给定比率。
必须在高度上做出妥协,因为每个场景(我假设)固定长度为1366像素。
最后解决方案:
我们将从场景0开始,bg-pos的值将为0% 50%
bg-x-pos
的后续值将遵循公式100% / (n-x)
其中n是场景总数,x是场景编号。
4个场景的例子
场景0:background-position: 0% 50%;
场景1:background-position: 33.333% 50%;
场景2:background-position: 66.666% 50%;
场景3:background-position: 100% 50%;
答案 1 :(得分:0)
谢谢@Luke& @jkris为您的建议。然而,问题更复杂,但我提出了一个解决方案。对于遇到相同问题的任何人,此功能可以帮助您:
calcBgPosition (slideNum) {
let slideW = 1366;
let slideH = 768;
let winH = window.innerHeight;
let winW = window.innerWidth;
// Because the height determines the background scale we must multiply the width by the height scale to ensure calculations are correct
let adjustedSlideW = slideW * (winH / slideH);
// In order to center the background we must first calculate the offset
// then subtract the current slide position
return ((winW - adjustedSlideW) / 2) - (adjustedSlideW * slideNum);
}
此用例的背景是我们有多个场景(幻灯片)。为获得最佳效果,第一张和最后一张幻灯片(背景的第一部分和最后一部分)应为出血幻灯片,这意味着它们将显示部分背景,但不会与您的内容一起使用。