如何一次分别滚动一个文本和背景图像
how to scroll text and background images separately one at a time
我试图在问题的文本中描述我想做什么。我完全不确定它是否清楚。希望代码将有助于澄清..
html {
background: url(paradise_duplicate.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.first_background{
background: url(paradise_duplicate.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.second_background{
background: url(strumpf_village_2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.box{
display: inline-block; /* Make the width of box same as image */
margin: auto;
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
top: 0; /* Adjust this value to move the positioned div up and down */
text-align: center;
width: 90%; /* Set the width of the positioned div */
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 2.5%;
font-weight: bold;
color: #000000;
}
div.no_transbox {
margin: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home3_simple.css" />
<style>
</style>
</head>
<body>
<div class = "first_background">
<div class="box">
<div class="transbox">
<p>first text
<br><br>
text
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="transbox">
<p>
more text
</p>
</div>
</div>
</div>
<div class = "second_background">
<div class="box">
<div class="transbox">
<p>
more and more text
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="transbox">
<p>
last text
</p>
</div>
</div>
</div>
</body>
</html>
更详细地说，我想做的是放第一张图片，让文本在原地滚动，然后，当与第一张图片关联的最后一个文本出现在屏幕上时，背景图像开始随之移动，这样第二个背景图像就会出现在屏幕上。一旦这个新的背景图像完全显示在屏幕上，与 -it- 相关联的文本现在会在屏幕上滚动，背景图像是固定的。并且这种情况会根据需要持续到尽可能多的背景 images/text。我的代码显然不起作用。背景来自 html 标签，div 标签什么都不做.. 是的.. 我没有声称所写的代码在任何方面都是专业的，甚至可以跨平台工作。 ..充其量，它可以作为我想为其他专业人士稍后重写的东西做一个例子..
编辑：虽然这正是我在上面描述的内容，但以下可能是只有 css 才能真正做到的事情，以及启发我的事情：https://www.codesdope.com/blog/article/fixed-background-scrolling-effect-using-css/
@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;
}
希望以上代码对你有用。
谢谢。
我试图在问题的文本中描述我想做什么。我完全不确定它是否清楚。希望代码将有助于澄清..
html {
background: url(paradise_duplicate.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.first_background{
background: url(paradise_duplicate.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.second_background{
background: url(strumpf_village_2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.box{
display: inline-block; /* Make the width of box same as image */
margin: auto;
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
top: 0; /* Adjust this value to move the positioned div up and down */
text-align: center;
width: 90%; /* Set the width of the positioned div */
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 2.5%;
font-weight: bold;
color: #000000;
}
div.no_transbox {
margin: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home3_simple.css" />
<style>
</style>
</head>
<body>
<div class = "first_background">
<div class="box">
<div class="transbox">
<p>first text
<br><br>
text
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="transbox">
<p>
more text
</p>
</div>
</div>
</div>
<div class = "second_background">
<div class="box">
<div class="transbox">
<p>
more and more text
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="transbox">
<p>
last text
</p>
</div>
</div>
</div>
</body>
</html>
更详细地说，我想做的是放第一张图片，让文本在原地滚动，然后，当与第一张图片关联的最后一个文本出现在屏幕上时，背景图像开始随之移动，这样第二个背景图像就会出现在屏幕上。一旦这个新的背景图像完全显示在屏幕上，与 -it- 相关联的文本现在会在屏幕上滚动，背景图像是固定的。并且这种情况会根据需要持续到尽可能多的背景 images/text。我的代码显然不起作用。背景来自 html 标签，div 标签什么都不做.. 是的.. 我没有声称所写的代码在任何方面都是专业的，甚至可以跨平台工作。 ..充其量，它可以作为我想为其他专业人士稍后重写的东西做一个例子..
编辑：虽然这正是我在上面描述的内容，但以下可能是只有 css 才能真正做到的事情，以及启发我的事情：https://www.codesdope.com/blog/article/fixed-background-scrolling-effect-using-css/
@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;
}
希望以上代码对你有用。
谢谢。