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

每日CSS_滚动页面动画效果的更多相关文章

  1. 每日CSS_霓虹灯按钮悬停效果

    每日CSS_霓虹灯按钮悬停效果 2020_12_20 1. 代码解析 1.1 html 代码片段解析 <a href="#"> <span></spa ...

  2. [Android实例] app引导页(背景图片切换加各个页面动画效果)（申明：来源于网络）

    [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...

  3. waypoint+animate元素滚动监听触发插件实现页面动画效果

    最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究 首先来介绍下jquery. ...

  4. wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  5. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  6. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  7. 前端实现app引导页面动画效果

    插件描述:jQuery引导插件TourTip 交互式可视化指南网页上的元素.使用方法 步骤1: 将以下标记添加到您的文档的<head> 你还需要复制旁边插件的css文件夹和下载的IMG文件 ...

  8. vue中，模拟锚点定位，实现滚动动画效果

    平时我们利用锚点进行页面内的快速瞬移,画面跳转生硬,观感很差. 在VUE中,如何快速的实现锚点效果,并且还让它拥有滚动的动画效果呢. 其实两行代码就能解决问题 1 <a @click=" ...

  9. 使用 SVG 来实现波浪 (wave) 动画效果

    如下图所示的波浪动画效果,实现方法有很多,比如CSS或者是js等方法都可以实现.不过,要是使用SVG来实现的,我觉得比其它两种方法都要简单.这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么 ...

随机推荐

  1. Llbp2p是什么？

    这是个很好的问题.用一句话来概况就是libp2p是一个模块化的协议系统,它的规范和程序库可以用来开发p2p网络应用程序. 对等节点基础 对于我们对libp2p在上面的概要描述有很多内容需要进一步解释, ...

  2. 百度前端技术学院-基础-day1

    2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...

  3. react+redux项目搭建及示例

    React + Redux示例,实现商品增删改 目录结构 1.项目搭建 1.1 使用create-react-app react_redux创建项目 1.2 安装使用redux需要的依赖 npm in ...

  4. Linux相关知识基础

    目录 前言 第一章 Linux远程连接管理 1. 为什么要远程连接Linux系统 2. 连接前的小知识 2.2.1 IP地址 2.2.2 端口的概念 2.2.3 协议的概念 3. 远程连接Linux的 ...

  5. OpenShift添加应用健康检查功能

    什么是健康检查? 对于部署成功的应用来说,通过访问接口.执行特定命令等方式判断应用是否存活.正常的方式称为健康检查. 在 OpenShift 或 Kubernetes 中,健康检查都有两个探针,分别是 ...

  6. idea 最好用的插件

    1.lombok 不用写get,set方法 2.MyBatisCodeHelperPro 3.Rainbow Brackets 彩虹括号 5.activate-power-mode 动感打字 7.Ba ...

  7. 移动端 rem和flexible

    一.rem布局 rem是相对于根元素的字体大小单位. 假设html的字体大小为16px,那么1rem = 16px; 一旦根元素html定义的font-size变化,整个页面中运用到的rem都会随之变 ...

  8. Spring Cloud Alibaba基础教程-Nacos(一)

    2019快结束,也有很久没写博客了,今天我们来谈谈Nacos,如果对您有帮助,麻烦左上角点个关注 ,谢谢 ! 嘻嘻 今天先写第一篇 文章目录 为什么要使用Nacos Eureka 闭源 Nacos的优 ...

  9. 拥抱云原生，如何将开源项目用k8s部署？

    微信搜索[阿丸笔记],关注Java/MySQL/中间件各系列原创实战笔记,干货满满. k8s以及云原生相关概念近年来一直比较火热,阿丸最近搞了个相关项目,小结一下. 本文将重点分享阿里开源项目otte ...

  10. Docker实例开机启动

    部署项目服务器时,为了应对停电等情况影响正常web项目的访问,会把Docker容器设置为开机自动启动. 在使用docker run启动容器时,使用--restart参数来设置: docker run ...