0 0 5 9 -复刻翻页效果动画 | 【一不小心挖了一个小坑】

不二如是 · 发表于 2017-2-28 16:13:24

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:36 编辑

在56展示了transition的单图标动画，在58展示了animation的多图标动画。

这两种方法都是C3动画特效的基本玩法。

现在就要更深入利用transition来实现H5中的页面切换效果。

基本代码，创建两个article，文章内容，就用《穷爸爸富爸爸》里的中心思想：

穷爸爸："你要好好学习，以后就能找一份好工作养活自己。"

---------驱动学习的力量是恐惧。

富爸爸："你要好好学习，以后开自己的公司，创造就业机会给别人。"

---------驱动力量是爱，好好学习就会帮到更多的人。

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面切换</title>
<style type="text/css">
</style>
</head>
<body>
<article id="poor">
<img src="poor.png" alt="poor">
<h1>驱动学习的力量是恐惧。</h1>
<p>穷爸爸："你要好好学习，以后就能找一份好工作养活自己。"</p>
<a href="#rich">Rich</a>
</article>
<article id="rich">
<img src="rich.png" alt="rich">
<h1>驱动力量是爱，好好学习就会帮到更多的人。</h1>
<p>富爸爸："你要好好学习，以后开自己的公司，创造就业机会给别人。"</p>
<a href="#poor">Poor</a>
</article>
</body>
</html>

复制代码

效果图：

最纯粹的一个默认文本流，啥特效也没有。

只有两个article元素，id属性分别为poor和rich。

稍微说一下两个链接吧，我们希望每个article元素都显示为一张全屏页面。

当用户单击页面中的“Rich”或者“Poor”就会进行相应的动画跳转。

设置全屏展示，就必须要为html设置高度100%，以及相对位置。

html,body{
height: 100%;
}
body{
margin: 0;
padding: 0;
font-family: "STXingkai";
text-align: center;
color: #FFF;
overflow: hidden;
position: relative;
background: #FF88C2;
}

复制代码

效果图：

颜色有点小丑，没事后面再用另一种方式修改背景色。

别忘了把background: #FF88C2;删掉。

设置body的overflow属性为hidden，使得超出全屏页面之外的元素不被显示。

默认的上下文档流排列也是太丑，继续修改。

设置rich为0，默认显示在屏幕中。

poor设置为100%，在显示器右边，即默认不显示。

article{
position: absolute;
width: 100%;
height: 100%;
padding: 100px;
box-sizing: border-box;
transition: all .9s ease-in-out;
top: 0;
}
#rich{
left: 0;
background: #FF88C2;
}
#poor{
left: 100%;
background: #4ac4aa;
}

复制代码

效果图：

这样就顺眼多了，设置了transition动画，先慢后快。

页面中的字体还是有点小，继续完善一下

h1{
font-size:33px ;
border-bottom: 1px solid rgba(255,255,255,.6);
padding-bottom: 10px;
}
p{
font-size: 20px;
margin-bottom: 10px;
}
a{
font-size: 33px;
text-decoration: none;
padding: 5px 10px;
border: 1px dashed rgba(255,255,255,.6);
border-radius: 6px;
}

复制代码

效果图：

一下子，就爽朗很多有木有！

怎么可能只单纯的用transition的默认属性值呢？！

这次我们借助jQuery（jQuery是一个快速、简洁的JavaScript框架）

实现单机按钮后触发页面切换动画！

jquery-2.1.4.min.zip (28.18 KB, 下载次数: 68, 售价: 2 鱼币)

我们只需要加载外部的“jquery-2.1.4.min.js”，直接调用动作即可。

这个文件，你可以理解为一个现成的封装功能库，可从w3c免费下载，直接调用接口即可。

可以为页面添加动态效果，实现某种交互式行为。

看一下火星版代码，我打赌你肯定看不懂

这些都是jQuery 中内置的一批淡入、擦除之类的效果、以及制作新效果的工具包，方便使用～

在body中添加引入格式，并为超链接click事件创造响应函数。

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
$('#rich').toggleClass('move');
$('#poor').toggleClass('move');
});
});
</script>

