5001–[CSS] Parallax World

Background

In this project, we want to implement the following parallax effect:

See the Pen NxMyLM by Thomas Seng Hin Mak (@makzan) on CodePen.

Requirement

Please use the following HTML code:

<div class="scene">
  <img class='bg2' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15649/bg2.png" alt="" />
  <img class='bg1' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15649/bg1.png" alt="" />
  <img class='bg0' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15649/bg0.png" alt="" />
  <img class='fg2' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15649/fg2.png" alt="" />
  <img class='fg1' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15649/fg1.png" alt="" />
</div>

Help

❓ Show help content

Submission guideline

• You may use Codepen to implement it and submit the link.
• You may implement them in file and attach the HTML/CSS file via submission.