判断滚动条位置来让不同区域的文字显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-2.1.4.min.js"></script>
<style>
body {
background: url('img/bg.jpg') no-repeat 50% 0;
color: #e02562;
}
#one,
#two,
#three {
position: relative;
height: 666px;
}
#one {
padding-top: 333px;
text-align: center;
opacity: 0;
border: 1px solid red;
transition: all 2.2s .3s;
}
#one h1 {
font-size: 93px;
}
#one h2 {
font-size: 33px;
font-weight: 100;
}
#two {
padding-top: 111px;
text-align: center;
border: 1px solid green;
}
#two h1 {
display: inline-block;
padding-top: 12px;
padding-bottom: 12px;
border-top: 3px solid #000;
border-bottom: 3px solid #000;
opacity: 0;
transform: scaleX(0);
transition: all 1.5s;
}
#two h2 {
font-size: 33px;
opacity: 0;
transform: scaleX(0);
}
#two .aa {
opacity: 1;
transform: scaleX(1);
}
#one.one1 {
opacity: 1;
transform: scaleX(1);
}
#three h1 {
position: absolute;
font-size: 77px;
right: 41%;
top: 11%;
opacity: 0;
transform: translateX(-200px);
transition: all 2s;
}
#three h2 {
position: absolute;
font-size: 33px;
right: 50%;
top: 30%;
opacity: 0;
transform: translateX(200px);
transition: all 2s .5s;
}
#three img {
position: absolute;
right: 33%;
top: 40%;
opacity: 0;
transform: translateX(200px);
transition: all 2.5s .5s;
}
#three h1.bb,
#three h2.bb,
#three img.bb {
opacity: 1;
transform: translateX(0px);
}
</style>
<script>
window.onload = function() {
$('#one').addClass('one1');
var two = $('#two').offset().top;
var buffer = 350;
var three = $('#three').offset().top;
var windowHeight = $(window).height();
// alert(windowHeight);
$(window).scroll(function() {
pos = $(window).scrollTop();
if (pos > two - buffer) {
$('#two > h1').addClass('aa');
$('#two > h2').addClass('aa');
}
if (pos > three - buffer) {
$('#three > h1').addClass('bb');
$('#three > h2').addClass('bb');
$('#three > img').addClass('bb');
}
if (pos < two - windowHeight + buffer) {
$('#two > h1').removeClass('aa');
$('#two > h2').removeClass('aa');
}
if (pos < three - windowHeight + buffer) {
$('#three > h1').removeClass('bb');
$('#three > h2').removeClass('bb');
$('#three > img').removeClass('bb');
}
})
}
</script>
</head>
<body>
<!--样式加给one本身,css样式不能加空格 #One.one1 表示即叫one又叫one1的!-->
<div id="one">
<h1>小甲鱼</h1>
<h2>1</h2>
</div>
<!-- $('#two > h2').addClass('aa');-->
<!--把aa样式加给two子级,修饰的时候就要#two .aa-->
<div id="two">
<h1>小金鱼</h1>
<h2>2</h2>
</div>
<div id="three" style="border: 1px solid blue">
<h1>小黑鱼</h1>
<h2>3</h2>
<img src="img/xiangyun.png" alt="">
</div>
</body>
</html>