HTML
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Parallax Sample">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="top-image bg-1">
<div class="child top">
<div class="copy">Here is my main title</div>
</div>
</div>
<div class="header-grad"></div>
<div class="container-fluid main-block">
<div class="section main-section">
<div class="container fadey">
<div class="row">
<div class="col-md-12 sub-copy">
So the problem I've been finding with parallax on iOS devices is that it puts space below the parallax window on scroll if you set the background attatchment to anything other than fixed. This works fine on destops but on iOS it scales the background to the height of the scroll area of the page. This resolves that issue. In the JS I've set the scroll speed to -0.20 this scrolls the parallax window up vs down. This is also the minium value I would set the spped to. Anyting faster or slower depending on how you view the absolute value, caused a stutter effect on iOS. Experiment and see what you think.
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png"
class="img-responsive">
</div>
<div class="col-md-6">
<h1 class="text-primary">A title</h1>
<h3>A subtitle</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi.</p>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="text-primary">A title</h1>
<h3>A subtitle</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi.</p>
</div>
<div class="col-md-6">
<img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png"
class="img-responsive">
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center text-primary">Team</h1>
<p class="text-center">We are a group of skilled individuals.</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="http://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png"
class="center-block img-circle img-responsive">
<h3 class="text-center">John Doe</h3>
<p class="text-center">Developer</p>
</div>
<div class="col-md-4">
<img src="http://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png"
class="center-block img-circle img-responsive">
<h3 class="text-center">John Doe</h3>
<p class="text-center">Developer</p>
</div>
<div class="col-md-4">
<img src="http://pingendo.github.io/pingendo-bootstrap/assets/user_placeholder.png"
class="center-block img-circle img-responsive">
<h3 class="text-center">John Doe</h3>
<p class="text-center">Developer</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: 'Lato', sans-serif !important;
}
.top-image{
background: url(https://jsbin-user-assets.s3.amazonaws.com/ipodscott/sample_table.jpeg);
background-position: center top;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height: 100vh;
display: table;
position: relative;
}
.header-grad{
position: relative;
display:block;
top: -30px;
height:30px;
width:100%;
z-index:999;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&0.01+40,0.3+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4zIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(0,0,0,0.01) 1%, rgba(0,0,0,0.01) 40%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(0,0,0,0.01)), color-stop(40%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.3))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.01) 40%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.01) 40%,rgba(0,0,0,0.3) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.01) 40%,rgba(0,0,0,0.3) 100%); /* IE10 preview */
background: linear-gradient(to bottom, rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.01) 40%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03000000', endColorstr='#4d000000',GradientType=0 ); /* IE6-8 */
}
.main-block{
background-color:#fff;
z-index: 999;
position: relative;
}
.main-section{
padding: 40px 0 0 0;
}
.child{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.copy{
color:#fff;
background-color: #000;
display: inline-block;
padding: 30px 30px 30px 35px;
font-size: 32px;
background-color: rgba(0, 0, 0, 0.6);
text-transform: uppercase;
font-weight: 700;
max-width:75%;
letter-spacing:0.1em;
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
.sub-copy{
margin: 0 0 40px 0;
}
