鱼C论坛

 找回密码
 立即注册
查看: 3218|回复: 8

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

[复制链接]
发表于 2017-2-28 16:13:24 | 显示全部楼层 |阅读模式

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

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

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

56展示了transition图标动画,在58展示了animation图标动画。

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

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

Snip20170228_586.png


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

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

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



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

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


上代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面切换</title>
  6.     <style type="text/css">

  7.     </style>
  8. </head>
  9. <body>
  10.     <article id="poor">
  11.         <img src="poor.png" alt="poor">
  12.         <h1>驱动学习的力量是恐惧。</h1>
  13.         <p>穷爸爸:"你要好好学习,以后就能找一份好工作养活自己。"</p>
  14.         <a href="#rich">Rich</a>
  15.     </article>
  16.     <article id="rich">
  17.         <img src="rich.png" alt="rich">
  18.         <h1>驱动力量是爱,好好学习就会帮到更多的人。</h1>
  19.         <p>富爸爸:"你要好好学习,以后开自己的公司,创造就业机会给别人。"</p>
  20.         <a href="#poor">Poor</a>
  21.     </article>
  22. </body>
  23. </html>
复制代码

效果图:
Snip20170228_587.png


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

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

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

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

设置全屏展示,就必须要为html设置高度100%,以及相对位置。
  1.     html,body{
  2.         height: 100%;
  3.     }
  4.         body{
  5.             margin: 0;
  6.             padding: 0;
  7.             font-family: "STXingkai";
  8.             text-align: center;
  9.             color: #FFF;
  10.             overflow: hidden;
  11.             position: relative;
  12.             background: #FF88C2;
  13.         }
复制代码

效果图:
1.gif


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

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

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

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

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

poor设置为100%,在显示器右边,即默认不显示。
  1.       article{
  2.             position: absolute;
  3.             width: 100%;
  4.             height: 100%;
  5.             padding: 100px;
  6.             box-sizing: border-box;
  7.             transition: all .9s ease-in-out;
  8.             top: 0;
  9.         }
  10.         #rich{
  11.             left: 0;
  12.             background: #FF88C2;
  13.         }
  14.         #poor{
  15.             left: 100%;
  16.             background: #4ac4aa;
  17.         }
复制代码

效果图:
1.gif


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

页面中的字体还是有点小,继续完善一下
  1. h1{
  2.             font-size:33px ;
  3.             border-bottom: 1px solid rgba(255,255,255,.6);
  4.             padding-bottom: 10px;
  5.         }
  6.         p{
  7.             font-size: 20px;
  8.             margin-bottom: 10px;
  9.         }
  10.         a{
  11.             font-size: 33px;
  12.             text-decoration: none;
  13.             padding: 5px 10px;
  14.             border: 1px dashed rgba(255,255,255,.6);
  15.             border-radius: 6px;
  16.         }
复制代码

效果图:
Snip20170228_588.png


一下子,就爽朗很多有木有!

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

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

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


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

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

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

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

看一下火星版代码,我打赌你肯定看不懂
Snip20170228_592.png


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

在body中添加引入格式,并为超链接click事件创造响应函数。
  1. <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
  2.     <script type="text/javascript">
  3.         $(document).ready(function () {
  4.             $('a').click(function (e) {
  5.                 e.preventDefault();
  6.                 $('#rich').toggleClass('move');
  7.                 $('#poor').toggleClass('move');
  8.             });
  9.         });
  10.     </script>
复制代码

在这里,不理解都没关系!

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

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

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

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

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

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

先看动作代码:
  1.    #poor.move{
  2.             left: 0;
  3.         }
  4.         #rich.move{
  5.             left: 100%;
  6.         }
复制代码

效果图:
1.gif


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

poor页面从屏幕右侧移到屏幕中间(left:0),完成切换。

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

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

而咱们主打HTML5,不懂非常正常!


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

殊途同归~



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


官方 Web 课程:

评分

