DEV Community

Cover image for How to: Easy Spider-man Parallax page
Shristi Singh
Shristi Singh

Posted on

3 3

How to: Easy Spider-man Parallax page

This post covers two ways, one is the traditional CSS way, other the Bulma way!
Check The Final Result here
(Scroll down for code)
Okay so this is a very simple BEGINNER friendly stuff, I just chose it cause, well to display, how much Bulma simplifies everything, there is like handful CSS, most of it being, links to background.

A parallax website includes fixed images in the background that you can keep in place and you can scroll down the page to see different parts of the image. With basic knowledge of HTML and CSS, you can give a parallax effect to a website.

Using the parallax effect in web designing is really popular and it gives beautiful look and feels to the web page. It is a great option for an opening page or a random display page.

How to make this better?

  • Put media queries and use different images for different view ports.
  • Experiment with block styles, add a flashy header, play with Image box.
  • Add clips!

Also I figured out it was too simple to deserve a tutorial, so I'll pass, but in case of any query, ping me, would be happy to help.

Without further delay, you can see normal CSS on Codepen.
Find the Bulma code on GitHub.
You can compare the two, and you will find lack of efforts with Bulma along with more styles.

Boba!

Ps. Next up a DARK website!(Screams in German)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (1)

Collapse
 
ben profile image
Ben Halpern

I really appreciate how smoothly this scrolled. Sometimes this is done in a way that gives me like 30fps load on my browser.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay