Velocity.js slice + sequence 6种照片列表渐入动效

通过JSON API接口获取图片数据，响应式布局。

html5, gallery, template

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3261
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/*
  + jquery.js
  + velocity.js
  + velocity.ui.js
*/

/* -----------------------------------------------------

VELOCITY.JS SLUCE + SEQUENCE

Animate different boxes with different animations and sequence it.
This demo has a bounch of stuff not needed for a basic slice + sequence
since everything is wrapped up in a function and lots of if/else statements.

For basic usage of using Velocity sequence go to:
http://julian.com/research/velocity/#uiPack

----------------------------------------------------- */

// Define base div
var boxes = $('#boxes');

/* -----------------------------------------------------
REGISTER CLICK EVENTS FOR BUTTONS
----------------------------------------------------- */

$('.type1').click(function() {
    goVelocity(true);
})

$('.type2').click(function() {
    goVelocity(true, 'custom.flickDownIn', 'custom.flickUpIn', vOption2);
})

$('.type3').click(function() {
    goVelocity(true, 'custom.zoomOutIn', 'custom.zoomInIn', vOption3);
})

$('.type4').click(function() {
    goVelocity(true, 'custom.superZoomOutIn', 'custom.superZoomOutIn', vOption4);
})

$('.type5').click(function() {
    goVelocity('type5', '', '', vOption5);
})

$('.type6').click(function() {
    goVelocity('type7', '', '', vOption5);
})

/* -----------------------------------------------------
GET SOME CONTENTS
100% UNRELATED to animation, scroll down the 'real' stuff
----------------------------------------------------- */

boxes.append('<div id="load">Loading data...</div>')

var getMax = 12;
var str = '';
//var tags = 'tommiehansen+sunset';
var
    tags = 'tommiehansen',
    sort = 'interestingness-desc';
//uri = "http://pipes.yahoo.com/pipes/pipe.run?_id=6b12dfa3cc61dcafcdcb116bc8114e0b&_render=json&search="+tags+"&sort="+sort+"&num="+getMax;
uri = "/uploads/141004/flickrs.json"; //get flickr photos from local
$.getJSON(uri,
    function(data) {
        $.each(data.value.items, function(i, item) {
            //var img = item.media.m;
            var img = item.guid;
            //img = img.replace('.jpg','_m.jpg');

str += '<div class="box">';
            str += '<a href="' + item.link + '" target="_blank">';
            str += '<img src="' + img + '" width="240" height="159" /></a>';
            str += '<div class="boxRight"><h3>' + item.title + '</h3><i>Photo <span>by</span> ';
            str += '<a href="' + item.link + '" target="_blank">Wow@Techbrood</a> / flickr</i>';
            str += '</div></div>';

if (i == getMax - 1) {
                return false;
            }
        });

boxes.empty().append(str);
        goVelocity(); // run initial
    });

/* -----------------------------------------------------
BEGIN VELOCITY ANIMATIONS
----------------------------------------------------- */

// Register new animations

$.Velocity.RegisterUI("custom.slideUpIn", {
    defaultDuration: 500,
    calls: [
        [{
            opacity: [1, 0],
            translateY: [0, 90],
            translateZ: 0
        }]
    ]
});

$.Velocity.RegisterUI("custom.slideDownIn", {
    defaultDuration: 500,
    calls: [
        [{
            opacity: [1, 0],
            translateY: [0, -90],
            translateZ: 0
        }]
    ]
});

$.Velocity.RegisterUI("custom.slideLeftIn", {
    defaultDuration: 500,
    calls: [
        [{
            opacity: [1, 0],
            translateX: [0, -90],
            translateZ: 0
        }]
    ]
});

$.Velocity.RegisterUI("custom.slideRightIn", {
    defaultDuration: 500,
    calls: [
        [{
            opacity: [1, 0],
            translateX: [0, 90],
            translateZ: 0
        }]
    ]
});

$.Velocity.RegisterUI("custom.zoomOutIn", {
    defaultDuration: 500,
    calls: [
        [{
            opacity: [1, 0],
            scale: [1, 1.5],
            translateZ: 0
        }]
    ]
});

$.Velocity.RegisterUI("custom.zoomInIn", {
    defaultDuration: 500,
    calls: [
        [{
            opacity: [1, 0],
            scale: [1, 0.5],
            translateZ: 0
        }]
    ]
});

$.Velocity.RegisterUI("custom.superZoomOutIn", {
    defaultDuration: 500,
    calls: [
        [{
            opacity: [1, 0],
            scale: [1, 5],
            translateZ: 0,
            translateY: [0, 500]
        }]
    ],
});

