HTML5 3D衣服摇摆动画特效

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

1、HTML5 Canvas模拟衣服撕扯动画 超级逼真

该HTML5动画会捕获到鼠标拖拽的用力程度,从而来判断并实现衣服应该破损的程度,越用力,衣服被撕破的速度越快,赶紧来体验一下这个HTML5动画吧。
澳门新浦京手机版 1

 

在线演示        源码下载

澳门新浦京手机版 2

这又是一款基于HTML5
Canvas的3D动画杰作,它是一个可以随风飘动的3D衣服摇摆动画特效,非常逼真。当我们将鼠标滑过衣服时,衣服将会出现摇摆的动画,点击鼠标时,衣服将会更加剧烈地摆动。

2、纯CSS3绘制可爱小男孩动画 超酷面部表情

之前我们分享过几个纯CSS3动画特效,比如纯CSS3人物行走动画就非常酷,还有纯CSS3
Android
Logo动画绘制也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画,除了绘制的小男孩逼真可爱外,其面部表情也十分酷。整个动画是利用纯CSS3实现,没有用图片和JS,不知道你们的浏览器中效果怎么样。

澳门新浦京手机版 3

在线演示        源码下载

澳门新浦京手机版,这次要推荐的是9款非常有意思的HTML5动画,这些动画有些是基于Cavans的,有些是SVG结合HTML5实现的,让我们一起来看看。1、HTML5梦幻特效
可给任意元素添加魔幻效果
我们之前介绍HTML5动画特效比较多的是HTML5
3D特效,今天我们来换一种风格,来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素添加这么一种效果,即鼠标滑过时,元素上就会出现非常魔幻的动画特效,什么特效呢?你可以点开demo链接查看。在线演示
/ 源码下载2、HTML5 Canvas正弦波动画
可自定义波长和速度
正弦波我们很熟悉,以前数学和物理课上经常会用到,还记得以前物理老师演示的正弦动画还是用flash制作的呢。今天我们要分享的这款HTML5
Canvas动画就和正弦波有关,我们可以稍稍修改一下HTML5代码即可定义波长、频率等正弦波的一些属性,很酷吧。在线演示
/ 源码下载3、CSS3按钮发光动画
绚丽多彩
今天分享一款基于纯CSS3的发光按钮,多种色彩的按钮排列在网页上,伴随着闪闪发光的效果,CSS3的强大肯定会让你叹为观止。该CSS3按钮发光动画主要是利用了webkit的动画属性,让各种颜色规律性的发生变化。也许这么绚丽的CSS3按钮应用不那么广泛,但是在一些需要特效的网页中用来做提交表单按钮或者菜单项,那就非常方便了。在线演示
/ 源码下载4、HTML5
WebGL水面水波荡漾特效
之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错。今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画。在线演示
/
源码下载5、HTML5树叶飘落动画今天再来分享一款HTML5树叶飘落动画,这款HTML5树叶飘落动画是基于webkit内核的,所以需要webkit内核的浏览器才能播放该动画,效果真的非常酷。在线演示
/ 源码下载6、HTML5 3D衣服摆动特效前面我们介绍过很多HTML5
3D动画特效,最经典的要算HTML5
WebGL水面水波荡漾特效。今天我再向大家分享一款HTML5
3D衣服摆动动画特效,动画也是在HTML5
Canvas上完成,它模拟衣服晾在绳子上,点击鼠标可以让衣服摆动起来,就行风吹动它一样,非常逼真炫酷。在线演示
/
源码下载7、HTML5鲸鱼动画之前看到过同样效果的一款鲸鱼动画,不过可惜的是那个动画是用flash制作的。今天我找到了基于HTML5的鲸鱼动画,鲸鱼会随着鼠标的移动而游动,画面非常立体,鲸鱼也超级逼真。真的,HTML5确实很给力,HTML5动画完全可以完成flash能做的事情。在线演示
/ 源码下载8、纯CSS3 Android
Logo动画绘制
利用CSS3可以绘制很多复杂的图案图标,今天就利用纯CSS3实现Android
Logo图标,该CSS3 Android
Logo主要利用了CSS3中的圆角等属性,绘制出来的Logo非常逼真,同时该Android
Logo还有动画效果,鼠标滑过Android小人的头和手时,小手还能够挥动。在线演示
/
源码下载9、纯CSS3绘制可爱小男孩动画之前我们分享过几个纯CSS3动画特效,比如纯CSS3人物行走动画就非常酷,还有纯CSS3
Android
Logo动画绘制也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画,除了绘制的小男孩逼真可爱外,其面部表情也十分酷。整个动画是利用纯CSS3实现,没有用图片和JS,不知道你们的浏览器中效果怎么样。在线演示
/ 源码下载以上就是9个非常有意思的HTML5动画,欢迎收藏分享。 via:

澳门新浦京手机版 4

3、HTML5 3D图片折叠特效 超炫酷图片特效

