A Pen by Scott Marshall.

index.html

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,700,900,300,100' rel='stylesheet' type='text/css'>
<div class="overlay">
  <div class="wrap">
   <h1>Scrolling Form</h1>
<input type="text" placeholder="Username">
<input type="email"placeholder="Password">
    <input type="submit" value="Sign In">
    <a href="#"><i class="fa fa-question"></i>Forgotten Password</a>
    <a href="#"><i class="fa fa-user"></i>Create an Account</a>
  </div>
</div>

INFINITE-SCROLLING-FORM.markdown

INFINITE SCROLLING FORM

A Pen by Scott Marshall on CodePen.

License.

style.css

.overlay{
  position:fixed;
   background: url(http://marshall-design.com/codepen/paper.jpg) repeat-y center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-animation:100s scroll infinite linear;
  -moz-animation:100s scroll infinite linear;
  -o-animation:100s scroll infinite linear;
  -ms-animation:100s scroll infinite linear;
  animation:100s scroll infinite linear;
  top:0;
  left:0;
  width:100%;
 height:100%;
}

h1{
  text-align:center;
  color:#FFF !important;
  margin-top:40%;
  font:60px Lobster;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

p{
  color:#FFF;
  text-align:center;
  font:15px Lobster;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}


@-webkit-keyframes scroll{
  100%{
    background-position:0px -3000px;
  }
}

@-moz-keyframes scroll{
  100%{
    background-position:0px -3000px;
  }
}

@-o-keyframes scroll{
  100%{
    background-position:0px -3000px;
  }
}

@-ms-keyframes scroll{
  100%{
    background-position:0px -3000px;
  }
}

@keyframes scroll{
  100%{
    background-position:0px -3000px;
  }
}

.wrap{
  width:400px;
  margin:0 auto;
}

input{
  width:100%;
  padding:10px;
  margin-bottom:20px;
  border-radius:5px;
  border:none;
  outline:none;
  font:13px Raleway;
}

input[type="submit"]{
  background:#e74c3c;
  color:#FFF;
  width:105%;
  padding:15px;
  font-weight:700;
  opacity:0.8;
}


input[type="submit"]:hover{
cursor:pointer;
  opacity:1;
}

input[type="text"]:focus{
  border-left:5px solid #e74c3c;
  -webkit-transition:0.4s ease;
}

input[type="email"]:focus{
  border-left:5px solid #e74c3c;
  -webkit-transition:0.4s ease;
}

.fa-newspaper-o{
  font-size:70% !important;
  margin-right:10px;
  position:relative;
  top:-4px;
}

a{
  font:13px Raleway;
  color:#FFF;
  font-weight:700;
  text-decoration:none;
  opacity:0.6;
}

a:hover{
  opacity:1;
}

.fa-user,.fa-question{
  margin-right:5px;
}

.fa-user{
  margin-left:5px;
}