每日CSS_滚动页面动画效果
2021_1_13
1. 代码解析
1.1 html 代码片段
<section>
<h2>开 始 滑 动</h2>
</section>
<div class="box">
<h2 class="text1">来看看 滑动效果呗! </h2>
<h2 class="text2">我是向左</h2>
<h2 class="text3">我是向右 (#^.^#)</h2>
<img src="logo.jpg" class="logo">
</div>
<div class="box2">
<h2 class="text4">来看看滑动效果呗! </h2>
<h2 class="text5">代码在最后哦</h2>
<h2 class="text6">滑动效果是啥? </h2>
</div>
共三个片段, 每个片段占 100vh, 也就是网页高度
1.2 script 代码片段
gsap.timeline({
scrollTrigger: {
trigger: '.box',
// 起点
start: 'center center',
// 终点
end: 'bottom top',
// 动画标记
// markers: true,
// 将动画关联到滑轮上
scrub: true,
pin: true,
}
})
.from('.text1', {x: innerWidth * 1})
.from('.text2', {x: innerWidth * -1})
.from('.text3', {x: innerWidth * 1})
.from('.logo', {
y: innerHeight * 1,
rotate: 360
})
gsap.timeline({
scrollTrigger: {
trigger: '.box2',
start: 'center center',
end: 'bottom top',
// markers: true,
scrub: true,
pin: true,
}
})
.from('.box2', {opacity: 0})
.from('.text4', {y: innerHeight * 1})
.from('.text5', {y: innerHeight * 1})
.from('.text6', {y: innerHeight * 1})
使用了 gsap 库, 能够添加动画效果
1.3 css 代码片段
基础设置
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
- 注意, 这里设置了所有的 box-sizing 为 border-box, css3 特性
第一页设置
section{
position: relative;
100%;
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
section h2{
font-size: 6em;
color: #fff;
font-weight: 500;
}
第二页设置
.box{
position: relative;
100%;
min-height: 100vh;
padding: 100px;
}
.box h2{
font-size: 3em;
}
.box .logo{
max- 400px;
}
第三页设置
.box2{
position: relative;
100%;
min-height: 100vh;
padding: 100px;
background: #000;
}
.box2 h2{
font-size: 3em;
color: #fff;
}
2. 源码
2.1 html 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="2021_1_13.css">
</head>
<body>
<section>
<h2>开 始 滑 动</h2>
</section>
<div class="box">
<h2 class="text1">来看看 滑动效果呗! </h2>
<h2 class="text2">我是向左</h2>
<h2 class="text3">我是向右 (#^.^#)</h2>
<img src="logo.jpg" class="logo">
</div>
<div class="box2">
<h2 class="text4">来看看滑动效果呗! </h2>
<h2 class="text5">代码在最后哦</h2>
<h2 class="text6">滑动效果是啥? </h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script>
gsap.timeline({
scrollTrigger: {
trigger: '.box',
start: 'center center',
end: 'bottom top',
// markers: true,
scrub: true,
pin: true,
}
})
.from('.text1', {x: innerWidth * 1})
.from('.text2', {x: innerWidth * -1})
.from('.text3', {x: innerWidth * 1})
.from('.logo', {
y: innerHeight * 1,
rotate: 360
})
gsap.timeline({
scrollTrigger: {
trigger: '.box2',
start: 'center center',
end: 'bottom top',
// markers: true,
scrub: true,
pin: true,
}
})
.from('.box2', {opacity: 0})
.from('.text4', {y: innerHeight * 1})
.from('.text5', {y: innerHeight * 1})
.from('.text6', {y: innerHeight * 1})
</script>
</body>
</html>
2.2 css 源码
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
section{
position: relative;
100%;
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
section h2{
font-size: 6em;
color: #fff;
font-weight: 500;
}
.box{
position: relative;
100%;
min-height: 100vh;
padding: 100px;
}
.box h2{
font-size: 3em;
}
.box .logo{
max- 400px;
}
.box2{
position: relative;
100%;
min-height: 100vh;
padding: 100px;
background: #000;
}
.box2 h2{
font-size: 3em;
color: #fff;
}
这里使用到的 gsap 是很好的一个动画库, 值得我们学习.