Parallax scrolling in HTML

Photo credit: Sonic Team
// Put whatever on the first line!
// url(), linear-gradient(), radial-gradient(), etc...
html, body {
background-image: linear-gradient( #77F7F7, #DDFFFF );
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

--

--

--

Oh geez, Josh Frank decided to go to Flatiron? He must be insane…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Javascript reactivity explained simple

Are you ready for Angular 6?

Let’s Talk About Promises in JavaScript!!!

Relationships between objects in JS

Let’s Validate Our Form: React Hook Form ft. TypeScript📝

JavaScript the Future of Web Development?

Implementing a custom JIT provisioning handler in WSO2’s Identity Server

Add a Map With a Point to Your Website

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Josh Frank

Josh Frank

Oh geez, Josh Frank decided to go to Flatiron? He must be insane…

More from Medium

How To Make a Button with a Gradient Border and Gradient Text in HTML & CSS

Two Top Tier TTs

Let’s talk about Visibility in CSS

CREATING THE GAME OF X AND O