@ juggler
Пожалуйста, попробуйте этот код, чтобы прокручивать текстовые и фоновые изображения отдельно по одному
<div id="frame">
<article>
<div class="parallax">
<div class="bg__foo">foo</div>
<div class="bg__bar">bar</div>
<div class="bg__baz">baz</div>
<div class="bg__bazz">bazz</div>
</div>
<div class="header">
<h1>Example for 'background-attachment : fixed'</h1>
</div>
<section>
<div class="container">
<p>No speeches. Short speech. You lost your partner today. What's his name - Emilio? Emilio is going to prison. The DEA took all your money, your lab. You got nothing. Square one. But you know the business and I know the chemistry. I'm thinking... maybe you and I could partner up. </p>
<p>I'm sorry, what were you asking me? Oh, yes, that stupid plastic container I asked you to buy. You see, hydrofluoric acid won't eat through plastic. It will, however, dissolve metal, rock, glass, ceramic. So there's that. How about something with some protein, maybe? Something green, huh? How are you even alive? </p>
<p>That is seventeen five - your half of the thirty-five thousand. Plus there's an extra fifteen in there, it's all yours, you've earned it. We made a deal. That's right. Because I think that we can do business together - we came to an understanding. Take a look at the money in your hand. Now just imagine making that every week. That's right. Two pounds a week, thirty-five thousand a pound. </p>
</div>
</section>
<section class="parallax">
<div class="bg__break">
<div class="capture">I... am very sorry. Is there anything I can do? I am on the board of this hospital. I can recommend doctors. Make sure he gets whatever he needs. The best treatment. How did that happen?</div>
</div>
</section>
<section>
<div class="container">
<p>What kind of man talks to the DEA? No man. No man at all. A crippled little rata. What a reputation to leave behind. Is that how you want to be remembered? Last chance to look at me, Hector. Can I help you sir? What can I do for you? I'm... sorry, I'm not following. I... think that you're confusing me for someone else. Sir, if you have a complaint, I suggest you submit it through our email system. I will be happy to refer you to our website. </p>
<p>I don't think we're alike at all, Mr. White. You are not a cautious man at all. Your partner was late and he was high. He's high often, isn't he? You have poor judgement. I can't work with someone with poor judgement. I've been told, it's excellent. That is not the only factor. I have to ask... why? Why him? How much product do you have on hand? I have your numbers. You can never trust a drug addict. </p>
<p>I didn't say I killed him. Dude's wife crushed his head with an ATM machine. Crushed his head... with an ATM machine... right in front of me. I mean, crushed it like... Oh my god, the sound... it's still in my ears. You know and the the blood, like everywhere. Like there was so much you would not believe. Man will you just please give me... just give me my weed alright? It helps with my nausea. </p>
<p>Four pounds... foooour pounds as if two pounds wasn't bad enough. we're talking two three hundred boxes of sinus pills there ain't that many Smurfs in the world. So no sudo? So you do have a plan! Yeah, Mr. White! Yeah, science! Yo... it's appointment only! Jeez, you look like... Lex Luthor. I got two dudes turned into raspberry slushy and flushed down my toilet. I can't even take a proper dump in there. I mean the whole damn house has gotta be haunted by now. </p>
<p>You didn't actually see Tuco? You got this money from Tuco? Tuco gave you this is what you're saying? You made a deal? How... why would you make a deal with that scumbag? You see what he did to me? No way man, okay, no understanding! Without even talking to me, you told this... insane ass-clown, dead-eyed killer, that uh... that we would give him two pounds a week? </p>
<p>Don't talk to me about hours, what about sudo, man? How are we gonna get that? You think the meth fairy is gonna just bring it to us? God it takes me a week to get this stuff. I'm driving all the way up to Las Cruces, two hundred miles each way to meet up with my Smurfs. The dudes who go to the drug stores and get a couple boxes at a time and then sell 'em to me. And that's maybe only good for, like a half pound worth. See that's the bottle neck in your brilliant business plan. Of course you would've known that if you would've just asked me. </p>
</div>
</section>
</article>
</div>
html, body {
font-family: 'Open Sans', sans-serif;
color: rgb(235,235,235);
background-color:rgb(20,20,20);
margin-top:0px;
margin-bottom:4px;
}
.demo-frame header {
display: none;
}
.demo-wrapper {
min-height: 500px;
}
.bsap_1280449 {
position: absolute;
top: 0;
right: 0;
}
.parallax [class*="bg__"] {
position: relative;
height: 300px;
text-indent: -9999px;
background-attachment: fixed;
background-position: top center;
background-size: cover;
}
.parallax [class*="bg__"]:nth-child(2n) {
box-shadow: inset 0 0 1em #111;
}
.parallax .bg__foo, .parallax .bg__bazz {
height: 100vh;
}
.parallax .bg__foo {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg);
}
.parallax .bg__bar {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg);
}
.parallax .bg__baz {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg);
}
.parallax .bg__bazz {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg);
}
.parallax .bg__break {
box-shadow: inset 0 0 1em #111;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg);
}
.parallax .capture {
float: right;
width: 200px;
padding: 1em;
margin: -1.5em 1em 0 0;
text-indent: 0;
background: rgba(243, 243, 243, 0.75);
box-shadow: 0 1px 0.125em #333;
color:rgb(20,20,20);
}
article .container {
width: 600px;
margin: 0 auto;
}
article .header {
position: relative;
margin: -5em 0 0 0;
padding: 1em;
text-align: left;
font-size: 2em;
color: #333;
background-color: rgba(255, 255, 255, 0.75);
}
article h1, article h2 {
margin: 0 0 0.333em;
}
article section {
padding: 3em;
}
article section.parallax {
margin: 0;
padding: 0;
}
#frame {
width:960px;
margin: 0 auto;
}
Надеюсь, приведенный выше код будет вам полезен.
Спасибо.