设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 5 9 -复刻翻页效果动画 | 【一不小心挖了一个小坑】
返回列表 发新帖
查看: 3494|回复: 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，文章内容，就用《穷爸爸富爸爸》里的中心思想：

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

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



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

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


上代码：
<!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>
效果图：
Snip20170228_587.png


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

只有两个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;
        }
效果图：
1.gif


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

别忘了把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;
        }
效果图：
1.gif


这样就顺眼多了，设置了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;
        }
效果图：
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事件创造响应函数。
<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%;
        }
效果图：
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
回复

使用道具 举报

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>
0047页面切换.png
0047页面切换2.png

点评

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

使用道具 举报

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

使用道具 举报

aswyamato1989
发表于 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 | 显示全部楼层
交作业：
<!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>
59-2.gif
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-22 10:04

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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