$.Velocity.RegisterUI("custom.flickUpIn", {
    defaultDuration: 500,
    calls: [
        [{
            opacity: [1, 0],
            translateY: [0, 90],
            rotateZ: [0, 10],
            translateZ: 0
        }]
    ]
});

$.Velocity.RegisterUI("custom.flickDownIn", {
    defaultDuration: 500,
    calls: [
        [{
            opacity: [1, 0],
            translateY: [0, -90],
            rotateZ: [0, -10],
            translateZ: 0
        }]
    ]
});

$.Velocity.RegisterUI("custom.fadeOut", {
    defaultDuration: 300,
    calls: [
        [{
            opacity: 0,
            translateZ: 0
        }]
    ],
    reset: {
        translateY: 0,
        opacity: 0,
        rotateZ: 0,
        scale: 1,
        translateX: 0
    }
});

// Define some Velocity option VARs for re-use etc

// Default transitions
var
    anim1 = 'custom.slideLeftIn',
    anim2 = 'custom.slideRightIn';

function goVelocity(isOut, ani1, ani2, vOpt) {

if (!ani1) {
            ani1 = anim1, ani2 = anim2
        };
        if (!vOpt) {
            vOpt = vOption;
        };

// base VARs
        var box = boxes.find('.box');

// Slice boxes to different groups (for IN-transitions)
        var
            slice1 = 3, // 1-3
            slice2 = 6, // 4-6
            slice3 = 9; // 7-9

// setup Velocity sequence
        var
            seq1 = box.slice(0, slice1).get(), // .get() = transform jquery object to raw DOM nodes
            seq2 = box.slice(slice1, slice2).get(),
            seq3 = box.slice(slice2, slice3).get(),
            seq4 = box.slice(slice3).get(); // rest of elements after slice3

var velocitySequence;
        $.Velocity(box.get(), "stop"); // stop all animation if one is already running

// Begin a lot of if()

if (isOut == true) {
            velocitySequence = [{
                elements: box.get(),
                properties: 'custom.fadeOut',
                options: vOption
            }, {
                elements: seq1,
                properties: ani1,
                options: vOpt
            }, {
                elements: seq2,
                properties: ani2,
                options: vOpt
            }, {
                elements: seq3,
                properties: ani1,
                options: vOpt
            }, {
                elements: seq4,
                properties: ani2,
                options: vOpt
            }];

$.Velocity.RunSequence(velocitySequence);
        } else if (isOut == 'type5') {
            var b = box.get(); // convert to raw dom nodes
            var nth1 = box.filter(':nth-child(3n+1)').get();
            var nth2 = box.filter(':nth-child(3n)').get();
            var nth3 = box.filter(':nth-child(3n-1)').get();
            velocitySequence = [{
                elements: b,
                properties: 'custom.fadeOut',
                options: vOption
            }, {
                elements: nth1,
                properties: 'custom.slideDownIn',
                options: vOpt
            }, {
                elements: nth2,
                properties: 'custom.slideUpIn',
                options: vOption6
            }, {
                elements: nth3,
                properties: 'custom.zoomOutIn',
                options: vOption3
            }, ];

$.Velocity.RunSequence(velocitySequence);
        } else if (isOut == 'type6') {
            var b = box.get(); // convert to raw dom nodes
            var one = box.slice(0, 1)
            var two = box.slice(1, 3);
            var three = box.slice(3);
            velocitySequence = [{
                elements: b,
                properties: 'custom.fadeOut',
                options: vOption
            }, {
                elements: one,
                properties: 'custom.slideDownIn',
                options: vOpt
            }, {
                elements: two,
                properties: 'transition.slideUpIn',
                options: vOption6
            }, {
                elements: three,
                properties: 'transition.slideDownIn',
                options: vOption5
            }, ];

$.Velocity.RunSequence(velocitySequence);
        } else if (isOut == 'type7') {
            var b = box.get(); // convert to raw dom nodes
            //var s1 = box.eq(0);
            //var s2 = box.eq(4)
            var s0 = box.slice(0, 1);
            var s1 = box.slice(1, 2);
            var s2 = box.slice(2, 3);
            var s3 = box.filter(':nth-child(3n-1)');
            s3 = s3.slice(1); // skip first
            var s4 = box.filter(':nth-child(3n+1)');
            s4 = s4.slice(1); // skip first
            var s5 = box.filter(':nth-child(3n)');
            s5 = s5.slice(1); // skip first
            velocitySequence = [{
                elements: b,
                properties: 'custom.fadeOut',
                options: vOption
            }, {
                elements: s0,
                properties: 'custom.slideLeftIn',
                options: vOpt
            }, {
                elements: s1,
                properties: 'custom.slideDownIn',
                options: vOption6
            }, {
                elements: s2,
                properties: 'custom.slideRightIn',
                options: vOption6
            }, {
                elements: s3,
                properties: 'custom.slideUpIn',
                options: vOpt
            }, {
                elements: s4,
                properties: 'custom.slideLeftIn',
                options: vOpt
            }, {
                elements: s5,
                properties: 'custom.slideRightIn',
                options: vOption6
            }, ];

$.Velocity.RunSequence(velocitySequence);
        } else {
            // Page load animation
            box.css('opacity', 0);
            velocitySequence = [{
                elements: seq1,
                properties: ani1,
                options: vOpt
            }, {
                elements: seq2,
                properties: ani2,
                options: vOpt
            }, {
                elements: seq3,
                properties: ani1,
                options: vOpt
            }, {
                elements: seq4,
                properties: ani2,
                options: vOpt
            }];

$.Velocity.RunSequence(velocitySequence);
        }

} // end goVelocity()