我们之前介绍过很多HTML5 3D图片效果,比如HTML5/CSS3 3D环形图片墙、HTML5
3D相册浏览等等。今天我们再来分享一款HTML5
3D图片折叠特效,鼠标滑过图片时,折叠好的图片便会展开,鼠标离开图片时,图片又会折叠起来,效果非常酷。

澳门新浦京手机版 5

在线演示        源码下载

在线演示源码下载

4、HTML5 3D骨牌图片特效 带文字描述

今天分享一款很特别的HTML5
3D图片特效,当鼠标滑过图片时,平面的图片即会呈现3D的效果,和这款HTML5
3D图片折叠特效类似,也是通过鼠标滑过来展现3D效果。另外,这款HTML5
3D骨牌图片特效还可以设置图片描述信息。

澳门新浦京手机版 6

在线演示        源码下载

HTML代码

<div style="width:500px;margin:10px auto">
    <canvas id="cv" width="480" height="300"></canvas>
    <p>"3D on 2D Canvas" demo</p>
    <p>move cursor to pan / click to swing</p>
</div>

5、HTML5/CSS3 3D立体功能按钮 超酷CSS3按钮

之前我们分享过很多精彩的CSS3按钮,像这款纯CSS3
3D牛奶样式按钮,非常酷,还有这款CSS3发光社会分享按钮,也挺不错的。今天要分享的这款CSS3
3D按钮十分大气,按钮在点击的时候也有立体的效果,非常酷的一款CSS3
3D按钮。

澳门新浦京手机版 7

在线演示        源码下载

P3D库JS代码,主要用来处理3D效果的

window.P3D = {
    texture: null,
    g: null
};

P3D.clear = function(f, w, h) {
    var g = this.g;
    g.beginPath();
    g.fillStyle = f;
    g.fillRect(0, 0, w, h);

}

P3D.num_cmp = function(a,b){return a-b;}

P3D.drawTriangle = function(poss, uvs, shade_clr) {
    var w = this.texture.width;
    var h = this.texture.height;

    var g = this.g;

    var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ];
    var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ];

    var vA = [ uvs[1].u - uvs[0].u , uvs[1].v - uvs[0].v ];
    var vB = [ uvs[2].u - uvs[0].u , uvs[2].v - uvs[0].v ];

    vA[0] *= w;
    vA[1] *= h;

    vB[0] *= w;
    vB[1] *= h;

    var m = new M22();
    m._11 = vA[0];
    m._12 = vA[1];
    m._21 = vB[0];
    m._22 = vB[1];

    var im = m.getInvert();
    if (!im) return false;

    var a = im._11 * vAd[0] + im._12 * vBd[0];
    var b = im._21 * vAd[0] + im._22 * vBd[0];

    var c = im._11 * vAd[1] + im._12 * vBd[1];
    var d = im._21 * vAd[1] + im._22 * vBd[1];

    var wu = uvs[0].u * w;
    var hv = uvs[0].v * h;
    var du = wu * a + hv * b;
    var dv = wu * c + hv * d;

    g.save();

    g.beginPath();
    g.moveTo(poss[0].x, poss[0].y);
    g.lineTo(poss[1].x, poss[1].y);
    g.lineTo(poss[2].x, poss[2].y);
    g.clip();

    g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);

    // bounds
    var bx = [wu, wu+vA[0], wu+vB[0]];
    var by = [hv, hv+vA[1], hv+vB[1]];

    bx.sort(P3D.num_cmp);
    by.sort(P3D.num_cmp);

    var bw = bx[2] - bx[0];
    var bh = by[2] - by[0];

    if ((bx[0]+bw) <= (w-1)) bw++;
    if ((by[0]+bh) <= (h-1)) bh++;
    if (bx[0] >= 1) {bx[0]--; bw++;}
    if (by[0] >= 1) {by[0]--; bh++;}

    g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw, bh);

    if (shade_clr) {
        g.fillStyle = shade_clr;
        g.fillRect(bx[0], by[0], bw, bh);
    }

    g.restore();

    return true;
}

P3D.drawTestByIndexBuffer = function(pos_buf, ix_buf, culling) {
    var g = this.g;

    if ((ix_buf.length%3) != 0)
        throw "invalid index buffer length!";

    var len = ix_buf.length/3;

    var i, ibase, vbase;
    var poss = [{},{},{}];
    g.strokeWidth = 1;
    for (i = 0, ibase = 0;i < len;++i)
    {
        vbase = ix_buf[ibase++] << 2;
        poss[0].x = pos_buf[vbase++];
        poss[0].y = pos_buf[vbase  ];

        vbase = ix_buf[ibase++] << 2;
        poss[1].x = pos_buf[vbase++];
        poss[1].y = pos_buf[vbase  ];

        vbase = ix_buf[ibase++] << 2;
        poss[2].x = pos_buf[vbase++];
        poss[2].y = pos_buf[vbase  ];

        // z component of cross product < 0 ?

        var Ax = poss[1].x - poss[0].x;
        var Ay = poss[1].y - poss[0].y;
        var Cx = poss[2].x - poss[1].x;
        var Cy = poss[2].y - poss[1].y;

        var cull = ( (((Ax * Cy) - (Ay * Cx))*culling) < 0);

        g.beginPath();
        g.strokeStyle = cull ? "#592" : "#0f0";
        g.moveTo(poss[0].x, poss[0].y);
        g.lineTo(poss[1].x, poss[1].y);
        g.lineTo(poss[2].x, poss[2].y);
        g.lineTo(poss[0].x, poss[0].y);
        g.stroke();
    }
}

