Scroll down that hole.

index.haml

.hole
.content
 .hey Scroll Down
 .hey3 Well,
 .hey4 Radial!
 .hey5 Images?
 %img{:src => "http://lorempixel.com/output/abstract-q-c-640-480-10.jpg"}
 %img{:src => "http://lorempixel.com/output/abstract-q-c-640-480-1.jpg"}
 %img{:src => "http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"}
 %img{:src => "http://lorempixel.com/output/abstract-q-c-640-480-3.jpg"}
 .hey2 Liked that?
 .hey6 IE? Maybe..
 .hey7 
  %a{:href => "http://codepen.io/XDBoy018/pen/PwNrYr"} Check this!
  .hey8 Please heart!
 
 
 
 

script.js

//Nope
//CSS Parallax only ^_^

Scroll-down-that-hole..markdown

Scroll down that hole.

Isn't it a hole??

A Pen by Abhijit Hota on CodePen.

License.

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Raleway);
body{
  background:#EBC588;
  z-index:-2;
  a{
    color:inherit;
  }
}
 *:before,*:after{
    position: absolute;
    content:"";
 }
.hole{
  height:400px;
  width:400px; 
  position: fixed;
  margin: auto;
  top:0;
  left:0; 
  bottom:0;
  right:0;
  background:-moz-radial-gradient(center, transparent 50%, #EBC588 40%);
  background:-webkit-radial-gradient(center, transparent 50%, #EBC588 40%);
  background:-o-radial-gradient(center, transparent 50%, #EBC588 40%);
background:-ms-radial-gradient(center, transparent 50%, #EBC588 40%);  
  background:radial-gradient(center, transparent 50%, #EBC588 40%);
  &:before{
    height:300px;
    width:100%;
    background:#EBC588;
    top:-300px;
  }
  &:after{
    height:300px;
    width:100%;
    background:#EBC588;
    top:400px;
  }
}

.content{ 
  .hey,.hey2,.hey3,.hey4,.hey5,.hey6,.hey7{
    background:#2c3e50;
    height:100%;
    width:100%;
    color:#e74c3c;
    text-align:center;
    line-height:400px;
    font-size:40px;
    word-wrap:break-word;
  }
  .hey2,.hey8{
    height:520px; 
  }
  height:400px;
  width:400px; 
  position: absolute;
  margin: auto;
  top:0;
  left:0; 
  bottom:0;
  right:0;
  //
  z-index:-1;
  font-family: 'Raleway', sans-serif;
  img{
    max-width:100%;
    height:100%;
    display: block;
  }
}