Pen Settings

HTML

CSS

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

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

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.

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

              
                <div class="bg"></div>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<section>
  <div class="black">
  <h1>Simple Parallax Effect</h1>
  <h2>An Interactive Codepen by Scott Marshall</h2>
  <h3>What is Parallax</h3>
  <p>Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.</p>
  <h3>How it's Created</h3>
  <p>You might be expecting a huge tutorial on Parallax Scrolling but actually this effect has little to no syntax and is easy to achieve in a matter of minutes. Within minutes you can create an amazing effect like the one you see on this page.
  <p>It's created with a little bit of Css and Jquery the effect is simple. To achieve you must first create a div with the following attributes:</p>
 <ul>
   <li>position : fixed;</li>
   <li>width: 100%;</li>
      <li>height: 300%;</li>
      <li>background: ( your image url );</li>
      <li>top: 0;</li>
      <li>left: 0;</li>
  </ul>
  <p>So why should we use this syntax and why is it valid? We must set the div to the fixed position so that the image background remains fixed. Secondly we set the width to 100% to cover the document and set the height a little larger to compensate for the scrolled effect. Next we set the top and left positions to 0 so that the background image is set to top left. After this syntax is applied you can set the background image you would like to have a scroll effect for.</p>
  <h3>The JQuery</h3>
  <p>Like the Css there is not much to expect for the Jquery the syntax is simple and completes the parallax effect so that you can start creating amazing looking pages! </p><p>For the JQuery we will be using the Jquery Scroll Function. First we create a new function which is called parallax. In this function we create a variable which is equal to the top of the browser window. Last but not least we change the css so the when the window is scrolled the background image in negatively scrolled by a certain amount of pixels. This effect can be sped up or slowed down.</p>
  </div>
  <div class="white">
  <h1>Scroll Down for Demo</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis orci quis massa consequat consequat. Vestibulum vel velit vitae justo mattis tempus sed id ex. Donec tempus bibendum dolor nec bibendum. Suspendisse potenti. Suspendisse diam mauris, consequat non nulla id, tempor ultricies mi. Proin ullamcorper tortor sit amet quam interdum elementum. Sed convallis urna in faucibus pretium.

<p>Nunc rhoncus aliquet sem, sit amet facilisis purus convallis at. Nam semper tortor id leo varius, vitae pharetra neque volutpat. Donec tempor commodo pretium. Fusce porta, est vel consectetur sollicitudin, magna elit fringilla nisl, sed feugiat ipsum tortor sed nunc. Aenean ac maximus mi. In non dui pharetra, ullamcorper elit at, bibendum sem. Fusce eu libero sodales nisi mattis finibus sed ut metus. Vivamus mollis tortor mauris. Sed quam orci, bibendum finibus neque et, suscipit varius turpis.</p>

<p>Integer non metus neque. Integer varius vehicula eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec augue sapien, dignissim in erat ac, auctor porttitor lectus. Curabitur enim justo, sagittis quis massa vel, fermentum efficitur felis. Phasellus id venenatis odio. Ut sed nunc sit amet quam congue porttitor nec ut magna. In maximus semper dui, eget porttitor erat congue in. In sem erat, laoreet sed pellentesque non, gravida quis ipsum.</p>

<p>Morbi a libero pellentesque, pellentesque augue non, finibus ligula. Donec tincidunt elementum vulputate. Morbi ipsum mauris, molestie quis tellus vitae, iaculis scelerisque libero. Donec erat urna, sollicitudin eget interdum et, faucibus non tortor. Etiam egestas et dolor ac dignissim. Mauris ac imperdiet neque, vel vulputate odio. Fusce ut lectus risus. Sed condimentum dolor ut convallis tempus. Vivamus luctus massa quam, id volutpat justo eleifend sed. Nam vehicula ex a lectus ultrices, ac finibus velit lobortis. Curabitur lobortis maximus mauris quis auctor. Sed in euismod turpis, ut dignissim justo. Vivamus dictum lobortis ipsum vitae dapibus. Maecenas sed semper nisl. Integer velit felis, molestie nec felis eu, mattis accumsan augue.</p>

<p>Donec auctor risus dignissim ligula sagittis molestie. Sed nec dignissim tellus. Praesent nibh augue, euismod sit amet orci a, posuere dignissim odio. Sed pulvinar lorem eros, et vehicula elit consectetur non. Vestibulum vel rutrum sem. Duis venenatis nisi efficitur nulla pellentesque euismod sit amet scelerisque lacus. Aenean nunc nulla, scelerisque sit amet libero sed, vulputate faucibus mi. Nam malesuada quis quam eu dictum. Quisque viverra velit eros, et ultrices erat bibendum ac. Ut lectus orci, bibendum ut lobortis eget, lacinia a dui. Sed interdum purus sed dolor dictum, dictum vestibulum nunc aliquet. Phasellus scelerisque ligula risus, a suscipit leo fringilla nec.</p>
  </div>
</section>
              
            
!

CSS

              
                /************************************
BACKGROUND
************************************/
.bg {
  background: url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/diagmonds.png');
  position: fixed;
  width: 100%;
  height: 300%;
  top:0;
  left:0;
  z-index: -1;
}

/************************************
SECTION
************************************/
section{
  color: #fff;
  font-family:Raleway;
  width: 800px;
  margin: auto;
  line-height: 24px;
  font-size: 1em;
  font-weight:700;
  h1{
    font-size:2.4em;
  }
  h2{
    font-size:0.8em;
  }
}

/************************************
MY BLACK OVERLAY
************************************/
.black{
  background:rgba(0,0,0,0.5);
  padding:20px 40px 20px 40px;
  border-top:1px solid rgba(255,255,255,0.2);
}

/************************************
SOME PADDING
************************************/
.white{
  padding:20px 40px 20px 40px;
}

              
            
!

JS

              
                $(window).scroll(function(e){
  parallax();
});

//PARALLAX FUNCTION
function parallax(){
  var scrolled = $(window).scrollTop();
  $('.bg').css('top',-(scrolled*0.1)+'px');
}

//NOT THE MOST EFFICIENT PARALLAX, BUT SIMPLE
              
            
!
999px

Console