P3D.drawByIndexBuffer = function(pos_buf, ix_buf, tx_buf, culling, z_clip) {
    var w, h;
    var color_polygon = !this.texture;
    if (this.texture) {
        w = this.texture.width;
        h = this.texture.height;
    }

    var g = this.g;
    var m = new M22();

    if (!culling) culling = 0;

    if ((ix_buf.length%3) != 0)
        throw "invalid index buffer length!";

    var i, ibase, vbase, tbase, poss = [{},{},{}];
    var len = ix_buf.length/3;
    var uv_0u, uv_0v, uv_1u, uv_1v, uv_2u, uv_2v;

    for (i = 0, ibase = 0;i < len;++i)
    {
        tbase = ix_buf[ibase++] << 1
        vbase = tbase << 1;
        poss[0].x = pos_buf[vbase++]; uv_0u = tx_buf[tbase++];
        poss[0].y = pos_buf[vbase++]; uv_0v = tx_buf[tbase];
        if (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {ibase += 2; continue;}

        tbase = ix_buf[ibase++] << 1
        vbase = tbase << 1;
        poss[1].x = pos_buf[vbase++]; uv_1u = tx_buf[tbase++];
        poss[1].y = pos_buf[vbase++]; uv_1v = tx_buf[tbase];
        if (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {++ibase; continue;}

        tbase = ix_buf[ibase++] << 1
        vbase = tbase << 1;
        poss[2].x = pos_buf[vbase++]; uv_2u = tx_buf[tbase++];
        poss[2].y = pos_buf[vbase++]; uv_2v = tx_buf[tbase];
        if (z_clip && (pos_buf[vbase] < 0 || pos_buf[vbase] > 1)) {continue;}

        var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ];
        var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ];

        var vCd = [ poss[2].x - poss[1].x , poss[2].y - poss[1].y ];

        // z component of cross product < 0 ?
        if( (((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*culling) < 0)
            continue;

        if (color_polygon) {
            g.fillStyle = uv_0u;

            g.beginPath();
            g.moveTo(poss[0].x, poss[0].y);
            g.lineTo(poss[1].x, poss[1].y);
            g.lineTo(poss[2].x, poss[2].y);
            g.fill();
            continue;
        }

        var vA = [ uv_1u - uv_0u , uv_1v - uv_0v ];
        var vB = [ uv_2u - uv_0u , uv_2v - uv_0v ];

        vA[0] *= w;
        vA[1] *= h;

        vB[0] *= w;
        vB[1] *= h;

        m._11 = vA[0];
        m._12 = vA[1];
        m._21 = vB[0];
        m._22 = vB[1];

        var im = m.getInvert();
        if (!im) { continue;}

        var a = im._11 * vAd[0] + im._12 * vBd[0];
        var b = im._21 * vAd[0] + im._22 * vBd[0];

        var c = im._11 * vAd[1] + im._12 * vBd[1];
        var d = im._21 * vAd[1] + im._22 * vBd[1];

        var wu = uv_0u * w;
        var hv = uv_0v * h;
        var du = wu * a + hv * b;
        var dv = wu * c + hv * d;

        g.save();

        g.beginPath();
        g.moveTo(poss[0].x, poss[0].y);
        g.lineTo(poss[1].x, poss[1].y);
        g.lineTo(poss[2].x, poss[2].y);
        g.clip();
        g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);

        // bounds
        var bx = [wu, wu+vA[0], wu+vB[0]];
        var by = [hv, hv+vA[1], hv+vB[1]];

        bx.sort(P3D.num_cmp);
        by.sort(P3D.num_cmp);

        var bw = bx[2] - bx[0];
        var bh = by[2] - by[0];

        if ((bx[0]+bw) <= (w-1)) bw++;
        if ((by[0]+bh) <= (h-1)) bh++;
        if (bx[0] >= 1) {bx[0]--; bw++;}
        if (by[0] >= 1) {by[0]--; bh++;}

        g.drawImage(this.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw, bh);
/*
        if (shade_clr) {
            g.fillStyle = shade_clr;
            g.fillRect(bx[0], by[0], bw, bh);
        }
*/
        g.restore();

    }

}

function Vec3(_x, _y, _z)
{
    this.x = _x || 0;
    this.y = _y || 0;
    this.z = _z || 0;
}

Vec3.prototype = {
    zero: function() {
        this.x = this.y = this.z = 0;
    },

    sub: function(v) {
        this.x -= v.x;
        this.y -= v.y;
        this.z -= v.z;

        return this;
    },

    add: function(v) {
        this.x += v.x;
        this.y += v.y;
        this.z += v.z;

        return this;
    },

    copyFrom: function(v) {
        this.x = v.x;
        this.y = v.y;
        this.z = v.z;

        return this;
    },

    norm:function() {
        return Math.sqrt(this.x*this.x + this.y*this.y + this.z*this.z);
    },

    normalize: function() {
        var nrm = Math.sqrt(this.x*this.x + this.y*this.y + this.z*this.z);
        if (nrm != 0)
        {
            this.x /= nrm;
            this.y /= nrm;
            this.z /= nrm;
        }
        return this;
    },

    smul: function(k) {
        this.x *= k;
        this.y *= k;
        this.z *= k;

        return this;
    },

    dpWith: function(v) {
        return this.x*v.x + this.y*v.y + this.z*v.z;
    },

    cp: function(v, w) {
        this.x = (w.y * v.z) - (w.z * v.y);
        this.y = (w.z * v.x) - (w.x * v.z);
        this.z = (w.x * v.y) - (w.y * v.x);

        return this;
    },

    toString: function() {
        return this.x + ", " + this.y + "," + this.z;
    }
}

function M44(cpy)
{
    if (cpy)
        this.copyFrom(cpy);
    else {
        this.ident();
    }
}

M44.prototype = {
    ident: function() {
              this._12 = this._13 = this._14 = 0;
        this._21 =       this._23 = this._24 = 0;
        this._31 = this._32 =       this._34 = 0;
        this._41 = this._42 = this._43 =       0;

        this._11 = this._22 = this._33 = this._44 = 1;

        return this;
    },

    copyFrom: function(m) {
        this._11 = m._11;
        this._12 = m._12;
        this._13 = m._13;
        this._14 = m._14;

        this._21 = m._21;
        this._22 = m._22;
        this._23 = m._23;
        this._24 = m._24;

        this._31 = m._31;
        this._32 = m._32;
        this._33 = m._33;
        this._34 = m._34;

        this._41 = m._41;
        this._42 = m._42;
        this._43 = m._43;
        this._44 = m._44;

        return this;
    },

    transVec3: function(out, x, y, z) {
        out[0] = x * this._11 + y * this._21 + z * this._31 + this._41;
        out[1] = x * this._12 + y * this._22 + z * this._32 + this._42;
        out[2] = x * this._13 + y * this._23 + z * this._33 + this._43;
        out[3] = x * this._14 + y * this._24 + z * this._34 + this._44;
    },

    transVec3Rot: function(out, x, y, z) {
        out[0] = x * this._11 + y * this._21 + z * this._31;
        out[1] = x * this._12 + y * this._22 + z * this._32;
        out[2] = x * this._13 + y * this._23 + z * this._33;
    },

    perspectiveLH: function(vw, vh, z_near, z_far) {
        this._11 = 2.0*z_near/vw;
        this._12 = 0;
        this._13 = 0;
        this._14 = 0;

        this._21 = 0;
        this._22 = 2*z_near/vh;
        this._23 = 0;
        this._24 = 0;

        this._31 = 0;
        this._32 = 0;
        this._33 = z_far/(z_far-z_near);
        this._34 = 1;

        this._41 = 0;
        this._42 = 0;
        this._43 = z_near*z_far/(z_near-z_far);
        this._44 = 0;

        return this;
    },

    lookAtLH: function(aUp, aFrom, aAt) {
        var aX = new Vec3();
        var aY = new Vec3();

        var aZ = new Vec3(aAt.x, aAt.y, aAt.z);
        aZ.sub(aFrom).normalize();

        aX.cp(aUp, aZ).normalize();
        aY.cp(aZ, aX);

        this._11 = aX.x;  this._12 = aY.x;  this._13 = aZ.x;  this._14 = 0;
        this._21 = aX.y;  this._22 = aY.y;  this._23 = aZ.y;  this._24 = 0;
        this._31 = aX.z;  this._32 = aY.z;  this._33 = aZ.z;  this._34 = 0;

        this._41 = -aFrom.dpWith(aX);
        this._42 = -aFrom.dpWith(aY);
        this._43 = -aFrom.dpWith(aZ);
        this._44 = 1;

        return this;
    },

    mul: function(A, B) {
        this._11 = A._11*B._11  +  A._12*B._21  +  A._13*B._31  +  A._14*B._41;
        this._12 = A._11*B._12  +  A._12*B._22  +  A._13*B._32  +  A._14*B._42;
        this._13 = A._11*B._13  +  A._12*B._23  +  A._13*B._33  +  A._14*B._43;
        this._14 = A._11*B._14  +  A._12*B._24  +  A._13*B._34  +  A._14*B._44;

        this._21 = A._21*B._11  +  A._22*B._21  +  A._23*B._31  +  A._24*B._41;
        this._22 = A._21*B._12  +  A._22*B._22  +  A._23*B._32  +  A._24*B._42;
        this._23 = A._21*B._13  +  A._22*B._23  +  A._23*B._33  +  A._24*B._43;
        this._24 = A._21*B._14  +  A._22*B._24  +  A._23*B._34  +  A._24*B._44;

        this._31 = A._31*B._11  +  A._32*B._21  +  A._33*B._31  +  A._34*B._41;
        this._32 = A._31*B._12  +  A._32*B._22  +  A._33*B._32  +  A._34*B._42;
        this._33 = A._31*B._13  +  A._32*B._23  +  A._33*B._33  +  A._34*B._43;
        this._34 = A._31*B._14  +  A._32*B._24  +  A._33*B._34  +  A._34*B._44;

        this._41 = A._41*B._11  +  A._42*B._21  +  A._43*B._31  +  A._44*B._41;
        this._42 = A._41*B._12  +  A._42*B._22  +  A._43*B._32  +  A._44*B._42;
        this._43 = A._41*B._13  +  A._42*B._23  +  A._43*B._33  +  A._44*B._43;
        this._44 = A._41*B._14  +  A._42*B._24  +  A._43*B._34  +  A._44*B._44;

        return this;
    },

    translate: function(x, y, z) {
        this._11 = 1;  this._12 = 0;  this._13 = 0;  this._14 = 0;
        this._21 = 0;  this._22 = 1;  this._23 = 0;  this._24 = 0;
        this._31 = 0;  this._32 = 0;  this._33 = 1;  this._34 = 0;

        this._41 = x;  this._42 = y;  this._43 = z;  this._44 = 1;
        return this;
    },

    transpose33: function() {
        var t;

        t = this._12;
        this._12 = this._21;
        this._21 = t;

        t = this._13;
        this._13 = this._31;
        this._31 = t;

        t = this._23;
        this._23 = this._32;
        this._32 = t;

        return this;
    },

    // OpenGL style rotation
    glRotate: function(angle, x, y, z) {
        var s = Math.sin( angle );
        var c = Math.cos( angle );

        var xx = x * x;
        var yy = y * y;
        var zz = z * z;
        var xy = x * y;
        var yz = y * z;
        var zx = z * x;
        var xs = x * s;
        var ys = y * s;
        var zs = z * s;
        var one_c = 1.0 - c;
/*
        this._11 = (one_c * xx) + c;
        this._21 = (one_c * xy) - zs;
        this._31 = (one_c * zx) + ys;
        this._41 = 0;

        this._12 = (one_c * xy) + zs;
        this._22 = (one_c * yy) + c;
        this._32 = (one_c * yz) - xs;
        this._42 = 0;

        this._13 = (one_c * zx) - ys;
        this._23 = (one_c * yz) + xs;
        this._33 = (one_c * zz) + c;
        this._43 = 0;

        this._14 = 0;
        this._24 = 0;
        this._34 = 0;
        this._44 = 1;
*/

        this._11 = (one_c * xx) + c;
        this._12 = (one_c * xy) - zs;
        this._13 = (one_c * zx) + ys;
        this._14 = 0;

        this._21 = (one_c * xy) + zs;
        this._22 = (one_c * yy) + c;
        this._23 = (one_c * yz) - xs;
        this._24 = 0;

        this._31 = (one_c * zx) - ys;
        this._32 = (one_c * yz) + xs;
        this._33 = (one_c * zz) + c;
        this._34 = 0;

        this._41 = 0;
        this._42 = 0;
        this._43 = 0;
        this._44 = 1;

        return this;
    }

}

// matrix 2x2
function M22()
{
    this._11 = 1;
    this._12 = 0;
    this._21 = 0;
    this._22 = 1;
}

M22.prototype.getInvert = function()
{
    var out = new M22();
    var det = this._11 * this._22 - this._12 * this._21;
    if (det > -0.0001 && det < 0.0001)
        return null;

    out._11 = this._22 / det;
    out._22 = this._11 / det;

    out._12 = -this._12 / det;
    out._21 = -this._21 / det;

    return out;
}

6、HTML5/CSS3原图对比查看特效 HTML5图片特效

说到HTML5图片特效,我们应该已经分享过很多了,大家可以到HTML5图片栏目中查看。今天我们再来看一款不一样的HTML5图片特效,这款HTML5应用可以将两张相似的图片进行细节上的对比,我们只需移动鼠标即可以观察到两张图片的不同点,非常实用方便。

澳门新浦京手机版 8

在线演示        源码下载

3D衣服动画JS代码

function ClothApp()
{
    this.canvas = document.getElementById("cv");

    P3D.g = this.canvas.getContext("2d");

    var tex = new Image();
    this.texture1 = tex;
    tex.onload = function(){ _this.start(); };
    tex.src = "20090226032826.gif";

    tex = new Image();
    this.texture2 = tex;
    tex.onload = function(){ _this.start(); };
    tex.src = "20090226032825.png";

    this.mLoadCount = 2;
    this.mTickCount = 0;

    this.G = 0.53;
    this.G1 = 0.45;
    this.mProjMat  = null;
    this.mViewMat  = null;
    this.mViewFrom = new Vec3();
    this.mViewFrom.y = -150;
    this.mViewFrom.z = 1000;
    this.mViewFromA = (new Vec3()).copyFrom(this.mViewFrom);

    this.mViewAngle = 0;

    this.mNLen = 0;
    this.mNodes = [];
    this.mRenderTris = null;

    this.mLTNode = null;
    this.mRTNode = null;

    this.mLTNodeV = new Vec3();
    this.mRTNodeV = new Vec3();

    this.mWForce = new Vec3();
    this.frate = 15;

    var _this = this;
}

ClothApp.zsortCmp = function(t1, t2) {
    return t2.sortKey - t1.sortKey;
}

ClothApp.prototype = {
    start: function() {
        if (--this.mLoadCount != 0) return;

        this.vUP = new Vec3(0,  1, 0);
        this.vAT = new Vec3(0, 80, 0);

        this.mViewport = {};
        this.mViewport.w = 480;
        this.mViewport.h = 300;
        this.mViewport.ow = 240;
        this.mViewport.oh = 150;
        this.setupTransforms();

        this.generateCloth(180);
        this.generateRenderTriangles();

        var _this = this;
        this.canvas.addEventListener("mousemove", function(e){_this.onMouseMove(e);}, false);
        this.canvas.addEventListener("mousedown", function(e){_this.onClick(e);}, false);

        window.setTimeout(function(){_this.onInterval();}, this.frate);
    },

    onInterval: function() {
        this.mTickCount++;

        // this.mLTNodeV.z = Math.cos(this.mTickCount*0.1) * 2;

        this.tick();
        this.updatePosition();
        this.draw();

        var _this = this;
        window.setTimeout(function(){_this.onInterval();}, this.frate);
    },

    onMouseMove: function(e) {
        if (e.clientX || e.clientX == 0)
            this.mViewAngle = (e.clientX - 240) * 0.004;

        if (e.clientY || e.clientY == 0)
            this.mViewFromA.y = 90 - (e.clientY - 0) * 0.8;
    },

    onClick: function(e) {
        if (e.clientX || e.clientX == 0)
        {
            this.mWForce.z = -4;
            this.mWForce.x = (e.clientX - 240) * -0.03;
        }
    },

    tick: function() {
        this.updateViewTrans(this.mViewAngle);

        var nlen = this.mNodes.length;
        var i, nd;
        for(i = 0;i < nlen;i++)
        {
            nd = this.mNodes[i];
            nd.F.x = 0;
            nd.F.z = 0;
            if (nd.flags & 4)
                nd.F.y = -this.G1;
            else
                nd.F.y = -this.G;

            nd.F.add(this.mWForce);
        }

        this.mWForce.zero();
        this.applyTension();

        for(i = 0;i < nlen;i++)
        {
            nd = this.mNodes[i];

            if ((nd.flags&1) != 0) {
                nd.F.sub(nd.F);
            }

            nd.velo.add(nd.F);
        }

        this.mLTNode.velo.copyFrom(this.mLTNodeV);
        this.mRTNode.velo.copyFrom(this.mRTNodeV);
    },

    updatePosition: function() {
        var nlen = this.mNodes.length;
        var i, nd;
        for(i = 0;i < nlen;i++)
        {
            nd = this.mNodes[i];

            if ((nd.flags&1) != 0) {
                nd.cv.x = 0;
                nd.cv.y = 0;
                nd.cv.z = 0;
            }

            nd.pos.add(nd.velo);
            nd.velo.sub(nd.cv);
            nd.cv.x = 0;
            nd.cv.y = 0;
            nd.cv.z = 0;

            nd.velo.smul(0.95);
        }
    },

    draw: function() {
        P3D.clear("#000", this.mViewport.w, this.mViewport.h);
        this.transformPolygons();

        this.mRenderTris.sort(ClothApp.zsortCmp);
        var len = this.mRenderTris.length;
        var t, sh;
        for (var i = 0;i < len;i++) {
            t = this.mRenderTris[i];

            if (P3D.texture != t.texture)
                P3D.texture = t.texture;

            sh = undefined;
            if (t.lighting && t.shade > 0.01)
                sh = "rgba(0,0,0,"+t.shade+")";
            P3D.drawTriangle(t.tposs, t.uvs, sh);
        }
    },

    applyTension: function() {
        var i, k, nd;
        var v = new Vec3();
        var nlen = this.mNodes.length;
        var naturalLen = this.mNLen;

        for (k = 0;k < nlen;k++)
        {
            nd = this.mNodes[k];
            var F = nd.F;

            for (i = 0;i < 4;i++)
            {
                var nbr = nd.links[i];
                if (!nbr) continue;

                var len = v.copyFrom(nbr.pos).sub(nd.pos).norm();
                var dlen = len - naturalLen;
                if (dlen > 0) {
                    v.smul(dlen * 0.5 / len);

                    F.x += v.x;
                    F.y += v.y;
                    F.z += v.z;
                    nd.cv.add(v.smul(0.8));
                }
            }
        }   
    },

    setupTransforms: function() {
        this.mProjMat = new M44();
        this.mProjMat.perspectiveLH(24, 15, 10, 9000);

        this.mViewMat = new M44();
        this.updateViewTrans(0);
    },

    updateViewTrans: function(ry) {
        this.mViewFromA.z = Math.cos(ry) * 380;
        this.mViewFromA.x = Math.sin(ry) * 380;

        this.mViewFrom.smul(0.7);
        this.mViewFrom.x += this.mViewFromA.x * 0.3;
        this.mViewFrom.y += this.mViewFromA.y * 0.3;
        this.mViewFrom.z += this.mViewFromA.z * 0.3;

        this.mViewMat.lookAtLH(this.vUP, this.mViewFrom, this.vAT);
    },

    generateCloth: function(base_y) {
        var cols = 9;
        var rows = 8;

        var step   = 22;
        this.mNLen = step*0.9;
        var w = (cols-1) * step;

        var i, k;
        for (k = 0;k < rows;k++)
        {
            for (i = 0;i < cols;i++)
            {
                var nd = new ClothNode();
                nd.pos.x = -(w/2) + i*step;
                nd.pos.y = base_y -k*step/2;
                nd.pos.z = k*16;

                nd.uv.u = i / (cols-1);
                nd.uv.v = k / (rows-1);

                if (i > 0) {
                    var prv_nd = this.mNodes[this.mNodes.length-1];
                    prv_nd.links[1] = nd;
                    nd.links[0] = prv_nd;
                }

                if (k > 0) {
                    var up_nd = this.mNodes[this.mNodes.length-cols];
                    up_nd.links[4] = nd;
                    nd.links[3] = up_nd;
                }

                if (i != 0 && i != 4 && i != (cols-1))
                    nd.flags |= 4;

                this.mNodes.push(nd);
            }
        }

        // fix left-top and right-top
        this.mNodes[0     ].flags |= 1;
        this.mNodes[4     ].flags |= 1;
        this.mNodes[cols-1].flags |= 1;

        this.mLTNode = this.mNodes[0     ];
        this.mRTNode = this.mNodes[cols-1];
    },

    generateRenderTriangles: function()
    {
        if (!this.mRenderTris) this.mRenderTris = [];

        var i;
        var nd;
        var nlen = this.mNodes.length;

        for(i = 0;i < nlen;i++)
        {
            nd = this.mNodes[i];
            if (nd.links[1] && nd.links[1].links[4]) {
                var t = new RenderTriangle();
                t.texture = this.texture1;

                t.poss[0] = nd.pos;
                t.poss[1] = nd.links[1].pos;
                t.poss[2] = nd.links[1].links[4].pos;

                t.uvs[0]  = nd.uv;
                t.uvs[1]  = nd.links[1].uv;
                t.uvs[2]  = nd.links[1].links[4].uv;

                this.mRenderTris.push(t);

                t = new RenderTriangle();
                t.texture = this.texture1;

                t.poss[0] = nd.pos;
                t.poss[1] = nd.links[1].links[4].pos;
                t.poss[2] = nd.links[4].pos;

                t.uvs[0]  = nd.uv;
                t.uvs[1]  = nd.links[1].links[4].uv;
                t.uvs[2]  = nd.links[4].uv;

                this.mRenderTris.push(t);
            }
        }

        this.addBGTriangles(this.mNodes[0].pos.y);
    },

    addBGTriangles: function(by) {
        var cols = 4;
        var t, x, y, sz = 110;
        var ox = -(cols*sz)/2;
        var oz = -(cols*sz)/2;

        for (y = 0;y < cols;y++) {
            for (x = 0;x < cols;x++) {
                var bv = ((x+y)&1) * 0.5;
                t = new RenderTriangle();
                t.texture = this.texture2;

                t.poss[0] = new Vec3(ox + x*sz     , by, oz + y*sz     );
                t.poss[1] = new Vec3(ox + x*sz + sz, by, oz + y*sz     );
                t.poss[2] = new Vec3(ox + x*sz     , by, oz + y*sz + sz);

                t.uvs[0]  = {u:0  , v:bv    };
                t.uvs[1]  = {u:0.5, v:bv    };
                t.uvs[2]  = {u:0  , v:bv+0.5};

                if ((x==1 || x==2) && (y==1 || y==2))
                    this.modifyRoofUV(t, x == 2, bv);

                t.lighting = false;
                t.zBias = 0.5;
                this.mRenderTris.push(t);

                t = new RenderTriangle();
                t.texture = this.texture2;

                t.poss[0] = new Vec3(ox + x*sz     , by, oz + y*sz + sz);
                t.poss[1] = new Vec3(ox + x*sz + sz, by, oz + y*sz    );
                t.poss[2] = new Vec3(ox + x*sz + sz, by, oz + y*sz + sz);

                t.uvs[0]  = {u:0  , v:bv+0.5};
                t.uvs[1]  = {u:0.5, v:bv    };
                t.uvs[2]  = {u:0.5, v:bv+0.5};

                if ((x==1 || x==2) && (y==1 || y==2))
                    this.modifyRoofUV(t, x == 2, bv);

                t.lighting = false;
                t.zBias = 0.5;
                this.mRenderTris.push(t);

            }
        }
    },

    modifyRoofUV: function(t, rv, bv) {
        if (rv) {
            t.uvs[0].u = 0.5 - t.uvs[0].u;
            t.uvs[1].u = 0.5 - t.uvs[1].u;
            t.uvs[2].u = 0.5 - t.uvs[2].u;
        }

        t.uvs[0].u += 0.5;
        t.uvs[1].u += 0.5;
        t.uvs[2].u += 0.5;

        if (rv) {
            t.uvs[0].v = 0.5 - t.uvs[0].v + bv + bv;
            t.uvs[1].v = 0.5 - t.uvs[1].v + bv + bv;
            t.uvs[2].v = 0.5 - t.uvs[2].v + bv + bv;
        }

    },

    transformPolygons: function() {
        var trans = new M44();
        trans.mul(this.mViewMat, this.mProjMat);

        var hw = this.mViewport.ow;
        var hh = this.mViewport.oh;

        var len = this.mRenderTris.length;
        var t;
        var spos = [0, 0, 0, 0];
        for (var i = 0;i < len;i++) {
            t = this.mRenderTris[i];
            for (var k = 0;k < 3;k++) {
                trans.transVec3(spos, t.poss[k].x, t.poss[k].y, t.poss[k].z);

                var W = spos[3];
                spos[0] /= W;
                spos[1] /= W;
                spos[2] /= W;

                spos[0] *= this.mViewport.w;
                spos[1] *= -this.mViewport.h;
                spos[0] += hw;
                spos[1] += hh;

                t.tposs[k].x = spos[0];
                t.tposs[k].y = spos[1];
                t.tposs[k].z = spos[2];
            }

            var v1 = (new Vec3()).copyFrom(t.poss[1]).sub(t.poss[0]).normalize();
            var v2 = (new Vec3()).copyFrom(t.poss[2]).sub(t.poss[1]).normalize();
            var N = (new Vec3()).cp(v1, v2);

            trans.transVec3Rot(spos, N.x, N.y, N.z);

            if (t.lighting) {
                if (spos[2] > 0)
                    t.shade = 0.8
                else {
                    t.shade = 0.1 - N.y * 0.6;
                    if (t.shade < 0) t.shade = 0;
                }
            }

            t.sortKey = Math.floor( (t.tposs[0].z + t.tposs[1].z + t.tposs[2].z + t.zBias) *1000 );
        }
    }
}

function ClothNode()
{
    this.flags = 0;
    this.pos  = new Vec3();
    this.velo = new Vec3();
    this.cv   = new Vec3();
    this.F    = new Vec3();
    this.links = [null, null, null, null];
    this.uv = {u:0, v:0};
}

function RenderTriangle()
{
    this.texture = null;
    this.poss  = new Array(3);
    this.tposs = [new Vec3(), new Vec3(), new Vec3()];
    this.uvs = [{u:0, v:0}, {u:0, v:0}, {u:0, v:0}];
    this.shade = 0;
    this.lighting = true;
    this.zBias = 0;

    this.sortKey = 0;
}

在线演示源码下载

以上就是HTML5
3D衣服摇摆动画特效的源码介绍,需要更为深入学习的下载源代码来研究。

7、HTML5相册照片浏览器 可连接Flickr照片服务

以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强。不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫酷。今天分享的这款HTML5相册浏览器可以连接到Flickr获取照片,也可以连接到youtube获取视频,照片在初始化的时候有波浪般的效果。

澳门新浦京手机版 9

在线演示        源码下载

8、HTML5/CSS3 3D下拉折叠菜单 超炫CSS3菜单动画

之前我们介绍过很多CSS3菜单了,效果都十分华丽炫酷,但是这些CSS3菜单基本都是二维平面菜单,今天要分享的这款HTML5/CSS3菜单却是3D的效果。菜单展现时出现折叠下拉的动画特效,菜单也可以收起,鼠标滑过菜单项的效果也很不错。

澳门新浦京手机版 10

在线演示        源码下载

9、HTML5 3D旋转图片相册 可鼠标悬停

图片特效在HTML5应用中十分广泛,我们也在html5tricks上收集了不少HTML5图片特效,今天要分享的这款HTML5
3D旋转图片相册又非常绚丽,和之前分享的这款HTML5/CSS3
3D环形图片墙类似,也是一面立体的图片墙,图片不停的切换,鼠标滑过图片时即可激活图片查看。

澳门新浦京手机版 11

在线演示        源码下载

以上就是9款最新超酷HTML5/CSS3应用插件,欢迎收藏分享。

Canvas模拟衣服撕扯动画 超级逼真
该HTML5动画会捕获到鼠标拖拽的用力程度,从而来判断并实现衣服应该破损的程度,越用力,衣服…

发表评论

电子邮件地址不会被公开。 必填项已用*标注