视差引擎

注意：

此页为于后室维基内部所使用的组件页面。该页面内容可在其它页面中被使用或引用。

这是为玄武岩制作的视差版头引擎。

通过这种全新的方法，Skrollr 得以焕发新生，为你的页面添加 3D 景深的横幅！
为竞赛、设定等中心页而制作。

为了创造 3D 视差效果，本组件利用了玄武岩简单的布局（相较黑标而言）和 CSS 3D 变换，在页面的顶部增加了一条横幅。当你滚动页面时，它似乎会表现出纵深感……吓人……

使用

看看吧！这就是你需要的语法：

[[include :backrooms-wiki-cn:component:parallax-engine]]

#container::before { /* 手机上的静态横幅，因为 3D 效果在很多手机上都会出错 */
 background-image: url(http://scutoidbox.wikidot.com/local--files/contest-hub-2024/final-slcon-mobile-banner.png);
}
 
@media only screen and (min-width: 1025px) {
    #container::before { /* 最远景（划得最慢的） */
     background: url(http://scutoidbox.wikidot.com/local--files/component:parallax-engine/slcon-sky.png);
     --translate: -22px;
     scale: 23;
    }
 
    #extrac-div-1 { /* 后 */
     background: url(http://scutoidbox.wikidot.com/local--files/component:parallax-engine/slcon-embassy.png);
     --translate: -18px;
     scale: 19;
    }
 
    #extrac-div-2 { /* 中 */
     background: url(http://scutoidbox.wikidot.com/local--files/component:parallax-engine/slcon-step.png);
     --translate: -14px;
     scale: 15;
    }
 
    #extrac-div-3 { /* 前 */
     background: url(http://scutoidbox.wikidot.com/local--files/component:parallax-engine/slcon-redlightdistrict.png);
     --translate: -10px;
     scale: 11
    }
 
    #container::after { /* 近景（划得最快的） */
     background: url(http://scutoidbox.wikidot.com/local--files/component:parallax-engine/slcon-wanderer.png);
     --translate: -1px;
     scale: 2;
    }
}

--translate 值决定了它距离屏幕有多远；负数的绝对值越大，就代表越远！scale 值应当为 --translate 的绝对值加一。