HTML / CSS - 滚动时修复背景

时间:2014-04-19 18:31:17

标签: html css background parallax.js

他们是如何理解或解释这个网站的背景? http://upcircuit.org/ 基本上,固定背景就是这里的诀窍。 但有多个背景,我试图解决这个网站的技巧:)) 我尝试扫描页面源,但我不知道他们是如何做到的。

4 个答案:

答案 0 :(得分:6)

它们具有窗口大小的面板。然后他们正在做的是为每个面板设置背景图像并设置其background-attachment: fixed,使其相对于窗口保持定位,而不是它所处的div。

我在这里为你设置了基础知识:http://jsfiddle.net/Zc822/

body, html {
    width: 100%;  // Sets the html and body width and height 
    height: 100%; // to the width and height of the window.
    margin: 0;
}
.panel{
    width: 100%;  // Sets each panel to the width and height
    height: 100%; // of the body (which is set to the window)

    background-repeat: no-repeat;
    background-attachment: fixed;  //Sets background fixed in window
    background-size: cover;
}

然后,您只需为每个面板指定一个background-image

很确定这就是你要找的东西。

答案 1 :(得分:1)

你有什么尝试?你有没有尝试过使用

background-attachment: fixed;

希望这有帮助。

答案 2 :(得分:1)

这是一种视差效果,通过让您的前景和背景以不同的速度移动来模拟3D空间。看起来图像可能被换出并固定在某些滚动点上。你需要使用一些小的javascript,但这不是一个难以实现的技巧:

这是一个帮助的图书馆:

http://matthew.wagerfield.com/parallax/?utm_medium=App.net&utm_source=PourOver

这是另一个整洁的网站,通过视差和滚动来做一些整洁的事情:https://www.google.com/nexus/5/

答案 3 :(得分:0)