H5C3和fullafullpage实现购物车动画

最新推荐文章于 2023-11-24 15:28:26 发布
最新推荐文章于 2023-11-24 15:28:26 发布
阅读量624 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/txw0415/article/details/80472602
版权

效果

相关插件

easing.js 动画增强插件

fullpage.js 全屏滚动插件


html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 引入文件 -->
    <link rel="stylesheet" href="./css/jquery.fullpage.min.css">
    <link rel="stylesheet" href="./css/index.css">

    <script src="./js/jquery-1.8.3.min.js"></script>
    <!-- jquery动画增强插件，扩展了更多种jqeury的动画效果 -->
    <script src="./js/jquery.easing.1.3.js"></script>
    <!-- 页面全屏滚动插件 -->
    <script src="./js/jquery.fullpage.min.js"></script>
    <script src="./js/index.js"></script>
</head>
<body>
    <!-- 实现页面的主体结构 -->
    <div id="animate">
        <!-- 第一屏 -->
        <div class="section section1">
            <img src="./images/01/ball.png" alt="" class="ball">
            <img src="./images/01/sofa.png" alt="" class="sofa">
            <img src="./images/01/products.png" alt="" class="products">
        </div>

        <!-- 第二屏 -->
        <div class="section section2">
            <img src="./images/02/search01.png" alt="" class="search01">
            <img src="./images/02/search02.png" alt="" class="search02">
            <!-- 测试用的 -->
            <!-- <img src="./images/02/search02.png" alt="" class="search03"> -->
            <!-- <img src="./images/02/sofas.png" alt="" class="sofas"> -->

            <!-- 用来给沙发做定位参考的div -->
            <div class="computer">
                <img src="./images/02/sofas.png" alt="" class="sofas">
            </div>
        </div>

        <!-- 第三屏 -->
        <div class="section section3">
            <img src="./images/03/sofa.png" alt="" class="sofa">
            <div class="color01"></div>
            <div class="add01"></div>
        </div>

        <!-- 第四屏 -->
        <div class="section section4">
            <div class="carbox">
                <img src="./images/04/sofa.png" class="sofa" alt="">
                <img src="./images/04/car.png" alt="" class="car">
            </div>
            <div class="keyboard">
                <img src="./images/04/address.png" alt="" class="address">
            </div>
            <img src="./images/04/words02.png" alt="" class="words">
            <img src="./images/04/cloud.png" alt="" class="cloud">
        </div>

        <!-- 第五屏 -->
        <div class="section section5">
            <img src="./images/05/bill.png" alt="" class="bill">
            <img src="./images/05/card.png" alt="" class="card">
            <div class="mouse"></div>
            <img src="./images/05/hand.png" alt="" class="hand">
            <img src="./images/05/words.png" alt="" class="words">
        </div>
        <div class="section section6">
            <!-- 街道 -->
            <div class="street">
                <!-- 门 -->
                <img src="./images/06/door.png" class="door" alt="">
                <!-- 女孩 -->
                <img src="./images/06/girl.png" class="girl" alt="">
            </div>
            <!-- 天上的沙发盒子 -->
            <div class="sofabox">
                <!-- 盒子里的沙发 -->
                <img src="./images/04/sofa.png" alt="" class="sofa">
                <!-- 小盒子 -->
                <img src="./images/06/box.png" alt="" class="box">
            </div>
            <!-- 车和送货的男孩 -->
            <div class="carbox">
                <!-- 男孩子的图片 -->
                <img src="./images/06/man.png" alt="" class="man">
                <!-- 小车图片 -->
                <img src="./images/06/car.png" alt="" class="car">
            </div>
            <!-- 天上的白云 -->
            <img src="./images/04/cloud.png" class="cloud" alt="">
        </div>
        <!-- 第七屏 -->
        <div class="section section7">
            <div class="stars"></div>
            <img src="./images/07/good.png" alt="" class="good">
        </div>
        <div class="section section8 active">
            <div class="begin"></div>
            <img src="./images/08/again.png" alt="" class="again">
            <img src="./images/08/hand.png" alt="" class="hand">
        </div>
    </div>
</body>
</html>

css

/* 第一屏 */

.section1 {
    background: url("../images/01/bg.png") no-repeat center bottom;    
}

.section1 .sofa {
    position: absolute;
    left: 50%;
    margin-left: -200px;

    bottom: 320px;

    animation: sofa 1s infinite;
}

.section1 .products {
    position: absolute;
    left: 50%;
    margin-left: -400px;
    bottom: 200px;
}

.section1 .ball {
    position: absolute;
    right: 50px;
    top: 50px;

    animation: ball 3s infinite;

}

@keyframes sofa {
    50% {
        transform: translate(0px, -20px);
    }
}

@keyframes ball {
    50% {
        transform: translate(0px, -30px);
    }
}

/* 第二屏 */
.section2 {
    background: url("../images/02/bg.png") no-repeat center bottom;
}

.section2 .search01 {
    position: absolute;
    left: 50%;
    margin-left: 400px;
    bottom: 300px;
}

.section2 .search02 {
    position: absolute;
    left: 50%;
    margin-left: -111px;
    bottom: 300px;
    display: none;
}

.section2 .search03 {
    height: 30px;
    position: absolute;
    left: 50%;
    margin-left: 130px;
    bottom: 450px;
}

.section2 .computer {
    width: 576px;
    height: 250px;
    position: absolute;
    left: 50%;
    margin-left: -290px;
    bottom: 195px;
}

.section2 .sofas {
    position: absolute;
    height: 0px;
    right: 65px;
    bottom: 20px;

}

/* 第三屏的动画及布局 */
.section3 {
    background: url("../images/03/bg.png") no-repeat center bottom;
}

.section3 .sofa {
    position: absolute;
    left: 50%;
    margin-left: -240px;
    bottom: 250px;
}

.section3 .color01 {
    background: url("../images/03/color01.gif") no-repeat;
    width: 296px;
    height: 131px;

    position: absolute;
    left: 50%;
    margin-left: 40px;
    bottom: 175px;
}

.section3.animation .color01 {
    transition: all 0.5s;
    background: url("../images/03/color02.gif") no-repeat;
}

.section3 .add01 {
    background: url("../images/03/add01.gif") no-repeat;
    width: 218px;
    height: 58px;

    position: absolute;
    left: 50%;
    margin-left: 40px;
    bottom: 100px;
}

.section3.animation .add01 { 
    transition: all 0.5s 0.5s;
    background: url("../images/03/add02.gif") no-repeat;
}

/* 第四屏 */
.section4 {
    background: url("../images/04/bg.png") no-repeat center bottom;
}

.section4 .carbox {
    width: 407px;
    height: 346px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    margin-left: -340px;

}

.section4 .car {
    position: absolute;
}

.section4 .sofa {
    position: absolute;
    left: 165px;
    top: -45px;
}

.section4 .keyboard {
    width: 283px;
    height: 270px;
    background: url("../images/04/keyboard.png") no-repeat;

    position: absolute;
    left: 50%;
    bottom: 140px;
    margin-left: -235px;

    display: none;
}

.section4 .address {
    position: absolute;
    left: 50%;
    margin-left: -86px;
    top: 50px;
}

.section4 .words {
    position: absolute;
    left: 50%;
    margin-left: -300px;
    bottom: 450px;
}

.section4 .cloud {
    position: absolute;
    left: 50%;
    margin-left: -300px;
    bottom: 500px;

    animation: cloud 20s linear infinite;
}

@keyframes cloud {
    50% {
        transform: translate(-1000px, 0px);
    }
}

/* 第五屏 */
.section5 {
    background: url("../images/05/bg.png") no-repeat bottom center;
    overflow: hidden;

    perspective: 500px;
}

.section5 .card {
    position: absolute;
    left:50%;
    margin-left: -390px;
    bottom: 170px;
}

.section5 .bill {
    position: absolute;
    left:50%;
    margin-left: -250px;
    bottom: 260px;
}

.section5 .mouse {
    width: 205px;
    height: 819px;
    position: absolute;
    left:50%;
    margin-left: 200px;
    bottom: 220px;
    background: url("../images/05/mouse01.png") no-repeat;
}

.section5 .hand {
    position: absolute;
    left:50%;
    margin-left: 180px;
    bottom: -100px;
}

.section5 .words {
    position: absolute;
    left: 50%;
    margin-left: -160px;
    bottom: 530px;
    transform-style: preserve-3d;

    transform: scale(0) rotateY(-360deg);
}


.section5.animation .hand {
    transition: all 2s;
    bottom: -30px;
}

.section5.animation .mouse {
    transition: all 0.5s 2s;
    background: url("../images/05/mouse02.png") no-repeat;
}

.section5.animation .bill {
    transition: all 0.5s 2.5s;
    bottom: 390px;
}

.section5.animation .words {
    transition: all 1s 3s;
    transform: scale(1.2) rotateY(0deg);
}

