123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header>
  <h1>Basic Parallax</h1>
  <img class="parallax" src="https://dl.dropboxusercontent.com/u/17846948/codepen/sunset.jpg" />
</header>
<section class="body-copy">
  <p>Craft beer occupy PBR lo-fi. Seitan cold-pressed Tumblr locavore freegan deep v 90's Vice. Whatever Blue Bottle raw denim, Williamsburg Tumblr fashion axe viral craft beer keffiyeh. Flexitarian lomo Pinterest, retro narwhal fanny pack lo-fi disrupt
    photo booth street art DIY bitters chambray taxidermy. Fixie put a bird on it crucifix, food truck street art ugh Etsy bicycle rights disrupt wolf twee Pitchfork pickled Tumblr VHS. Vice shabby chic flannel locavore, tousled kale chips aesthetic chia
    cred next level yr banh mi migas PBR&amp;B ugh. Locavore dreamcatcher organic fashion axe normcore banh mi.</p>
  <p>Wes Anderson four dollar toast Carles, quinoa synth XOXO beard next level cred. Marfa taxidermy migas pork belly wayfarers meditation, Banksy cardigan yr sustainable normcore street art Pinterest direct trade before they sold out. Swag Marfa tilde Brooklyn
    mlkshk, cold-pressed Godard Echo Park messenger bag pug ugh keytar banjo Pinterest. Four loko High Life ethical direct trade. Meditation migas twee, 90's Godard pour-over Pinterest locavore stumptown chambray Echo Park beard McSweeney's ugh +1. Literally
    paleo chia, actually disrupt hoodie drinking vinegar pour-over. Lo-fi tilde Pitchfork +1 irony High Life trust fund, hoodie Austin.</p>
  <p>Truffaut jean shorts freegan, butcher lumbersexual sriracha seitan disrupt sartorial craft beer selfies literally. Jean shorts raw denim lo-fi plaid, messenger bag Odd Future fashion axe hella Helvetica Pitchfork McSweeney's fixie sriracha Carles. Artisan
    deep v +1, Austin keffiyeh meh church-key slow-carb VHS mustache. Keffiyeh before they sold out vegan, fanny pack fingerstache pork belly pickled try-hard gastropub swag. Art party try-hard four loko VHS, Etsy paleo meh sustainable whatever Truffaut
    normcore Portland tote bag chillwave Tumblr. Fixie Odd Future flexitarian quinoa, tousled wayfarers American Apparel +1 cray retro. Selfies migas Odd Future, vegan Tumblr gastropub locavore beard pork belly Neutra.</p>
  <p>Stumptown cold-pressed kogi authentic small batch Echo Park cliche High Life fanny pack actually blog, scenester ennui selvage. Bespoke flannel vegan drinking vinegar disrupt. High Life readymade tattooed 8-bit, Truffaut church-key tofu tousled four
    dollar toast Pinterest fixie. Bespoke Williamsburg 90's tote bag, seitan taxidermy four loko roof party chambray typewriter actually disrupt Marfa banjo +1. You probably haven't heard of them viral sriracha ugh, DIY before they sold out Tumblr cronut
    gluten-free paleo kitsch. Bicycle rights umami Truffaut, sustainable messenger bag cray flannel Marfa. Cred pickled fap street art, you probably haven't heard of them kogi retro.</p>
</section>
            
          
!
            
              header {
  height:500px;
  overflow:hidden;
  position:relative;
  h1 {
    position:absolute;
    top:50%;
    width:100%;
    text-align:center;
    font-size:60px;
    font-family: 'Limelight', cursive;
    font-weight:900;
    line-height:60px;
    margin-top:-30px;
    color:white;
    text-shadow:4px 4px 0 rgba(0,0,0,.3);
  }
  #parallax {
    width:100%;
    height:auto;
    display:block;
  }
}
section {
  &.body-copy {
    max-width:600px;
    margin:50px auto 0 auto;
    font-family:helvetica neue,helvetica,arial,sans-serif;
    font-weight:200;
    p {
      margin: 0 0 20px 0;
      font-size:16px;
      line-height:22px;
    }
  }
}
            
          
!
            
              // keep in mind that this script is written to target images that are already at the very top of the page. It would need to be adjusted for images that are further down.

$(document).ready(function() {
// once the image loads, fire off the first function
  $('.parallax').load(function() {
// store targeted image
    var target = $(this);
// get the height of the image
    var parallaxHeight = target.height();
// calculate the offset needed to vertically center the image in its container 
    var initialOffset = parallaxHeight / 2;
// use the calculated offset to create a negative top margin that vertically centers the image
    target.css('margin-top', '-' + initialOffset + 'px');
    
// when the user scrolls, execute the parallax effect
    $(window).scroll(function() {
// get the current scroll distance from the top of the screen
      var windowScrollPosition = ($(window).scrollTop())/2;
// subtract the scroll position from the previously calculated offset
      var newParallaxOffset = (initialOffset - windowScrollPosition);
// as user scrolls, continuallly adjust the negative top margin on the image
      target.css('margin-top','-'+newParallaxOffset+'px')
    });
  });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console