A Pen by Andreas Storm.

index.haml

.blurImg
  %div{style: "background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"}
  .blur{style: "background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"}
%header
  %div
    %h1
      Medium
    %p
      Everyone’s stories and ideas
    %a{href: "https://medium.com/", title: "Medium"} Learn more
  %nav{role: "navigation"}
    %ul
      %li
        %a.active{href: "#"} Reading List
      %li
        %a{href: "#"} Bookmarks
      %li
        %a{href: "#"} Top 100
.container
  %div

Medium-Scroll-Effect.markdown

Medium Scroll Effect

A Pen by Andreas Storm on CodePen.

License.

script.coffee

#Image Credit - https://medium.com/

#https://github.com/andreasstorm

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

style.stylus

body
  font-size 14px
  font-family Sans-Serif

*
  box-sizing border-box

a
  text-decoration none

.blurImg
  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

.blur
  opacity 0

header
  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
    a
      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
      &:hover
        background white
        color Gray
  p
    font-size 1.5em
    margin-bottom 0.7em
    font-family Times New Roman

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

nav
  max-width 600px
  margin 0 auto
  height 60px
  border-top 1px rgba(255,255,255,0.35) solid
  ul
    li
      display inline-block
      margin-right 20px
      a
        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
        &.active
          box-shadow 0px -1px 0px white

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

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