编译

CSS

/* + Reset.css */
/* + Open Sans @ Google Fonts */
/* + FontAwesome.css */
/* defaults */

html,
body {
    min-height: 100%;
}
body {
    font-family: "Open Sans", helvetica, arial, sans-serif;
    font-size: 13px;
    line-height: 160%;
    font-weight: 300;
    color: #444;
    background: #eee;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
img {
    display: block;
}
i {
    font-style: normal;
}
em {
    font-style: italic;
}
#a {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    background: #eee;
    color: #aaa;
    -webkit-user-select: none;
    user-select: none;
}
#a i {
    cursor: pointer;
    font-size: 11px;
    padding: 8px 10px;
    border: 1px dotted #ccc;
    transition: all 0.12s;
    margin-left: -1px;
}
#a .fa {
    font-family: "Open Sans", sans-serif;
}
#a .fa:last-child {
    background: #d00;
    border-color: #d00;
    color: #fff;
}
#a .fa:last-child:hover {
    background: #a00;
    border-color: #a00;
}
#btn {
    text-align: center;
    margin-top: -30px;
}
#btn i {
    cursor: pointer;
    background: hotpink;
    color: #fff;
    padding: 0 14px;
    margin: 0 2px;
    line-height: 250%;
    display: inline-block;
    transition: all 0.2s ease;
    border-radius: 2px;
}
#btn i:hover {
    background: #333;
}
#boxes {
    padding-bottom: 1000px;
}
#boxes,
h1,
pre {
    width: 660px;
    margin: 40px auto;
    text-align: center;
    position: relative;
}
#boxes {
    width: auto;
    max-width: 850px;
    text-align: center;
}
h1,
h2 {
    font-size: 21px;
    line-height: 100%;
    font-weight: 300;
}
h1 {
    font-size: 24px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
}
h1 i {
    font-weight: 300;
}
pre {
    display: block;
    margin-top: -25px;
    text-transform: uppercase;
    color: #888;
    font-size: 11px;
    letter-spacing: 0.5px;
}
pre i {
    cursor: help;
    display: inline-block;
    margin: 0 0 0 3px;
}
pre i:hover {
    color: #222;
}
pre span {
    color: #aaa;
    display: block;
    letter-spacing: 0;
}
h1 {
    padding: 20px 0;
}
h2,
h3 {
    margin: 0 0 12px;
}
h3 {
    font-size: 12px;
    white-space: nowrap;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 4px;
}
.box {
    margin: 0 15px 30px;
}
.box img.full {
    margin: -1px 0 9px -1px;
}
.box a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
}
.box a:hover {
    border-color: hotpink;
    color: hotpink;
}
.box {
    height: 150px;
    _opacity: 0;
    display: block;
    text-align: left;
    border: 1px solid #ddd;
    border-bottom: 1px solid #ccc;
    background: #fff;
    width: 240px;
    height: auto;
    display: inline-block;
}
.boxRight {
    _padding: 15px 40px 0 0;
    padding: 0 20px;
    text-align: center;
}
.boxRight h3 {
    margin-bottom: 0;
}
.boxRight i {
    display: block;
    font-size: 11px;
    color: #888;
    font-style: normal;
    margin: 0 0 10px 0;
}
.boxRight i span {
    font-family: georgia, serif;
    font-style: italic;
    font-size: 11px;
    color: #aaa;
}

HTML

通过JSON API接口获取图片数据，响应式布局。

html5, gallery, template

编辑器支持Emmet

快捷键

通过JSON API接口获取图片数据，响应式布局。

html5, gallery, template

基于Velocity.js实现的幻灯片（页面垂直滚动轮播）动画

TweenMax.js+Physics2DPlugin.js 水珠气化发散（蒸发）的模拟动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：