Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .parallax-wrapper
  .hero.parallax-content
    img(
      src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/sterling-davis-4iXagiKXn3Y-unsplash-min.jpg",
      alt="Photo of city during a sunset by Sterling Davis"
    )
    .hero__title
      h1 CSS Parallax Hero
      p Photo by Sterling Davis on <a href="https://unsplash.com/photos/4iXagiKXn3Y" target="_blank">Unsplash</a>
  .main-content
    .scroll-icon-container
      svg.icon--down-arrow(viewBox="0 0 24 24")
        path(
          d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"
        )
    h2 No one's called him Baby Buster since high school.

    p So you take your mom to work every day? Bummer. Moms are such a pain in the ass, huh? It's, like, die already! Pound is tic-tac-toe, right? Heyyyy Uncle Father Oscar. I run a pretty tight ship around here. With a pool table. It's a gaming ship. They're not gonna strip, right? I told them not to, but I can't guarantee their instincts won't kick in. One for the ladies.

    p Did you enjoy your lunch, mom? You drank it fast enough. The worst that could happen is that I could spill coffee all over this $3,000 suit. COME ON. Get rid of the Seaward. Lucille: I'll leave when I'm good and ready.

    p Hey, it was one night of wild passion! And yet you didn't notice her body? I like to look in the mirror. GENE!! [screams] Come on, this is a Bluth family celebration. It's no place for children. Yeah, that's a cultural problem is what it is. You know, your average American male is in a perpetual state of adolescence, you know, arrested development. (Hey. That's the name of the show!) Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? One of the guys told me to take my head out of my BOTTOM and get back to work…my BOTTOM! That's how Tony Wonder lost a nut.

    p Oh, like when they say "poofter" to mean "tourist", yes. I need a fake passport, preferably to France… I like the way they think. Tobias Fünke costume. I know what an erection feels like, Michael. You were just a turd out there, you know? You couldn't kick, and you couldn't run, you know? You were just a turd. I'm not a prostitute. Michael: Then I shall let you live! Second-of-ly, I know you're the big marriage expert. Oh I'm sorry, I forgot, your wife is dead.

    p Each year, Oscar attempts the four hundred mile walk from Newport Beach to Berkeley, California. In the twelve years that he's attempted this, he's never made it farther than UC Irvine. ♪♪ Big yellow joint, big yellow joint, I'll meet you down at the big yellow joint. ♪♪ Someone order 140 pounds of upper body strength? Chickens don't clap!

              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,600&display=swap");

:root {
  --hero-gap: 60px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Lora", serif;
}

h1 {
  font-size: calc(0.5rem + 8vmin);
  font-weight: 600;
  font-style: italic;
}

h2 {
  font-size: calc(0.8rem + 4vmin);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}

p {
  font-size: calc(0.8rem + 1.25vmin);
  line-height: 1.65;
}

.caption {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  color: white;
  z-index: 2;
  font-size: 0.6rem;
}

.parallax-wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 10px;
}

.parallax-content {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--hero-gap));
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    object-fit: cover;
    z-index: 1;
    transform: translateZ(1px);
  }

  .hero__title {
    color: white;
    z-index: 2;
    text-align: center;
    transform: translateZ(-2px) scale(1.2);

    p {
      margin-top: 0.5rem;
      font-size: calc(0.6rem + 0.75vmin);
    }

    a {
      color: white;
    }
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 100%;
    transform: translateZ(8px);
    pointer-events: none;
    background-image: linear-gradient(
      to bottom,
      hsla(0, 0%, 0%, 0) 0%,
      hsla(0, 0%, 0%, 0.013) 8%,
      hsla(0, 0%, 0%, 0.049) 14.8%,
      hsla(0, 0%, 0%, 0.104) 20.8%,
      hsla(0, 0%, 0%, 0.175) 26%,
      hsla(0, 0%, 0%, 0.259) 30.8%,
      hsla(0, 0%, 0%, 0.352) 35.3%,
      hsla(0, 0%, 0%, 0.45) 39.8%,
      hsla(0, 0%, 0%, 0.55) 44.5%,
      hsla(0, 0%, 0%, 0.648) 49.5%,
      hsla(0, 0%, 0%, 0.741) 55.2%,
      hsla(0, 0%, 0%, 0.825) 61.7%,
      hsla(0, 0%, 0%, 0.896) 69.2%,
      hsla(0, 0%, 0%, 0.951) 77.9%,
      hsla(0, 0%, 0%, 0.987) 88.1%,
      hsl(0, 0%, 0%) 100%
    );
    z-index: 3;
  }
}

.main-content {
  position: relative;
  margin: 0 auto;
  padding: var(--hero-gap) 2rem;
  max-width: 725px;
  background-color: white;

  > * + * {
    margin-top: 2rem;
  }
}

.scroll-icon-container {
  --size: 30px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: hidden;
  top: calc(var(--size) * -1);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(var(--size) * 2);
  height: calc(var(--size) * 2);
  border-radius: 0.15rem;
  background-color: inherit;
  box-shadow: 0 6px 12px -3px rgba(black, 0.1);
  z-index: 4;

  .icon--down-arrow {
    width: var(--size);
    height: var(--size);
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console