Parallax Picture Scrolling

A small script to make images scroll in a parallax way.

by Glynne Turner

HTML

<input type="text" id="quantity" />
<input type="hidden" name="quantity" />
<input type="submit" value="Submit" id="buy" />

CSS

body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.textbox {
    position: relative;
    height: auto;
    background: white;
    padding: 50px;
    margin-top: -1px;
    margin-bottom: -1px;
    z-index: 99;
    box-shadow: 0 0 18px rgba(80, 80, 80, 0.8);
}
.parallaxbox {
    position: relative;
    height: 80%;
    background: #444;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    border-top: 1px solid gray;
    z-index: 9;
}
a, a:visited {
    color: blue;
    text-decoration: none;
}
a:hover {
    text-decoration:underline;
}
.story {
    margin: 0 auto;
    min-width: 980px;
    overflow: auto;
    width: 980px;
}
.story .float-left, .story .float-right {
    padding: 20px 0 0 50px;
    position: relative;
    width: 256px;
}
.section_icon {
    width:256px;
    height: 256px;
    background-image: url(http://icons.iconarchive.com/icons/land-of-web/badge-social/256/digg-icon.png);
    background-repeat: no-repeat;
    position: relative;
    margin-top: 80px;
    margin-bottom: 5px;
}

JavaScript

$('#quantity').change(function(){
	var new_val = $('#quantity').val();
  $('input[name="quantity"]').val(new_val) 
})

$('#buy').click(function(){
var quantity=$('#quantity').val() , pass_quantity = $('input[name="quantity"]').val();
alert(pass_quantity)
})