/* 第六屏 */
/* 街道 */
.section6 .street {
    width: 5000px;
    height: 600px;
    background: url("../images/06/bg.png") repeat-x;
    position: absolute;
    left: -200px;
    bottom: 0;
    /* border: 3px solid #000; */
}

/* 门 */
.section6 .door {
    position: absolute;
    left: 2110px;
    bottom: 116px;
    /* 一开始是关着门的 */
    display: none;
}

/* 女孩子 */
.section6 .girl {
    position: absolute;
    left: 2135px;
    bottom: 105px;
    height: 110px;
    /* 一开始女孩子是在室内的 */
    display: none;
}

/* 装小车的大盒子 */
.section6 .carbox {
    width: 221px;
    height: 122px;
    position: absolute;
    left: 505px;
    bottom: 85px;
}

/* 男孩子 */
.section6 .man {
    position: absolute;
    height: 120px;

    right: 0;
    bottom: 20px;
    height: 30px;
}

/* 小车 */
.section6 .car {
    position: absolute;
}

/* 装沙发的大盒子 */
.section6 .sofabox {
    width: 123px;
    height: 85px;
    position: absolute;
    left: 520px;
    bottom: 400px;
    /* background-color: yellowgreen; */
}

/* 沙发 */
.section6 .sofa {
    position: absolute;
    height: 80px;
    left: 20px;
    top: -20px;
}

/* 小盒子 */
.section6 .box {
    position: absolute;
}

/* 白云 */
.section6 .cloud {
    position: absolute;
    left: 50%;
    margin-left: -300px;
    bottom: 500px;

    animation: cloud 20s linear infinite;
}

/* 第七屏 */
.section7 {
    background: url("../images/07/bg.png") no-repeat bottom center;
}

.section7 .stars {
    position: absolute;
    left: 50%;
    margin-left: -300px;
    bottom: 442px;

    /* width: 105px; */
    width: 0;
    height: 17px;
    background: url("../images/07/stars3.png") no-repeat;
}

.section7.animation .stars {
    transition: all 2s steps(5);
    width: 105px;
}

.section7 .good {
    position: absolute;
    left: 50%;
    margin-left: -290px;
    bottom: 380px;
    opacity: 0;
}

.section7.animation .good {
    transition: all 0.5s 2s;
    opacity: 1;
}

/* 第八屏 */
.section8 {
    background: url("../images/08/bg.png");
}

.section8 .begin {
    width: 389px;
    height: 160px;
    position: absolute;
    bottom: 380px;
    left: 50%;
    margin-left: -195px;
    background: url("../images/08/begin.png") no-repeat;
}

.section8 .begin:hover {
    background: url("../images/08/begin.gif") no-repeat;
}

.section8 .again {
    position: absolute;
    right: 100px;
    bottom: 100px;
}

.section8 .hand {
    position: absolute;
    bottom: 0;
    left: 0;

    /* 不让该元素响应事件， 事件会默认向下传 */
    pointer-events: none;
    /* left: 50%;
    margin-left: -85px; */
}

js

