日志

每日CSS_滚动页面动画效果

 来源    2021-01-13    1  

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

相关文章
waypoint+animate元素滚动监听触发插件实现页面动画效果
日志 最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究 首先来介绍下jquery ...
4
基于html5和css3响应式全屏滚动页面切换效果
日志分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...
1
wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)
日志CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
1
从页面左边飞入页面动画效果
日志body { overflow: hidden; /*此处需要设置溢出隐藏,否则文字起始位移超过页面大小就会在页面下方出现横的滚动条*/ } /*定义一个名字为lefteaseinAnimate动画, ...
1
如何使用jQuery(通过滚动或触发动画)为PNG序列设置动画效果
问答越来越多我看到一个效果,其中pngs被加载到一系列DIV(或一个div)中,然后逐帧排序,或者基于按钮点击或基于滚动.我试图查看代码,我知道javascript正在做繁重的工作,但我仍然有点迷失,有没 ...
2
通过滚动页面来实现jQuery动画元素
问答我正在尝试通过滚动页面来创建动画,如下所示: $(function() { $(document).on('scroll', function() { var top = $(document).sc ...
1
css3 – 在停止CSS动画后滚动页面时如何防止工件出现在Webkit中
问答在某些情况下,我必须停止CSS关键帧动画.如果我之后滚动页面,我倾向于在屏幕上接收文物.在停止动画之前,它们出现在我停止的div的位置.有时我会从原始位置到先前动画div的新位置获得这些伪影的&quo ...
1
html – 滚动页面时如何在纯CSS中为部分设置动画?
问答我正在寻找一种方法来动画(使用@keyframes,转换--)当用户滚动页面时的一些元素.例如: >当offset为0时:div的高度为:100px. >当偏移量介于0和100之间时:di ...
1
iOS开发之各种动画各种页面切面效果
日志注:其中有些效果调用了CATransition的Private API, 仅供娱乐. 补充:还是有好多小伙伴问那些可以在AppStore中使用,调用私有API的肯定是不行的,而下方有些就调用了私有AP ...
1
太赞了!超炫的页面切换动画效果附源码下载
日志今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了 ...
1
真是好东西!一组动感的页面加载动画效果
日志如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站,你可能已经注意到在显示新内容之前动感的页面加载动画了.这种风格的动画效果最近非常流行,因此这篇文章想给 ...
1
iOS 视图控制器转场动画/页面切换效果/跳转动画 学习
日志一 学习 在 UINavigationController 中 push 和 pop 的转场效果      (基于iOS7 以上的转场方式) 经过学习了解到,重点分三块: (1)pushAnimati ...
2
aos.js超赞页面滚动元素动画jQuery动画库
日志插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...
2
详解用CSS3制作圆形滚动进度条动画效果
日志主  题       今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条> ...
1
jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
日志插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
1
赞!超炫的页面切换动画效果附源码下载
日志在下面的示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D ...
1
HTML 页面加载动画效果
日志浏览器:Chrome, IE <!doctype html> <html> <head> <title>CSS transform: CSS only ...
1
Android -- ViewPager多页面滑动切换以及动画效果
日志背景                                                                                           ViewPag ...
1
基于swiper的移动端H5页面,丰富的动画效果
日志概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...
2
Windows Phone使用sliverlight toolkit实现页面切换动画效果
日志使用应用时,好多app在页面切换的时候都有一个动画效果,感觉很炫,也大大增加了用户体验,怎么实现呢? 界面的切换,可以用Windows Phone Toolkit中的TransitionService ...
1