css背景视差_使用CSS 3D和JavaScript的视差图像滚动动画

css背景视差

While there are many solutions to achieve parallax scrolling on the web, it’s my impression that most fake the images-in-depth effect. Inspired by a OS X screensaver, I realized that CSS 3D would allow images to be actually set back on the z axis, providing true perspective and parallax when the images were moved up and down. While the code for this example remains in prototype form, I think it’s interesting enough to share an explanation, along with a CodePen demo.

尽管有许多解决方案可在网络上实现视差滚动，但我的印象是，大多数伪造的深度图像效果都是如此。 受到OS X屏幕保护程序的启发，我意识到CSS 3D允许将图像实际放回z轴，从而在图像上下移动时提供真实的透视和视差。 尽管此示例的代码仍处于原型形式，但我认为与CodePen演示一起分享一个解释很有趣 。

关于该基地的一切 (All About That Base)

The code starts with a singular piece of markup, in the form of a <div> element:

该代码以一个单一的标记开始，以<div>元素的形式：

<div id="parallax-container">
</div>

This element will be filled with images loaded by our JavaScript; first, we need to set up styles for the <div> and the images that will appear inside it:

这个元素将由我们的JavaScript加载的图像填充; 首先，我们需要为<div>以及将出现在其中的图像设置样式：

#parallax-container {
    background: #16161d;
    margin: 0;
    overflow: hidden;
    perspective: 1200px;
    height: 100vh;
    width: 100vw;
    transform-style: preserve-3d;
}
#parallax-container img {
    transform-origin: center;
    box-shadow: 0 0 12px 12px rgba(0, 0, 0, 0.4);
    position: relative;
}

If you’re not familiar with vw and vh units or CSS 3D, I have articles and reading lists on the subjects.

如果您不熟悉vw和vh单位或CSS 3D ，那么我会提供有关主题的文章和阅读列表 。

滚动图像 (Rolling Images)

The progressive approach would be to insert the images as markup, style them with CSS, and them have the JavaScript hide and manipulate the images. This being a demo, I’ve gone the direct route. Since the filenames of the images all follow the same pattern (wave1.jpg, wave2.jpg… etc) I could also use JavaScript to generate the filenames; along with the other global variables I’ll use in this script:

渐进的方法是将图像作为标记插入，使用CSS设置其样式，并使它们具有JavaScript 隐藏和操作图像 。 这是一个演示，我已经走了直接路线。 由于图像的文件名都遵循相同的模式( wave1.jpg ， wave2.jpg …等)，因此我也可以使用JavaScript生成文件名。 以及我将在此脚本中使用的其他全局变量 ：

var container = document.getElementById("parallax-container"),
waveSrc = [],
waves = [],
imgLoc = "",
j = 0;

for (var i = 0; i < 10; i++) {
    waveSrc[i] = imgLoc+"wave"+(i+1)+".jpg";
}

I’ll need several random numbers, which I’ll generate in a function:

我需要几个随机数 ，它们将在一个函数中生成：

function getRandomInRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

I’ll also need to reference the images that are loaded, together with the screen’s current width and height (assuming that the browser is maximized).

我还需要引用已加载的图像以及屏幕的当前宽度和高度(假设浏览器已最大化)。

var screenWidth = window.screen.width,
screenHeight = window.screen.height;

As the images are loaded and appended to the container element, they are provided properties - .xPlane, .yPlane and zPlane - with random values that position the element in 3D space. The image’s alt attributes are blank for this demo.

在将图像加载并附加到container元素时，会为它们提供属性.xPlane ， .yPlane和zPlane具有将元素放置在3D空间中的随机值。 该演示的图像的alt属性为空白。

function preloadImage(filename){
    var img=new Image();
    img.onload = function(){ 
        img.xPlane = getRandomInRange(-500, screenWidth - 500);
        img.yPlane = getRandomInRange(500, 1000);
        img.zPlane = getRandomInRange(300,2000);
        img.style = "transform: translate3d(" + img.xPlane +"px, " + 
            img.yPlane + "px, -" + img.zPlane +"px)";
       container.appendChild(img);
    };
    imgLoc = "";
    img.src= imgLoc + filename;
    img.alt = "";
    waves[j] = img;
    j++;
}

function loadImages(){
    for (var i = 0; i < waveSrc.length; ++i) {
        var filename = waveSrc[i];
        preloadImage(filename);
    }
}

Finally, the images are moved using a function:

最后，使用函数移动图像：

function moveImages(){
    waves.forEach(function(image) {
            image.yPlane = image.yPlane - 2;
            image.style.cssText = "transform: translate3d(" + image.xPlane+"px, 
" + image.yPlane+"px,  -" + image.zPlane + "px); z-index: " + image.zIndex;
        });
    window.requestAnimationFrame(moveImages);
}

All of this is made to work by calling the appropriate functions at the end of the script:

通过在脚本末尾调用适当的函数，可以使所有这些工作正常进行：

loadImages();
window.addEventListener("load", 
	function() { 
		window.requestAnimationFrame(moveImages);
	});

改进措施 (Improvements)

As a prototype, the code is still a little rough at this stage. There are several obvious improvements that can be made:

作为原型，此阶段的代码仍然有些粗糙。 可以进行几个明显的改进：

1. Right now the script continues to run as the images disappear off the top of the container, essentially running into infinity; ideally the script would cut images from the start of the array as they disappear and add them to the bottom, off the screen, to continue upwards.

   现在，当图像从container顶部消失时，脚本继续运行，实际上一直运行到无穷远。 理想情况下，脚本会在图像消失时从数组的开头剪切图像，并将其添加到屏幕下方的底部，以继续向上。

2. Perhaps paradoxically, it would be good to have a little less randomness in the positioning of images: right now, one image can appear directly behind another, or very close in z-space (and therefore, move upward at very close to the same pace). To do that, I’d need to compare the position values of newly images to those that are already established in the array, calling a new random value if they are too close.

   也许自相矛盾的是，将图像的位置的随机性降低一些会比较好：现在，一个图像可以直接出现在另一个图像之后，或者在z空间中非常接近(因此，以非常接近的速度向上移动) )。 为此，我需要将新图像的位置值与数组中已建立的图像的位置值进行比较，如果它们太接近，则调用新的随机值。

3. Right now this is an “auto-scroll”, technique. If you wanted to associate the movement of the image with changing the scrollbar on the page, you could alter the position of the images in relation to window.scrollY.

   现在，这是一种“自动滚动”技术。 如果要将图像的移动与更改页面上的滚动条相关联，则可以更改图像相对于window.scrollY 。

翻译自: https://thenewcode.com/1123/Parallax-Image-Scrolling-Animation-with-CSS-3D-and-JavaScript

css背景视差