$(function() {
    $("#animate").fullpage({
        navigation: true, // 显示页数导航
        sectionsColor: ["#f9dd67", "#84a2d4", "#ef674d", "#ffeedd", "#cf4759", "#85d9ed", "#6faa85", "#84d9ed"],

        //进入到某一屏时调用
        afterLoad: function(a, index) {
            //每一次离开当前屏（进入下一屏时）， 把所有的js动画先清除。 jquery的动画的本质，其实是给动画元素添加了style的属性， 所以清除动画就是把style的属性干掉
            $(".section>div img, .section>div div").attr("style", "");
            //如果上一屏的动画还没有执行完，就把该动画停掉
            $(".section>div img, .section>div div").stop();


            //移动所有的css动画， 同时给当前屏添加css动画
            $(".section").removeClass("animation").eq(index-1).addClass("animation");

            //给第二屏添加动画
            if (index == 2) {
                //让左侧的搜索框移动到中间
                $(".section2 .search01").animate({marginLeft:-111}, 1000, "easeOutBack", function() {
                    //左侧的搜索框移动到中间就隐藏，中间的带字的搜索框显示出来，停顿0.5秒之后， 移动到右上角
                    $(this).hide();
                    $(".section2 .search02").show().delay(500).animate({height: 30, marginLeft: 130, bottom: 450}, 1000);
                    //沙发变大
                    $(".section2 .sofas").delay(500).animate({height: 218}, 1000);
                });
            }

            //给第四屏添加动画
            if (index == 4) {
                $(".section4 .carbox").animate({marginLeft: 1000}, 2000, "easeInElastic", function() {
                    //delay方法可以对animate方法生效，但是不能对show来效
                    $(".section4 .keyboard").fadeIn(500);
                })
            }

            //给第六屏添加动画
            if (index == 6) {
                //天上掉下沙发来
                $(".section6 .sofabox").animate({bottom: 100}, 1000, function() {
                    //街道开始往左移动， 模拟开车效果
                    $(".section6 .street").animate({left: -1200}, 7000, function() {

                        //男孩子下车， 变大
                        $(".section6 .man").animate({height: 120}, 500, function() {

                            //男孩子向右移动一段距离
                            $(".section6 .man").animate({right: -150}, 1000, function() {

                                //开门，让门这个元素显示出来
                                $(".section6 .door").show();
                                
                                //延迟500ms执行
                                setTimeout(function() {
                                    //让女孩这个元素显示出来
                                    $(".section6 .girl").show();
                                }, 500);

                            });
                        });
                    });
                })

            }

            //第八屏的js效果
            if (index == 8) {
                //拿到窗口的高度
                var screenheight = $(window).height();

                console.log(screenheight);
                //监听鼠标的移动事件
                $(".section8").mousemove(function(target) {
                    //console.log(target.pageY);
                    //拿到鼠标所在的x， y的坐标
                    var x = target.pageX;
                    var y = target.pageY;

                    //定位中的left的值
                    var left = x - 65;

                    var bottom = (screenheight-y) - 449;
                    if (bottom >=0) bottom = 0;

                    $(".section8 .hand").css({left: left, bottom: bottom});
                });

                $(".section8 .again").click(function() {
                    //fullpage插件调方法
                    $.fn.fullpage.moveTo(1);
                });
            }
        }
    });
});

以下是实现购物车的要点及大致思路

1. fullPage 插件(先查看文档,了解其用法)
2. 中线对齐
    * left： 50%
    * margin-left： -100px
    * position: absolute
3. 第一屏，简单的元素布局， 加css弹跳动画
4. 第二屏， jquery动画, easing.js(jquery的动画增强插件)
    * $("dom").animate({left: 100}, 1000, "easeOutBack", function() {})
    * http://www.runoob.com/jqueryui/api-easings.html
    * jquery的动画实现原理：
        1. 给动画元素添加了 style的属性， 设置了动画的终值。
        2. 如果我们要还原动画， 只需要把style属性的值清空掉
        3. 如果我们要结束未完成的动画， dom.stop();
5. 第三屏
    * css动画
    * css改变元素的background属性（注意： 选择颜色和加入到购物车这两个元素要使用div而不是img）
    * 添加删除动画的原理： 给section添加或删除animation

6. 第四屏
    1. 小车的盒子的布局（中线对齐）
    2. 小车抖动着前进的动画 "easeInElastic"
    3. 在回调函数中，显示地址（keyboard的div）
    4. 添加文字
    5. 添加白云和动画

