使用jQuery.velocity.js实现基于DOM的随机泡沫运动动画

本例未使用Canvas和WebGL，使用了velocity和css3来实现多粒子运动，主要目的在于演示velocity的全部用法以及性能测试。

velocity, bubble, tutorial

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*****************
    	 Summary
    *****************/

/* Watch the codecast to learn how this demo was made: https://www.youtube.com/watch?v=MDLiVB6g2NY&hd=1 */

/* This demo serves two purposes:
    	1) Act as Velocity's primary visual test (in addition to the unit and load tests).
		2) Demonstrate all of Velocity's features.
		3) Demonstrate the performance capabilties of the DOM; WebGL and Canvas are not used in this demo.
	*/

/* Intended demo behavior: 
		1) A message box fades out.
		2) Dots are randomly assigned coordinates and opacities then translated and increased in opacity. This animation is then reversed.
		3) Meanwhile, the dots' container has its perspective, rotateZ, and opacity animated in a loop with a delay.
		4) Once the dot animation is complete, the message box fades back in.
	*/

/*********************
      Device Detection
   *********************/

var isWebkit = /Webkit/i.test(navigator.userAgent),
    isChrome = /Chrome/i.test(navigator.userAgent),
    isMobile = !!("ontouchstart" in window),
    isAndroid = /Android/i.test(navigator.userAgent),
    isIE = document.documentMode;

/******************
   	Redirection
   ******************/

if (isMobile && isAndroid && !isChrome) {
    alert("Although Velocity.js works on all mobile browsers, this 3D demo is for iOS devices or Android devices running Chrome only. Redirecting you to Velocity's documentation.");
    window.location = "index.html";
}

/***************
   	Helpers
   ***************/

/* Randomly generate an integer between two numbers. */
function r(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

/* Override the default easing type with something a bit more jazzy. */
$.Velocity.defaults.easing = "easeInOutsine";

/*******************
       Dot Creation
   *******************/

/* Differentiate dot counts based on roughly-guestimated device and browser capabilities. */
var dotsCount,
    dotsHtml = "",
    $count = $("#count"),
    $dots;

if (window.location.hash) {
    dotsCount = window.location.hash.slice(1);
} else {
    dotsCount = isMobile ? (isAndroid ? 40 : 60) : (isChrome ? 175 : 125);
}

for (var i = 0; i < dotsCount; i++) {
    dotsHtml += "<div class='dot'></div>";
}

$dots = $(dotsHtml);

$count.html(dotsCount);

/*************
       Setup
   *************/

var $container = $("#container"),
    $browserWidthNotice = $("#browserWidthNotice")

var screenWidth = window.innerWidth,
    screenHeight = window.innerHeight,
    chromeHeight = screenHeight - (document.documentElement.clientHeight || screenHeight);

var translateZMin = -725,
    translateZMax = 600;

var containerAnimationMap = {
    perspective: [350, 95],
    opacity: [0.90, 0.75]
};

/* IE10+ produce odd glitching issues when you rotateZ on a parent element subjected to 3D transforms. */
if (!isIE) {
    containerAnimationMap.rotateZ = [5, 0];
}

/* Ensure the user is full-screened; this demo's translations are relative to screen width, not window width. */
if ((document.documentElement.clientWidth / screenWidth) < 0.80) {
    $browserWidthNotice.show();
}

/*****************
       Animation
   *****************/

/* Animate the dots' container. */
$container
    .css("perspective-origin", screenWidth / 2 + "px " + ((screenHeight * 0.45) - chromeHeight) + "px")
    .velocity(containerAnimationMap, {
        duration: 800,
        loop: true,
        delay: 3250
    });

/* Special visual enhancement for WebKit browsers, which are faster at box-shadow manipulation. */
if (isWebkit) {
    $dots.css("boxShadow", "0px 0px 4px 0px #AAE1F7");
}

/* Animate the dots. */
$dots
    .velocity({
        translateX: [
            function() {
                return "+=" + r(-screenWidth / 2.5, screenWidth / 2.5)
            },
            function() {
                return r(0, screenWidth)
            }
        ],
        translateY: [
            function() {
                return "+=" + r(-screenHeight / 2.75, screenHeight / 2.75)
            },
            function() {
                return r(0, screenHeight)
            }
        ],
        translateZ: [
            function() {
                return "+=" + r(translateZMin, translateZMax)
            },
            function() {
                return r(translateZMin, translateZMax)
            }
        ],
        opacity: [
            function() {
                return Math.random()
            },
            function() {
                return Math.random() + 0.1
            }
        ]
    }, {
        duration: 6000,
        loop: true
    })
    .velocity("reverse", {
        easing: "easeOutQuad"
    })
    .appendTo($container);

编译

CSS

HTML

本例未使用Canvas和WebGL，使用了velocity和css3来实现多粒子运动，主要目的在于演示velocity的全部用法以及性能测试。

velocity, bubble, tutorial

编辑器支持Emmet

快捷键

本例未使用Canvas和WebGL，使用了velocity和css3来实现多粒子运动，主要目的在于演示velocity的全部用法以及性能测试。

velocity, bubble, tutorial

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

使用SVG和Canvas实现的水泡分裂动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：