每日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;
width: 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;
width: 100%;
min-height: 100vh;
padding: 100px;
}
.box h2{
font-size: 3em;
}
.box .logo{
max-width: 400px;
}
第三頁設置
.box2{
position: relative;
width: 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;
width: 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;
width: 100%;
min-height: 100vh;
padding: 100px;
}
.box h2{
font-size: 3em;
}
.box .logo{
max-width: 400px;
}
.box2{
position: relative;
width: 100%;
min-height: 100vh;
padding: 100px;
background: #000;
}
.box2 h2{
font-size: 3em;
color: #fff;
}
這里使用到的 gsap 是很好的一個動畫庫, 值得我們學習.