每天努力搬砖
关注
js加入购物车动画
dogzhang
09-09 3307
最近项目需要一个添加购物车动画，然后自己研究了一下 先上效果图 商品静静躺在那里 点击购物车，开始播放动画 最终，商品图片落入购物车 商品图片落入购物车后，有一个回调函数可以在动画播放完毕执行真正的加入购物车操作，比如在购物车加上一个数字什么的 以下是全部代码 购物车动画 加入购物车
移动端h5 商品列表 点击加入购物车动画
12-14
移动端h5 商品列表点击，飞入页面固定位置。数据结构采用jquery，vue。
jQuery+HTML5+CSS3 实现加入购物车飞入动画特效
09-21
本案例 用到 jQuery+HTML5+CSS3 前端开发技术 实现加入购物车飞入动画特效,下载源码即可运行，运行环境VS2012。
h5懒人原生模拟移动APP飞入购物车动画效果
08-21
懒人原生模拟移动APP飞入购物车动画效果,用HTML5写的源代码
h5前端购物车，css3动画效果，侧滑菜单. 集合
09-20
该文件包含 h5前端购物车， css3动画效果 ，侧滑菜单 。能够快速帮助正在开发商城的同学实现购物车，侧滑菜单等功能，如果有时间的话还可以将css3动画加入到相应的页面中。
h5 添加购物车 动画效果实现 （贝塞尔曲线）
最新发布
qq_41429765的博客
11-24 1571
【代码】h5 添加购车 动画效果实现 （贝塞尔曲线）
h5c3动画例子
01-02
使用html5+css3完成的网页设计作品
H5 C3粘稠状液体数字时钟动画代码.zip
07-11
代码片段： html, body { margin: 0; padding: 0; height: 100%; } .wrap {  position: relative;  width: 100%;  height: 100%;  display: flex; flex-direction: column;...}
html5 css3手机端添加购物车商品列表动画特效
09-08
html5 css3手机端添加购物车商品列表动画特效
h5c3动画
vision_seven7的博客
08-10 304
这里写目录标题transition 过渡动画案例盒子阴影案例盒子模型文字阴影案例background案例线性渐变径向渐变二维转换旋转平移缩放扭曲三维旋转效果三维移动3D盒子案例 transition 过渡动画 transition 的参数 参数1：表示过渡的属性 all 代表所有的属性 参数2：表示过渡的时间 参数3：表示动画的延迟时间 参数4：表示动画的运动方式 linear 匀速 staps()分布的 表示这个动画需要 几步完成
html5点击按钮商品飞入购物车动画特效
09-13
html5点击按钮商品飞入购物车动画特效
H5+C3 移动端小动画
12-27
h5宣传 小游戏 迎接2019 css3及其video的使用 没有解决video预加载
js加入购物车抛物线动画与购物车效果特效
05-23
js加入购物车抛物线动画与购物车效果特效，亲测可用， 当您在电商购物网站浏览中意的商品时，您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件，点击加入购物车按钮时，实现商品将飞入到右侧的购物车中的效果。 HTML 首先载入jQuery库文件和jquery.fly.min.js插件。 复制代码 代码如下: 接着，将商品信息html结构布置好，本例中，我们用四个商品并排布置，每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。 复制代码 代码如下: ￥3499.00 LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计 加入购物车 ￥3799.00 Hisense/海信 LED50T1A 海信电视官方旗舰店 加入购物车 ￥￥3999.00 Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视 加入购物车 ￥6969.00 乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视 加入购物车 然后，我们还需要在页面的右侧加上购物车以及提示信息。 复制代码 代码如下: 购物车 已成功加入购物车！ CSS 我们使用CSS先将商品排列美化，然后设置右侧购物车样式，具体请看代码： 复制代码 代码如下: .box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center} .box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left} .box:hover{border:1px solid #f90} .box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500} .box h4 span{font-size:20px} .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;} .m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;} .cart{color: #fff;t
仿饿了么添加购物车实现动画+购物车数据交互+二维码UI
05-26
仿饿了么添加购物车实现动画+购物车数据交互+二维码UI。
一些炫酷的C3动画特效
10-17
包括最受欢迎的星际css3动画,夜间行走特效,翻书效果,还有程序员表白页面源码哦
关于H5 移动端 动态添加购物车动画图 项目vue-ts
努力飞起的菜鸟
12-27 730
H5 移动端 vue+ts 项目中动态添加购物动画
html 购物车动画效果,购物车案例(JavaScript动态效果)
weixin_33624741的博客
06-03 814
用JavaScript来实现动态效果。全选思路可以在input标签里,添加单击事件,并且传递一个this。这个this就会把input本身传递过去。全选function cheAllFlag(th){//判断本身是否被点击var flag = th.checked;alert(flag);}确认用户点击之后,就在下面每个框都加一个name。注意这个name必须都叫一样的名字才好判断。接着使用for...
【H5C3过渡动画】
qq_45753546的博客
05-05 584
1.过渡 transition: 过度属性（all width) 可以指定什么属性进行过渡 过渡时间 过度动画函数（linear | ease | ease-in-out） 过渡延时 2.CSS3渐变【了解】 2.1 线性渐变 语法： background:linear-gradient(方位，颜色1，颜色2，颜色3，…） 方位 1 。单词： to top:从下往上 to bottom:从下往上 to left::从左往右 to right::从右往左 2. 数字+deg（角度） 注意：渐变和背景颜色不能同
什么？H5C3也能做动画！
N奈斯先生的博客
08-09 282
   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。   致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨 本期我们来说一下c3的2d、3d效果 一、2d转换 二、3d转换 三、3d动画 通过2d转换、3d动画可以实现一些网页的动画效果，使网页更加美观、更具有互动性、增加用户体验 一、2d转换（transform） 2d转换可以实现元素的位移、旋转、缩放等效果 旋转： 旋转就是让元素转起来 语法：transform：rota
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值