每日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 是很好的一个动画库, 值得我们学习.