每日CSS_滚动页面动画效果
每日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_滚动页面动画效果的更多相关文章
- 每日CSS_霓虹灯按钮悬停效果
每日CSS_霓虹灯按钮悬停效果 2020_12_20 1. 代码解析 1.1 html 代码片段解析 <a href="#"> <span></spa ...
- [Android实例] app引导页(背景图片切换加各个页面动画效果)（申明：来源于网络）
[Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...
- waypoint+animate元素滚动监听触发插件实现页面动画效果
最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究 首先来介绍下jquery. ...
- wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- 基于html5和css3响应式全屏滚动页面切换效果
分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览 源码下载 HTML wrappe ...
- 前端实现app引导页面动画效果
插件描述:jQuery引导插件TourTip 交互式可视化指南网页上的元素.使用方法 步骤1: 将以下标记添加到您的文档的<head> 你还需要复制旁边插件的css文件夹和下载的IMG文件 ...
- vue中，模拟锚点定位，实现滚动动画效果
平时我们利用锚点进行页面内的快速瞬移,画面跳转生硬,观感很差. 在VUE中,如何快速的实现锚点效果,并且还让它拥有滚动的动画效果呢. 其实两行代码就能解决问题 1 <a @click=" ...
- 使用 SVG 来实现波浪 (wave) 动画效果
如下图所示的波浪动画效果,实现方法有很多,比如CSS或者是js等方法都可以实现.不过,要是使用SVG来实现的,我觉得比其它两种方法都要简单.这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么 ...
随机推荐
- 刚开始学习Javascript的一些基础小知识，从入门到崩溃，希望对大家有帮助（只适合初学者）
一.简介 1.JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,js不能操作文件. 重要的开始啦!!!!! 引入javascript: 行间js <d ...
- Java IO源码分析（二）——ByteArrayInputStream 和 ByteArrayOutputStream
简介 ByteArrayInputStream 是字节数组输入流,它继承于InputStream. 它的内部数据存储结构就是字节数组. ByteArrayOutputStream是字节数组输出流,它继 ...
- 别再说你不懂什么是API了
API 全称 Application Programming Interface, 即应用程序编程接口. 看到这里,急性子的小白同学马上就憋不住了:这不管是英文还是中文我每个字都懂啊,只是凑一块就不知 ...
- python爬虫--用xpath爬豆瓣电影
步骤 将目标网站下的页面抓取下来 将抓取下来的数据根据一定规则进行提取 具体流程 将目标网站下的页面抓取下来 1. 倒库 import requests 2.头信息(有时候可不写) headers ...
- ES6、ES7、ES8
ES6 https://es6.ruanyifeng.com/ ES7 1.Array.prototype.includes() includes()作用,是查找一个值在不在数组里,若是存在则返回 ...
- css 11-CSS3属性详解（一）
11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...
- [水题日常]Luogu1113 杂务
这几天又在颓. 我的blog难度目前还比较低,主要面向像我这样子的新手(当然内容也会尽量讲得具体清楚一些)x 如果有错误还请指出~ 写完随笔之后才去翻了一下这题题解之后才注意到这题是有序的 QAQ完全 ...
- Spring Cloud Ribbon之URL重构（三）
接着前面的说,前两篇中分析了解析和动态服务列表的获取,这两步完成后那接下来要做的事就是重组解析后的URL路径和发起通信了,这一步完成应该是在前面分析的RibbonLoadBalancerClient. ...
- Numpy的学习2-基础运算1
import numpy as np a=np.array([10,20,30,40]) # array([10, 20, 30, 40]) b=np.arange(4) # array([0, 1, ...
- RPC 核心，万变不离其宗
微信搜 「yes的练级攻略」干货满满,不然来掐我,回复[123]一份20W字的算法刷题笔记等你来领. 个人文章汇总:https://github.com/yessimida/yes 欢迎 star ! ...