每日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. [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络)

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

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

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

  3. wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)

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

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

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

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

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

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

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

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

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

  8. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  9. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  10. WOW.js——在页面滚动时展现动感的元素动画效果

    插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感. 当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注 ...

随机推荐

  1. 判断一个数num是否是2的幂(乐视题)

    思路“num &(num-1)==0 返回true,否者返回false.代码如下: boolean isPower(int num){ if(num<=0) return false; ...

  2. [大牛翻译系列]Hadoop(17)MapReduce 文件处理:小文件

    5.1 小文件 大数据这个概念似乎意味着处理GB级乃至更大的文件.实际上大数据可以是大量的小文件.比如说,日志文件通常增长到MB级时就会存档.这一节中将介绍在HDFS中有效地处理小文件的技术. 技术2 ...

  3. 【转】Qt之模型/视图

    [本文转自]http://blog.sina.com.cn/s/blog_a6fb6cc90101hh20.html   作者: 一去丶二三里 关于Qt中MVC的介绍与使用,助手中有一节模型/视图编程 ...

  4. PhpForm表单相关的超全局变量操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HDU 3336 Count the string

    题解:利用next数组来保存前缀位置,递推求解. #include <cstdio> #include <cstring> char pat[200005]; int next ...

  6. Jboss 集群配置

    环境配置:CentOS 7 x64 * 3 IP:  172.24.0.100        172.24.0.101        172.24.0.102 服务器配置: 172.24.0.100 ...

  7. [Kafka] - Kafka内核理解:消息的收集/消费机制

    一.Kafka数据收集机制 Kafka集群中由producer负责数据的产生,并发送到对应的Topic:Producer通过push的方式将数据发送到对应Topic的分区 Producer发送到Top ...

  8. BZOJ1078: [SCOI2008]斜堆

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1078 每一次进入的点一定是一个极左节点,然后将它所处在的整棵树左右翻转.加上一些情况的处理. ...

  9. Ubuntu 12.04不能在華碩F81se系列電腦上安裝解决辦法

    本人華碩F81se系列的電腦,剛開始是裝的ubuntu 10.04的系統,周末閑的無聊,就想把系統換成ubuntu 12.04的,從ubuntu官網上下載了12.04的安裝包,下了個usb insta ...

  10. 娓娓道来c指针 (4)解析c的声明语句

    (4)解析c的声明语句 在继续探索c指针之前.有必要来解析下c语言中复杂的声明语法. 仅仅须要记住两则:一个原则,一个规则. 原则:先看标示符. 规则:运算符优先级是规则. 举例说明 1.最简单的 i ...