我正在尝试使用JS和CSS效果制作parallax着陆元素，即在滚动页面时，div（图像）的内容应逐个显示。
在我的代码中，我能够使用JS在CSS3效果（转换和翻译）中显示div的内容，但我希望它能够按顺序显示。
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
$('.logo').css({
'transform':'translate(0px, '+ wScroll /2 +'%)'
});
$('.back-bird').css({
'transform':'translate(0px, '+ wScroll /8 +'%)'
});
$('.fore-bird').css({
'transform':'translate(0px, '+ wScroll /95 +'%)'
});
if(wScroll > $('.clothes').offset().top-($(window).height()/0.25)){
$('.clothes').each(function(i){
setTimeout(function(){
$('.clothes').eq(i).addClass('is-showing');
}, 150*(i+1));
});
}
}); body{
width:auto;
height:auto;
}
.content{
width:90%;
height:3500px;
background:#BCE8E2;
margin:auto;
}
.birdbox{
width:inherit;
height: 600px;
background:url(MOUN.jpg) no-repeat top center;
background-size:cover;
margin: 20px 75px;
display: inline-block;
position:relative;
background-attachment:fixed;
overflow:hidden;
}
.content1{
width:inherit;
height:1200px;
background:#F9F9F9;
margin: 20px 75px;
display: inline-block;
}
.logo{
height:120px;
width:100%;
background:url(logo.png) no-repeat center;
position:absolute;
top:30%;
margin-top:-50px;
}
.fore-bird{
width: 90%;
height: 898px;
background: url(EGALE2.png) no-repeat;
background-size: 500px;
/* opacity: 0.6; */
filter: alpha(opacity=60);
background-position: 468px 80px;
position:absolute;
top: 126px;
}
.back-bird{
width: 90%;
height:390px;
background:url(shadowbrid.png) no-repeat;
background-size:180px;
position: absolute;
left: 10%;
top: 5%;
}
h1,p{
text-align:center;
}
.clothes{
width: 95%;
margin: 10px 269px;
position:relative;
opacity:0;
transform:translateX(20px);
transition: all 3s linear 0.5s;
}
.is-showing{
opacity:1;
transfrom: translateX(0px);
}
.row1{
width: inherit;
float: left;
}
.large{
margin: 100px auto;
height: 400px;
width: 28%;
background: url(model1.jpg) top center no-repeat;
background-attachment: fixed;
border-radius: 67%;
} <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Fixed background Moving element</title>
</head>
<body>
<div class="content">
<header class="birdbox">
<div class="back-bird"></div>
<div class="logo"></div>
<div class="fore-bird"></div>
</header>
<section class="content1">
<h1>Spread Love Studio</h1>
<hr>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<hr>
<div class="clothes">
<div class="row1">
<img src="model1.jpg" style="width:200px; margin: 20px 20px 20px 20px;" alt="Model"/>
<img src="model2.jpg" style="width:200px; margin: 20px 20px 20px 20px;" alt="Model"/>
<img src="model3.jpg" style="width:200px; margin: 20px 20px 20px 20px;" alt="Model"/>
</div>
<div class="row1">
<img src="model1.jpg" style="width:200px; margin: 20px 20px 20px 20px;" alt="Model"/>
<img src="model2.jpg" style="width:200px; margin: 20px 20px 20px 20px;" alt="Model"/>
<img src="model3.jpg" style="width:200px; margin: 20px 20px 20px 20px;" alt="Model"/>
</div>
<div class="row1">
<img src="model1.jpg" style="width:200px; margin: 20px 20px 20px 20px;" alt="Model"/>
<img src="model2.jpg" style="width:200px; margin: 20px 20px 20px 20px;" alt="Model"/>
<img src="model3.jpg" style="width:200px; margin: 20px 20px 20px 20px;" alt="Model"/>
</div>
</div>
</section>
<div class="large">
</div>
</div>
<script src="jquery.min.js"></script>
<script src="../para.js" type="text/jscript"></script>
</body>
</html>