我正在尝试实现全屏无限滚动背景效果,该效果必须在视口的整个高度和宽度上延伸。
这是demo。
我尝试过的解决方案是使用一个包含100vh
和100vw
视口的包装元素,然后将2 div
放入其中,100%的高度,具有相同的背景图像和background-size: cover
属性。我使用的图像大小为: 1,920px×808px 。
然后我在包装元素上应用了以下动画:
@keyframes infiniteScrollBg {
0% {
transform: translateY(0%);
}
100%{
transform: translateY(-100%);
}
}
但问题是在某些视口大小上,图像没有正确重复(因为background-size: cover
属性):
这是我尝试过的完整代码:
<div class="animated-scene">
<div class="animated-scene__frame animated-scene__frame-1"></div>
<div class="animated-scene__frame animated-scene__frame-2"></div>
</div>
和css:
.animated-scene {
width: 100vw;
height: 100vh;
position: fixed;
min-height: 400px;
animation: infiniteScrollBg 50s linear infinite;
}
.animated-scene__frame {
width: 100%;
height: 100%;
background-size: cover;
background-color: #4277a3;
background-image: url('https://andreivictor.ro/codepen/fullscreen-infinite-scroll-bg/fullscreen-bg');
}
您对如何实现此效果有任何想法吗?
感谢您的帮助。
答案 0 :(得分:1)
问题在于宽高比。您将宽高比设置为视图窗口,而不是图像大小。因此,您的图像最终会在视窗窗口处被截断。
我通过将.animated-scene__frame更改为此来在您的codepen中工作:
.animated-scene__frame {
width: 100%;
height:200vh; //easy way - increase height in animated div to prevent image cutoff. Ideally should be done through javascript using like a 3x multiple of the height of the image. Then just rely on background-repeat during the animation :)
background-size:contain;
background-color: #4277a3;
background-image: url('https://andreivictor.ro/codepen/fullscreen-infinite-scroll-bg/fullscreen-bg-slide1.jpg');
}
答案 1 :(得分:1)
我使用了一个图像元素只是为了使用它的自动高度。
然后我在伪上使用backgroiund,可以根据需要多次重复自己
我设置了2个不同宽高比的不同容器,以便更轻松地在不同的屏幕上查看结果
.container {
border: solid 1px black;
overflow: hidden;
position: absolute;
}
#ctn1 {
width: 300px;
height: 150px;
}
#ctn2 {
width: 200px;
height: 350px;
left: 320px;
}
.inner {
width: 100%;
position: relative;
animation: scroll 5s infinite linear;
}
.inner:after {
content: "";
height: 500%;
width: 100%;
position: absolute;
background-image: url(https://i.stack.imgur.com/FlK9o.jpg);
background-size: 100% 20%;
}
.img {
width: 100%;
}
@keyframes scroll {
from {transform: translateY(-100%);}
to {transform: translateY(-200%);}
}
&#13;
<div class="container" id="ctn1">
<div class="inner">
<img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">
</div>
</div>
<div class="container" id="ctn2">
<div class="inner">
<img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">
</div>
</div>
&#13;
使用媒体查询的更好解决方案,用于更改图像的使用方式。
请注意,当图像的宽高比和窗口都未知时,需要使用background-size:cover。由于您知道图像的纵横比,因此可以使用基于它的媒体查询来控制显示。
现在,当需要时,图像将不会适应容器的宽度,而是适应它的高度
@media screen and (max-aspect-ratio: 4/3) {
.inner {
height: 100%;
width: auto !important;
}
.img {
height: 100%;
width: auto !important;
}
}
.container {
border: solid 1px black;
display: inline-block;
overflow: hidden;
}
#ctn1 {
width: 300px;
height: 150px;
}
#ctn2 {
width: 200px;
height: 350px;
}
.inner {
width: 100%;
position: relative;
animation: scroll 5s infinite linear;
display: inline-block;
}
.inner:after {
content: "";
height: 500%;
width: 100%;
left: 0px;
position: absolute;
background-image: url(https://i.stack.imgur.com/FlK9o.jpg);
background-size: 100% 20%;
}
.img {
width: 100%;
}
@keyframes scroll {
from {transform: translateY(-100%);}
to {transform: translateY(-200%);}
}
&#13;
<div class="container" id="ctn1">
<div class="inner">
<img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">
</div>
</div>
<div class="container" id="ctn2">
<div class="inner">
<img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">
</div>
</div>
&#13;
答案 2 :(得分:1)
对于滚动背景,我使用background-position而不是使用其他元素,并使用transform CSS属性对其进行动画处理。
为什么会问?
执行此方法的唯一const是您需要知道所使用图像的尺寸。
示例:
/*
specify the scroll x (or y) with the width (or height) of the images
In this case, the image dimension is :
width: 1920px;
height: 808px;
*/
@keyframes bgScroll {
0% {
background-position : 0px 0px
}
100% {
background-position : 0px -808px
}
}
.scrollingBG {
display:block;
width:100vw;
height:100vh;
background-image:url("https://andreivictor.ro/codepen/fullscreen-infinite-scroll-bg/fullscreen-bg.jpg");
animation: bgScroll 20s linear infinite;
}
<div class='scrollingBG'></div>
答案 3 :(得分:0)
我建议只需将图片扩展3次,即:
@keyframes infiniteScrollBg {
0% {
transform: translateY(0%);
}
100%{
transform: translateY(-66.66%);
}
}
使用一些图像编辑器并使用相同的模式创建一个大图像,看看我制作的这个网站site,在那里你会发现一些无限的背景图案
答案 4 :(得分:0)
您必须使用 background-position 属性。 这里有一个固定的例子http://codepen.io/azamat7g/pen/BRwRVV
完整代码:
@keyframes infiniteScrollBg {
0% {
transform: translateY(0%);
}
100%{
transform: translateY(-100%);
}
}
.animated-scene {
width: 100vw;
height: 100vh;
position: fixed;
min-height: 400px;
animation: infiniteScrollBg 50s linear infinite;
}
.animated-scene__frame {
width: 100%;
height: 100%;
background-size: cover;
background-position: bottom left;
background-color: #4277a3;
background-image: url('https://andreivictor.ro/codepen/fullscreen-infinite-scroll-bg/fullscreen-bg-slide1.jpg');
}
.bottom{
background-position: top left;
}
&#13;
<div class="animated-scene">
<div class="animated-scene__frame animated-scene__frame-1"></div>
<div class="animated-scene__frame animated-scene__frame-2 bottom"></div>
</div>
&#13;