Medium Scroll Effect

A Pen By Andreas Storm

Pen Settings

↑ Insert the most common viewport meta tag

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation


Save Automatically?

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

Want a Run Button?

If active, the preview will update automatically when you change code.


              <div class='blurImg'>
  <div style="background-image: url('*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
  <div class='blur' style="background-image: url('*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
      Everyone’s stories and ideas
    <a href='' title='Medium'>Learn more</a>
  <nav role='navigation'>
        <a class='active' href='#'>Reading List</a>
        <a href='#'>Bookmarks</a>
        <a href='#'>Top 100</a>
<div class='container'>


              @import "nib"

  font-size 14px
  font-family Sans-Serif

  box-sizing border-box

  text-decoration none

  position relative
  width 100%
  height 440px
  z-index -1
  top 0
  left 0
  & > div
    position fixed
    width 100%
    height 440px
    background-repeat no-repeat
    background-size cover
    background-position center center

  opacity 0

  z-index 1
  position absolute
  top 0
  width 100%
  padding 0px 20px
  & > div
    max-width 600px
    margin 0 auto
    padding-top 150px
    height 380px
    text-align center
    color White
      font-size 0.8em
      letter-spacing 0.08em
      color rgba(255,255,255,0.85)
      line-height 30px
      padding 7px 14px
      border 1px solid rgba(255,255,255,0.3)
      border-radius 2em
      transition all 0.3s ease
        background white
        color Gray
    font-size 1.5em
    margin-bottom 0.7em
    font-family Times New Roman

  font-weight 800
  font-size 3.4em
  margin-bottom 0.2em

  max-width 600px
  margin 0 auto
  height 60px
  border-top 1px rgba(255,255,255,0.35) solid
      display inline-block
      margin-right 20px
        font-weight 800
        font-size 11px
        text-transform uppercase
        letter-spacing .2em
        color rgba(255,255,255,0.5)
        transition color 0.3s linear
        line-height 60px
        display block
          box-shadow 0px -1px 0px white

nav ul li, nav ul li a:hover
  color white

  height 1300px
  background white
  z-index 1
  padding 0px 20px
    max-width 600px
    margin 0 auto
    padding-top 40px



              #Image Credit -


$(window).scroll ->
  oVal = ($(window).scrollTop() / 240)
  $(".blur").css "opacity", oVal
Loading ..................