参与人数 2荣誉 +5 鱼币 +9 贡献 +4 收起 理由
睦ちゃん她爹 + 4 + 4 + 3 无条件支持楼主!
向一朵朵鲜花 + 1 + 5 + 1 嗯嗯0-0-

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-5-9 17:36:01 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>页面切换</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                 }
  10.                 body{
  11.                         margin: 0;
  12.                         padding: 0;
  13.                         font-family: "sans-serif";
  14.                         text-align: center;
  15.                         color: #FFF;
  16.                         overflow: hidden;
  17.                         position: relative;
  18.                 }

  19.                 article{
  20.                         position: absolute;
  21.                         width: 100%;
  22.                         height: 100%;
  23.                         padding: 20px;
  24.                         box-sizing: border-box;
  25.                         transition: all .9s ease-in-out;
  26.                         top: 0;
  27.                 }
  28.                 #rich{
  29.                         left: 0;
  30.                         background-color: #FF88C2;
  31.                 }
  32.                 #poor{
  33.                         left: 100%;
  34.                         background-color: #4ac4aa;
  35.                 }
  36.                 h1{
  37.                         font-size:22px ;
  38.                         border-bottom: 1px solid rgba(255,255,255,.6);
  39.                         padding-bottom: 10px;
  40.                 }
  41.                 p{
  42.                         font-size: 20px;
  43.                         margin-bottom: 10px;
  44.                 }
  45.                 a{
  46.                         font-size: 33px;
  47.                         text-decoration: none;
  48.                         padding: 5px 10px;
  49.                         border: 1px dashed rgba(255,255,255,.6);
  50.                         border-radius: 6px;
  51.                 }

  52.                 #poor.move{
  53.                         left: 0;
  54.                 }
  55.                 #rich.move{
  56.                         left: 100%;
  57.                 }
  58.         </style>

  59. </head>
  60. <body>
  61. <article id="poor">
  62.         <img src="poor.png" alt="poor">
  63.         <h1>驱动学习的力量是恐惧。</h1>
  64.         <p>穷爸爸:"你要好好学习,以后就能找一份好工作养活自己。"</p>
  65.         <a href="#rich">Rich</a>
  66. </article>
  67. <article id="rich">
  68.         <img src="rich.png" alt="rich">
  69.         <h1>驱动力量是爱,好好学习就会帮到更多的人。</h1>
  70.         <p>富爸爸:"你要好好学习,以后开自己的公司,创造就业机会给别人。"</p>
  71.         <a href="#poor">Poor</a>
  72. </article>

  73. </body>


  74. <script type="text/javascript" src="jq/jquery-2.1.4.min.js"></script>
  75. <script type="text/javascript">
  76.     $(document).ready(function () {
  77.         $('a').click(function (e) {
  78.             e.preventDefault();
  79.             $('#rich').toggleClass('move');
  80.             $('#poor').toggleClass('move');
  81.         });
  82.     });
  83. </script>
  84. </html>
复制代码
0047页面切换.png
0047页面切换2.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-5-9 19:31
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-7 00:09:37 From FishC Mobile | 显示全部楼层
图片轮播的原理?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-28 04:11:03 | 显示全部楼层
交作业!
059-02.jpg
059-01.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-1-16 10:41:53 | 显示全部楼层
教程里的图片素材是那里找的?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-6-29 22:43:24 | 显示全部楼层
交作业:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面切换</title>
  6.     <style type="text/css">
  7.         html,body{
  8.             height: 100%;
  9.         }
  10.         body{
  11.             margin: 0;
  12.             padding: 0;
  13.             font-family: "STXingkai";
  14.             text-align: center;
  15.             color: #FFF;
  16.             overflow: hidden;
  17.             position: relative;
  18.         }
  19.         article{
  20.             position: absolute;
  21.             width: 100%;
  22.             height: 100%;
  23.             padding: 30px;
  24.             box-sizing: border-box;
  25.             transition: all .9s ease-in-out;
  26.             top: 0;
  27.         }
  28.         #rich{
  29.             left: 0;
  30.             background: #FF88C2;
  31.         }
  32.         #poor{
  33.             left: 100%;
  34.             background: #4ac4aa;
  35.             #padding-top: 0;
  36.         }
  37.         #poor img{
  38.             height: 80%;
  39.         }
  40.         h1{
  41.             font-size:33px ;
  42.             border-bottom: 1px solid rgba(255,255,255,.6);
  43.             padding-bottom: 10px;
  44.         }
  45.         p{
  46.             font-size: 20px;
  47.             margin-bottom: 10px;
  48.         }
  49.         a{
  50.             font-size: 33px;
  51.             text-decoration: none;
  52.             padding: 5px 10px;
  53.             border: 1px dashed rgba(255,255,255,.6);
  54.             border-radius: 6px;
  55.         }
  56.         #poor.move{
  57.               left: 0;
  58.           }
  59.         #rich.move{
  60.             left: 100%;
  61.         }
  62.     </style>
  63. </head>
  64. <body>
  65.     <article id="poor">
  66.         <img src="poor.png" alt="poor">
  67.         <h1>驱动学习的力量是恐惧。</h1>
  68.         <p>穷爸爸:“你要好好学习,以后就能找一份好工作养活自己。”</p>
  69.         <a href="#rich">Rich</a>
  70.     </article>
  71.     <article id="rich">
  72.         <img src="rich.png" alt="rich">
  73.         <h1>驱动力量是爱,好好学习就会帮到更多的人。</h1>
  74.         <p>富爸爸:"你要好好学习,以后开自己的公司,创造就业机会给别人。"</p>
  75.         <a href="#poor">Poor</a>
  76.     </article>
  77. </body>

  78. <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
  79. <script type="text/javascript">
  80.     $(document).ready(function () {
  81.         $('a').click(function (e) {
  82.             e.preventDefault();
  83.             $('#rich').toggleClass('move');
  84.             $('#poor').toggleClass('move');
  85.         });
  86.     });
  87. </script>
复制代码

