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="background">
  <p>Messenger bag kitsch sustainable next level. Actually locavore semiotics marfa, chicharrones cold-pressed jean shorts umami vaporware blog pour-over hell of woke truffaut celiac. Quinoa literally roof party cray sartorial plaid. Hashtag asymmetrical +1 8-bit hoodie quinoa. Wayfarers food truck disrupt vice vegan activated charcoal, whatever knausgaard gentrify hell of sriracha af. IPhone chartreuse lyft, hell of umami direct trade meggings kombucha four dollar toast hoodie health goth vinyl. Umami ugh tilde four dollar toast, chicharrones seitan banh mi messenger bag retro.</p>
<p>
Humblebrag jean shorts seitan, church-key taxidermy freegan PBR&B beard. Pug chia cliche, seitan vegan lyft schlitz gastropub. Ramps food truck tote bag, celiac kogi cardigan DIY slow-carb coloring book. Flexitarian umami sustainable raw denim hot chicken. Pour-over fap kogi, keffiyeh man bun live-edge edison bulb skateboard. Kinfolk blog health goth, tofu activated charcoal sriracha edison bulb four loko hella normcore selvage. Copper mug keytar shabby chic, iceland kitsch chartreuse sartorial try-hard raclette pour-over flexitarian raw denim vinegar glossier.
</p>
 <p>
Portland af gentrify, iceland fashion axe la croix helvetica truffaut mlkshk meh cardigan pickled. Tacos whatever farm-to-table gastropub, copper mug hot chicken semiotics schlitz shoreditch. Man bun affogato blue bottle, intelligentsia fashion axe raclette vape hashtag church-key sustainable tacos. Vinyl kitsch sriracha keytar, viral single-origin coffee meditation authentic truffaut poke. Listicle keytar blue bottle direct trade iceland, authentic cray mumblecore kickstarter banjo mixtape organic four loko. Before they sold out mlkshk blog jianbing shabby chic pork belly. Health goth before they sold out jianbing microdosing.
  </p>
<p>
Beard pitchfork enamel pin irony iceland. Sartorial marfa la croix 3 wolf moon 90's whatever hoodie, tousled tbh waistcoat kale chips. Semiotics shoreditch fingerstache, echo park lomo bespoke sustainable salvia literally cold-pressed copper mug art party lumbersexual. 
</p>
    <h1 class="fadein"> fade in on scroll </h1>
<p>
    Flexitarian before they sold out letterpress, everyday carry vegan snackwave mustache asymmetrical bitters enamel pin pitchfork actually tacos cred single-origin coffee. Cardigan chicharrones pinterest, lo-fi vaporware hashtag quinoa waistcoat VHS. Heirloom next level godard, vape mumblecore waistcoat actually semiotics hell of brunch. Lomo jean shorts taxidermy, cronut lo-fi banjo prism pitchfork mumblecore godard beard jianbing offal whatever.</p>
  <h2 class="fadein2"> more things fade in</h2>
</div>
              
            
!

CSS

              
                body {
  margin: 0px 0px 0px 0px !important;
}
.background {
  background-color: #EFEFEF;
}
p {
  font-family: helvetica;
  font-size: 1.5em;
  font-weight: lighter;
  text-align: center;
  position: relative;
  margin: 0px 20px 0px 20px;
  color: #9A9A9A
}
.fadein {
  font-size: 3em;
  font-family: helvetica;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  color: #FF3B3F;
}
.fadein2 {
  font-size: 3em;
  font-family: helvetica;
  text-align: center;
  opacity: 0;
  color: #FF3B3F;
  margin-bottom: 0px !important;
}
              
            
!

JS

              
                $(function(){  // $(document).ready shorthand
  $('.content').fadeIn('slow');
});

$(document).ready(function() {
    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Fade in one element */
        $('.fadein').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
                
                $(this).animate({'opacity':'1'},1300);       
            }
        }); 
        /* Fade in second element more slowly */
          $('.fadein2').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},4000);
            }
            
        }); 
    
    });
    
});
              
            
!
999px

Console