<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h3 {
width: 200px;
height: 100px;
background-color: red;
transition: all 1s;
transform: translateX(-1000px);
}
.section {
overflow: hidden;
}
/* .section .current h3 这种选择器不行，需要写成 .section.current h3 */
.section.current h3 {
transform: translateX(300px) translateY(200px);
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(function () {
$('#fullpage').fullpage({
// 每一屏的背景颜色
sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
// 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
afterLoad: function (link, index) {
console.log(index);
// current 类加给谁，谁就做动画
$('.section').removeClass('current');
// 让动画延迟执行100ms
setTimeout(() => {
$('.section').eq(index - 1).addClass('current');
}, 100);
}
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section"><h3>第一屏</h3></div>
<div class="section"><h3>第二屏</h3></div>
<div class="section">
<div class="slide"><h3>第三屏的第一屏</h3></div>
<div class="slide"><h3>第三屏的第二屏</h3></div>
<div class="slide"><h3>第三屏的第三屏</h3></div>
<div class="slide"><h3>第三屏的第四屏</h3></div>
</div>
<div class="section"><h3>第四屏</h3></div>
</div>
</body>
</html>