59-2.gif
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-11-5 21:43:48 | 显示全部楼层
comming~  
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>页面切换</title>
  6. <style type="text/css">
  7. /* 样式清除表 */
  8. html,body,h1,p {
  9.         margin: 0;
  10.         padding: 0;
  11. }
  12. html,body {
  13.         height: 100%;
  14. }
  15. body {
  16.         font-family: 'STXingkai';
  17.         position: relative;
  18.         overflow: hidden;
  19.         text-align: center;
  20. }
  21. article {
  22.         height: 100%;
  23.         width: 100%;
  24.         box-sizing: border-box;
  25.         padding:100px;
  26.         transition:all .9s linear;
  27.         position: absolute;
  28.         top:0;
  29. }
  30. h1 {
  31.         font-size: 33px;
  32.         border-bottom: 1px solid rgba(52, 73, 94,.5);
  33.         margin-bottom: 10px;
  34. }
  35. p {
  36.         font-size: 22px;
  37.         margin-bottom: 10px;
  38. }
  39. a {
  40.         font-size:44px;
  41.         text-decoration:none;
  42.         border:1px solid rgba(26, 188, 156,.5);
  43.         padding: 5px 20px;
  44.         border-radius:10px;
  45. }
  46. #poor > img {
  47.         height: 488px;
  48. }
  49. #rich > img {
  50.         height: 488px;
  51. }
  52. /* 固定初始位置 */
  53. #poor {
  54.         left:0;
  55. }
  56. #rich {
  57.         left:100%;
  58. }
  59. /* 动画呈现位置 */
  60. #poor.move {
  61.         left:100%;
  62. }
  63. #rich.move {
  64.         left:0;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69.     <article id="poor">
  70.         <img src="poor.png" alt="poor">
  71.         <h1>驱动学习的力量是恐惧。</h1>
  72.         <p>穷爸爸:"你要好好学习,以后就能找一份好工作养活自己。"</p>
  73.         <a href="#rich">Rich</a>
  74.     </article>
  75.     <article id="rich">
  76.         <img src="rich.png" alt="rich">
  77.         <h1>驱动力量是爱,好好学习就会帮到更多的人。</h1>
  78.         <p>富爸爸:"你要好好学习,以后开自己的公司,创造就业机会给别人。"</p>
  79.         <a href="#poor">Poor</a>
  80.     </article>
  81. </body>
  82. <script type="text/javascript" src="jquery-2.1.4.min/jquery-2.1.4.min.js"></script>
  83. <script type="text/javascript">
  84.     $(document).ready(function () {
  85.         $('a').click(function (e) {
  86.             e.preventDefault();
  87.             $('#rich').toggleClass('move');
  88.             $('#poor').toggleClass('move');
  89.         });
  90.     });
  91. </script>
  92. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-11 10:52:40 | 显示全部楼层
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8" >
  5.     <title>页面切换</title>
  6.     <style type="text/css">
  7.         html,body{
  8.             height: 100%;
  9.         }
  10.         body{
  11.             margin: 0;
  12.             padding: 0;
  13.             font-family: "STXingkai";
  14.             text-align: center;
  15.             color: #FFF;
  16.             overflow: hidden;
  17.             position: relative;

  18.         }
  19.         article{
  20.             position: absolute;
  21.             width: 100%;
  22.             height: 100%;
  23.             padding: 100px;
  24.             box-sizing: border-box;
  25.             transition: all .9s ease-in-out;
  26.             top: 0;
  27.         }
  28.         #rich{
  29.             left: 0;
  30.             background: #FF88C2;
  31.         }
  32.         #poor{
  33.             left: 100%;
  34.             background: #4ac4aa;
  35.         }
  36.         h1{
  37.             font-size:33px ;
  38.             border-bottom: 1px solid rgba(255,255,255,.6);
  39.             padding-bottom: 10px;
  40.         }
  41.         p{
  42.             font-size: 20px;
  43.             margin-bottom: 10px;
  44.         }
  45.         a{
  46.             font-size: 33px;
  47.             text-decoration: none;
  48.             padding: 5px 10px;
  49.             border: 1px dashed rgba(255,255,255,.6);
  50.             border-radius: 6px;
  51.         }
  52.         #poor.move{
  53.             left: 0;
  54.         }
  55.         #rich.move{
  56.             left: 100%;
  57.         }

  58.     </style>
  59. </head>
  60. <body>
  61. <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
  62. <script type="text/javascript">
  63.     $(document).ready(function () {
  64.         $('a').click(function (e) {
  65.             e.preventDefault();
  66.             $('#rich').toggleClass('move');
  67.             $('#poor').toggleClass('move');
  68.         });
  69.     });
  70. </script>
  71.     <article id="poor">
  72.         <img src="1.jpg" alt="穷">
  73.         <p>穷爸爸:"你要好好学习,以后就能找一份好工作养活自己。"</p>
  74.         <a href="#rich">Rich</a>

  75.     </article>
  76.     <article id="rich">
  77.         <img src="2.png" alt="rich">
  78.         <h1>驱动力量是爱,好好学习就会帮到更多的人。</h1>
  79.         <p>富爸爸:"你要好好学习,以后开自己的公司,创造就业机会给别人。"</p>
  80.         <a href="#poor">Poor</a>
  81.     </article>
  82. </body>

  83. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 18:38

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表