复制代码

在这里，不理解都没关系！

我来告诉你我做了哪些事情～

为两个页面中的article元素设置了相同功能的函数。

在函数中，首先调用了click事件对象的preventDefault方法。

阻止超链接的默认锚点的跳转动作。

然后，使两个页面分别切换名为‘move’的类。

这个是封装在上面调用的文件中，使得页面在切换后移动到目的位置。

先看动作代码：

#poor.move{
left: 0;
}
#rich.move{
left: 100%;
}

复制代码

效果图：

默认还是rich页，单击‘Poor’，rich页面移到屏幕之外，即left位置100%。

poor页面从屏幕右侧移到屏幕中间（left：0），完成切换。

这里面还有很多效果，缩放、旋转、3D。。。

因为，调用jQuery你不理解，也是白看热闹。

而咱们主打HTML5，不懂非常正常！

所有，有机会再做介绍，先挖次“坑”，以后有缘再来填上

。。。

殊途同归～

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

shishunfu · 发表于 2017-5-9 17:36:01

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面切换</title>
<style type="text/css">
html,body{
height: 100%;
}
body{
margin: 0;
padding: 0;
font-family: "sans-serif";
text-align: center;
color: #FFF;
overflow: hidden;
position: relative;
}
article{
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
transition: all .9s ease-in-out;
top: 0;
}
#rich{
left: 0;
background-color: #FF88C2;
}
#poor{
left: 100%;
background-color: #4ac4aa;
}
h1{
font-size:22px ;
border-bottom: 1px solid rgba(255,255,255,.6);
padding-bottom: 10px;
}
p{
font-size: 20px;
margin-bottom: 10px;
}
a{
font-size: 33px;
text-decoration: none;
padding: 5px 10px;
border: 1px dashed rgba(255,255,255,.6);
border-radius: 6px;
}
#poor.move{
left: 0;
}
#rich.move{
left: 100%;
}
</style>
</head>
<body>
<article id="poor">
<img src="poor.png" alt="poor">
<h1>驱动学习的力量是恐惧。</h1>
<p>穷爸爸："你要好好学习，以后就能找一份好工作养活自己。"</p>
<a href="#rich">Rich</a>
</article>
<article id="rich">
<img src="rich.png" alt="rich">
<h1>驱动力量是爱，好好学习就会帮到更多的人。</h1>
<p>富爸爸："你要好好学习，以后开自己的公司，创造就业机会给别人。"</p>
<a href="#poor">Poor</a>
</article>
</body>
<script type="text/javascript" src="jq/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
$('#rich').toggleClass('move');
$('#poor').toggleClass('move');
});
});
</script>
</html>

复制代码

a540656809 · 发表于 2017-3-7 00:09:37

图片轮播的原理？

aswyamato1989 · 发表于 2017-7-28 04:11:03

交作业！

星空·无限 · 发表于 2018-1-16 10:41:53

教程里的图片素材是那里找的?

隨鈊乄鎍慾 · 发表于 2018-6-29 22:43:24

交作业：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面切换</title>
<style type="text/css">
html,body{
height: 100%;
}
body{
margin: 0;
padding: 0;
font-family: "STXingkai";
text-align: center;
color: #FFF;
overflow: hidden;
position: relative;
}
article{
position: absolute;
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
transition: all .9s ease-in-out;
top: 0;
}
#rich{
left: 0;
background: #FF88C2;
}
#poor{
left: 100%;
background: #4ac4aa;
#padding-top: 0;
}
#poor img{
height: 80%;
}
h1{
font-size:33px ;
border-bottom: 1px solid rgba(255,255,255,.6);
padding-bottom: 10px;
}
p{
font-size: 20px;
margin-bottom: 10px;
}
a{
font-size: 33px;
text-decoration: none;
padding: 5px 10px;
border: 1px dashed rgba(255,255,255,.6);
border-radius: 6px;
}
#poor.move{
left: 0;
}
#rich.move{
left: 100%;
}
</style>
</head>
<body>
<article id="poor">
<img src="poor.png" alt="poor">
<h1>驱动学习的力量是恐惧。</h1>
<p>穷爸爸：“你要好好学习，以后就能找一份好工作养活自己。”</p>
<a href="#rich">Rich</a>
</article>
<article id="rich">
<img src="rich.png" alt="rich">
<h1>驱动力量是爱，好好学习就会帮到更多的人。</h1>
<p>富爸爸："你要好好学习，以后开自己的公司，创造就业机会给别人。"</p>
<a href="#poor">Poor</a>
</article>
</body>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
$('#rich').toggleClass('move');
$('#poor').toggleClass('move');
});
});
</script>

