Parallax Engine Component

• 

  close

  Info

  ---

  X

  SCP-XXXX: TITLE
  NAME OF TALE/GOI-FORMAT
  Author: Author
  Original: LINK TO ORIGINAL
  Translator: Translator
  Image: Put any licensing information for images here
  Add anything else you'd like the reader to know

  ---

This component was originally made by scutoid studios on the Backrooms Wiki.

This is a parallax header engine.

Skrollr lives again with this new method to add a bit of 3D space to your page banners! Intended for hub pages like contests or canons.

To create 3D parallax effects, this leverages CSS 3D transformations to add a banner to the top of the page that appears to have depth when you scroll… spooky…

Usage

Check it! This is the syntax you need:

STEP 1 — Add the component using [[include]]

[[include :scp-wiki:component:parallax-engine]]

STEP 2 — Customise the component with CSS. This should go in a [[module css]]:

:root {
 --mobile-static-banner: url(http://scutoidbox.wikidot.com/local--files/contest-hub-2024/final-slcon-mobile-banner.png);
 
 --layer-1-image: url(http://scutoidbox.wikidot.com/local--files/component:parallax-engine/slcon-sky.png);
 --layer-1-translate: -22px;
 --layer-1-scale: 23;
 
 --layer-2-image: url(http://scutoidbox.wikidot.com/local--files/component:parallax-engine/slcon-embassy.png);
 --layer-2-translate: -18px;
 --layer-2-scale: 19;
 
 --layer-3-image: url(http://scutoidbox.wikidot.com/local--files/component:parallax-engine/slcon-step.png);
 --layer-3-translate: -14px;
 --layer-3-scale: 15;
 
 --layer-4-image: url(http://scutoidbox.wikidot.com/local--files/component:parallax-engine/slcon-redlightdistrict.png);
 --layer-4-translate: -10px;
 --layer-4-scale: 11;
 
 --layer-5-image: url(http://scutoidbox.wikidot.com/local--files/component:parallax-engine/slcon-wanderer.png);
 --layer-5-translate: -1px;
 --layer-5-scale: 2;
}

Layer number 1 is farthest away from the screen, and the closest to the screen is number 5.

The translate-px value determines how far back it is from the camera; the more negative, the further!

Changing the translate-px value makes the element appear smaller, so after you set it you need to scale the element up if everything's going to line up perfectly. To get everything the same size as the screen, the scale value should be equal to the translate-px value, turned from a negative into a positive, plus one.