0 0 5 9-复刻翻页效果动画 | 【一不小心挖了一个小坑】,Web密训营,Web开发,鱼C论坛

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

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

本帖最后由不二如是于 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.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，不懂非常正常！

所有，有机会再做介绍，先挖次“坑”，以后有缘再来填上{:10_256:} 。。。

殊途同归～

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

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

教程里的图片素材是那里找的?{:10_266:}

隨鈊乄鎍慾 发表于 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~{:10_256:}
<!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>

页: [1]

鱼C论坛's Archiver

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