复制代码

你在意在便在 · 发表于 2019-11-5 21:43:48

comming~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面切换</title>
<style type="text/css">
/* 样式清除表 */
html,body,h1,p {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
body {
font-family: 'STXingkai';
position: relative;
overflow: hidden;
text-align: center;
}
article {
height: 100%;
width: 100%;
box-sizing: border-box;
padding:100px;
transition:all .9s linear;
position: absolute;
top:0;
}
h1 {
font-size: 33px;
border-bottom: 1px solid rgba(52, 73, 94,.5);
margin-bottom: 10px;
}
p {
font-size: 22px;
margin-bottom: 10px;
}
a {
font-size:44px;
text-decoration:none;
border:1px solid rgba(26, 188, 156,.5);
padding: 5px 20px;
border-radius:10px;
}
#poor > img {
height: 488px;
}
#rich > img {
height: 488px;
}
/* 固定初始位置 */
#poor {
left:0;
}
#rich {
left:100%;
}
/* 动画呈现位置 */
#poor.move {
left:100%;
}
#rich.move {
left:0;
}
</style>
</head>
<body>
<article id="poor">
<img src="poor.png" alt="poor">
<h1>驱动学习的力量是恐惧。</h1>
<p>穷爸爸："你要好好学习，以后就能找一份好工作养活自己。"</p>
<a href="#rich">Rich</a>
</article>
<article id="rich">
<img src="rich.png" alt="rich">
<h1>驱动力量是爱，好好学习就会帮到更多的人。</h1>
<p>富爸爸："你要好好学习，以后开自己的公司，创造就业机会给别人。"</p>
<a href="#poor">Poor</a>
</article>
</body>
<script type="text/javascript" src="jquery-2.1.4.min/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
$('#rich').toggleClass('move');
$('#poor').toggleClass('move');
});
});
</script>
</html>

复制代码

suweixuan1998 · 发表于 2020-1-11 10:52:40

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<title>页面切换</title>
<style type="text/css">
html,body{
height: 100%;
}
body{
margin: 0;
padding: 0;
font-family: "STXingkai";
text-align: center;
color: #FFF;
overflow: hidden;
position: relative;
}
article{
position: absolute;
width: 100%;
height: 100%;
padding: 100px;
box-sizing: border-box;
transition: all .9s ease-in-out;
top: 0;
}
#rich{
left: 0;
background: #FF88C2;
}
#poor{
left: 100%;
background: #4ac4aa;
}
h1{
font-size:33px ;
border-bottom: 1px solid rgba(255,255,255,.6);
padding-bottom: 10px;
}
p{
font-size: 20px;
margin-bottom: 10px;
}
a{
font-size: 33px;
text-decoration: none;
padding: 5px 10px;
border: 1px dashed rgba(255,255,255,.6);
border-radius: 6px;
}
#poor.move{
left: 0;
}
#rich.move{
left: 100%;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
$('#rich').toggleClass('move');
$('#poor').toggleClass('move');
});
});
</script>
<article id="poor">
<img src="1.jpg" alt="穷">
<p>穷爸爸："你要好好学习，以后就能找一份好工作养活自己。"</p>
<a href="#rich">Rich</a>
</article>
<article id="rich">
<img src="2.png" alt="rich">
<h1>驱动力量是爱，好好学习就会帮到更多的人。</h1>
<p>富爸爸："你要好好学习，以后开自己的公司，创造就业机会给别人。"</p>
<a href="#poor">Poor</a>
</article>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 5 9 -复刻翻页效果动画 | 【一不小心挖了一个小坑】

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评