Фоно-фиксированный с эффектом прокрутки? ⇐ Jquery

[Anonymous]

Я застрял своими кодами, и я стараюсь изо всех сил создать фон, фиксированный CSS с помощью прокрутки jQuery.

Код: Выделить всё

Fixed Background Effect




Title here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.





Title here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.





Title here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.





Title here
Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.




© Copyright 2015

< /code>
вот мой css: < /p>
.header {
position: relative;
height: 100%;
background-color: #34495e;
z-index: 1;
}
.header h1 {
width: 90%;
color: #f2e6cd;
text-align: center;
font-size: 2.2rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
@media only screen and (min-width: 768px) {
.cd-header h1 {
font-size: 3.6rem;
font-weight: 300;
}
}

.background-fixed {
position: relative;
padding: 3em 5% 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.background-fixed h2, .background-fixed p {
color: #f2e6cd;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.background-fixed h2 {
font-size: 2.4rem;
margin-bottom: 1em;
}
.background-fixedp {
line-height: 1.6;
font-family: "Merriweather", serif;
}
.background-fixed .light-background h2, .background-fixed .light-background p {
color: #0f594d;
}
.background-fixed .main-content::after {
/* phone image on small devices */
content: '';
display: block;
width: 100%;
padding: 60% 0;
margin: 2em auto 0;
}
.background-fixed.img-1 {
background-color: #bf5138;
}

.background-fixed.img-2 {
background-color: #f2e6cd;
}

.background-fixed.img-3 {
background-color: #0f594d;
}

.background-fixed.img-4 {
background-color: #db9537;
}

@media only screen and (min-width: 768px) {
.background-fixed {
height: 100%;
padding: 0;
}
.background-fixed h2 {
font-size: 3.6rem;
font-weight: 300;
}
.background-fixed p {
font-size: 1.8rem;
line-height: 1.8;
}

.background-fixed.img-1 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-1.jpg");
}
.background-fixed.img-2 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-2.jpg");
}
.background-fixed.img-3 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-3.jpg");
}
.background-fixed.img-4 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-4.jpg");
}
}

footer {
background: #dadada;
padding: 15px 0;

}

footer p{
color: #000;
text-align:center;
}

вот мой jsfiddle: https://jsfiddle.net/v7a58odd/1/
Большое спасибо всем, кто может мне помочь.

Подробнее здесь: https://stackoverflow.com/questions/310 ... ing-effect