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

              
                #banner
  .inner
     #filter
      h1 This text blurs when you scroll down
      p It relies heavily on -webkit-filter: blur(); so will pretty much only work in Chrome and Safari.
#main-content 
  .inner
    h2 Content Heading
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti odit magnam et itaque ex sed fugit praesentium perspiciatis atque cumque quam officiis facere culpa facilis temporibus aut tempore dolor quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum rerum dolore vero tempora doloremque fugiat iure fugit qui quisquam consequuntur quas dolor neque veritatis repudiandae minima perspiciatis quasi aut blanditiis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque asperiores similique explicabo magni ullam nesciunt placeat nostrum recusandae maxime necessitatibus laborum voluptatibus animi facere quam voluptate nobis tempora! Quidem consequuntur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem quibusdam blanditiis eveniet aut animi quos aspernatur ipsa tempora consectetur! Dolorum excepturi neque reprehenderit architecto quae blanditiis accusantium placeat dolores Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi officiis nemo adipisci provident. Optio deserunt neque ducimus perferendis velit sint molestias error adipisci deleniti voluptatibus laboriosam numquam dolore harum nobis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eum enim atque fugit pariatur omnis nostrum blanditiis minima unde odit ipsam ex in nam nobis laboriosam repudiandae explicabo ipsa dolor?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti odit magnam et itaque ex sed fugit praesentium perspiciatis atque cumque quam officiis facere culpa facilis temporibus aut tempore dolor quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum rerum dolore vero tempora doloremque fugiat iure fugit qui quisquam consequuntur quas dolor neque veritatis repudiandae minima perspiciatis quasi aut blanditiis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque asperiores similique explicabo magni ullam nesciunt placeat nostrum recusandae maxime necessitatibus laborum voluptatibus animi facere quam voluptate nobis tempora! Quidem consequuntur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem quibusdam blanditiis eveniet aut animi quos aspernatur ipsa tempora consectetur! Dolorum excepturi neque reprehenderit architecto quae blanditiis accusantium placeat dolores Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi officiis nemo adipisci provident. Optio deserunt neque ducimus perferendis velit sint molestias error adipisci deleniti voluptatibus laboriosam numquam dolore harum nobis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eum enim atque fugit pariatur omnis nostrum blanditiis minima unde odit ipsam ex in nam nobis laboriosam repudiandae explicabo ipsa dolor?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti odit magnam et itaque ex sed fugit praesentium perspiciatis atque cumque quam officiis facere culpa facilis temporibus aut tempore dolor quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum rerum dolore vero tempora doloremque fugiat iure fugit qui quisquam consequuntur quas dolor neque veritatis repudiandae minima perspiciatis quasi aut blanditiis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque asperiores similique explicabo magni ullam nesciunt placeat nostrum recusandae maxime necessitatibus laborum voluptatibus animi facere quam voluptate nobis tempora! Quidem consequuntur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem quibusdam blanditiis eveniet aut animi quos aspernatur ipsa tempora consectetur! Dolorum excepturi neque reprehenderit architecto quae blanditiis accusantium placeat dolores Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi officiis nemo adipisci provident. Optio deserunt neque ducimus perferendis velit sint molestias error adipisci deleniti voluptatibus laboriosam numquam dolore harum nobis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eum enim atque fugit pariatur omnis nostrum blanditiis minima unde odit ipsam ex in nam nobis laboriosam repudiandae explicabo ipsa dolor?
              
            
!

CSS

              
                @import "nib"

@import url("https://fonts.googleapis.com/css?family=Belgrano|Audiowide")
  
global-reset()

//- http://www.colourlovers.com/palette/3221938/Why
  
primary-color = #D6E3C0
secondary-color = #5D4D66
tertiary-color = #B97779
quat-color = #CDB08C
initital-banner-height = 200px
fixed-width = 1000px
display-font = Audiowide
body-font = Belgrano

body
  background primary-color
  color darken(primary-color, 80%)
  font-size 18px
  font-family body-font
  line-height 1.8em

h2
  font-size 30px
  margin-bottom 20px

.inner 
  width fixed-width 
  margin 0 auto 

#banner
  background secondary-color
  color lighten(secondary-color, 50%)
  border-bottom 10px solid tertiary-color 
  height initital-banner-height
  position fixed
  width 100%
  overflow hidden
  font-family display-font
  font-weight 400
  letter-spacing 1px
  h1 
    font-size 30px
    color quat-color
    margin-bottom 10px
  p 
    font-size 20px
    color lighten(quat-color, 33%)
    
  
#filter 
  width fixed-width
  position absolute
  padding 50px 30px 30px
  box-sizing(border-box)

#main-content
  background primary-color
  min-height 300px
  padding-top initital-banner-height + 50px

  
              
            
!

JS

              
                var scrolling, 
    bannerHeight,
    blur, 
    filterMove,
    $banner = $("#banner"),
    $filter = $("#filter");


window.onscroll = function(){

  scrolling = true;
    
};


setInterval(function(){
  
  if(scrolling){
    
    var topDist = document.body.scrollTop;
   
    offsetBlur(topDist);
    
  } 
  
  scrolling = false;
  
}, 10);



offsetBlur = function(topDist){
  
  bannerHeight = 200 - topDist,
  blur = topDist/20,
  filterMove = 0 - ( topDist / 3);

  if (bannerHeight > 0){

    $banner.css({
      height: bannerHeight + 'px' 
    });

    $filter.css({
      "-webkit-filter": "blur(" + blur + "px)",
      top: filterMove + 'px'
    });

  } else {

     $banner.css({
        height: '0px' 
     });

  }
}

              
            
!
999px

Console