velocity官方的一个示例动画效果代码
代码语言：html
所属分类：动画
代码描述：velocity官方的一个示例动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
background: #383838;
font-family: 'Open sans',sans-serif;
}
.lego {
border-width: 3px;
border-style: solid;
border-color: #ffc37b;
color: #ffc37b;
width: 79px;
height: 79px;
display: block;
border-radius: 50%;
position: absolute;
margin-left: -39.5px;
margin-top: -39.5px;
bottom: 45px;
right: 30px;
opacity: 0;
}
.lego__text {
bottom: -25px;
width: 100%;
text-align: center;
margin-left: -13px;
font-size: 12px;
}
.lego__text--header {
top: -25px;
font-size: 10px;
margin-left: 0;
}
.restart {
top: 50%;
left: 50%;
border-radius: 50%;
width: 32px;
height: 32px;
margin-left: -16px;
margin-top: 128px;
background: url(//repo.bfw.wiki/bfwrepo/icon/5e7a050749c06.png) no-repeat center 42.5%;
background-size: 50% auto;
opacity: 0;
border-width: 2px;
border-style: solid;
border-color: #fff;
}
.restart:hover {
cursor: pointer;
border-color: #ccc;
}
.my-logo {
top: 50%;
left: 50%;
z-index: 20;
display: inline-block;
color: #fcf7c0;
text-align: center;
}
.my-logo__header {
width: 108px;
font-size: 14px;
}
.my-logo__img {
margin-top: 25px;
border-width: 4px;
border-style: solid;
border-color: #ff6664;
width: 108px;
height: 108px;
border-radius: 50%;
background: #fcf7c0 url(//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90);
}
.my-logo__text {
color: #fcf7c0;
bottom: -160px;
left: -4px;
font-size: 14px;
}
.line {
width: 2px;
height: 0;
top: 50%;
left: 50%;
margin-left: -1px;
background: #00ffc6;
transform-origin: center bottom;
}
.bubble {
width: 24px;
height: 24px;
border-width: 12px;
border-style: solid;
border-color: #00ffc6;
border-radius: 50%;
top: 50%;
left: 50%;
opacity: 0;
}
.bubbles {
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-top: -100px;
margin-left: -10px;
}
.easy {
top: 50%;
left: 50%;
line-height: 240px;
background: #00ffc6;
border-radius: 50%;
text-align: center;
transform: translate(-50%,-50%);
font-size: 60px;
color: #383838;
text-transform: uppercase;
z-index: 11;
width: 0;
height: 0;
overflow: hidden;
}
.easy__wrapper {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.easy__text {
width: 100%;
height: 100%;
}
.easy__line {
width: 100%;
height: 100%;
border-radius: 50%;
border-width: 4px;
border-style: solid;
border-color: #383838;
z-index: 0;
transform: translate(-50%);
}
.drop {
width: 4px;
height: 4px;
top: 50%;
left: 50%;
opacity: 0;
}
.spark {
background: #00ffc6;
opacity: 0;
border-radius: 50%;
}
.thunder-bg {
background: #00ffc6;
opacity: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
.arrow {
width: 2px;
height: 200px;
transform-origin: center bottom;
background: #00ffc6;
top: -100%;
left: 100%;
margin-top: -175px;
}
.arrow--center {
margin-left: -28px;
margin-top: -120px;
}
.arrow--wrap {
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-top: 0;
background: 0 0;
}
.car {
height: 10px;
width: 40%;
opacity: 0;
}
.car--1 {
right: 100%;
top: 40%;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.car--2 {
left: 100%;
top: 60%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.text {
font-family: 'Open Sans';
font-size: 60px;
text-transform: uppercase;
font-weight: 100;
text-align: center;
letter-spacing: 10px;
}
.text--fast {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.text--robust {
top: 50%;
left: 50%;
margin-left: -200px;
z-index: 8;
overflow: hidden;
transform-origin: left bottom;
}
.text--robust__shade {
background: #383838;
top: 0;
width: 100%;
height: 100%;
}
.text--robust__shade--1 {
transform: skew(-20deg) translateX(-4px);
left: -90px;
}
.text--robust__shade--2 {
width: 90px;
right: 0;
}
.text__bit {
top: 50%;
left: 50%;
}
.text__bit--1 {
margin-left: -90px;
}
.text__bit--2 {
margin-left: -45px;
}
.text__bit--3 {
margin-left: 0;
}
.text__bit--4 {
margin-left: 45px;
}
.text__bit__inner {
display: inline-block;
position: static;
transform-origin: center bottom;
}
.text__bit span {
display: inline-block;
margin-top: -30px;
}
.c-green-g {
background: #00ffc6;
}
.c-green-c-g {
color: #00ffc6;
}
.c-grey-g {
background: #383838;
}
.c-red-g {
background: #ff1493;
}
.circle {
border-radius: 50%;
}
.center {
top: 50%;
left: 50%;
}
.a-g {
position: absolute;
}
div {
position: absolute;
z-index: 10;
font-family: 'Open sans',sans-serif;
}
.screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.screen--robust {
z-index: 1;
}
.screen--easy {
z-index: 12;
}
.screen--logos {
z-index: 20;
}
.inherit-bg {
background: inherit;
}
.velocity {
position: absolute;
top: 50%;
left: 50%;
color: #00ffc6;
font-size: 70px;
text-transform: uppercase;
font-weight: 100;
margin-left: 1320px;
min-width: 400px;
margin-top: -40px;
transform: translateX(-160px);
}
.velocity span {
display: inline-block;
}
</style>
</head>
<body translate="no">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<div id="js-car1" class="car car--1 c-green-g"></div>
<div id="js-car2" class="car car--2 c-green-g"></div>
<div id="js-fast" class="c-green-c-g text text--fast">
<div class="text__bit text__bit--1">
<div id="js-bit-inner" class="text__bit__inner">
<span id="js-span">f</span>
</div>
</div>
<div class="text__bit text__bit--2">
<div id="js-bit-inner" class="text__bit__inner">
<span id="js-span">a</span>
</div>
</div>
<div class="text__bit text__bit--3">
<div id="js-bit-inner" class="text__bit__inner">
<span id="js-span">s</span>
</div>
</div>
<div class="text__bit text__bit--4">
<div id="js-bit-inner" class="text__bit__inner">
<span id="js-span">t</span>
</div>
</div>
</div>
<div id="js-arrow1" class="arrow"></div>
<div id="js-arrow2" class="arrow"></div>
<div id="js-arrow3" class="arrow"></div>
<div id="js-arrow-wrap" class="arrow arrow--wrap">
<div id="js-arrow4" class="arrow arrow--center"></div>
</div>
<div id="js-robust-screen2" class="screen screen--robust">
<div id="js-robust-screen" class="screen screen--robust">
<div id="js-robust" class="text text--robust c-green-c-g">
robust
<div id="js-robust-shade1" class="text--robust__shade text--robust__shade--1"></div>
<div id="js-robust-shade2" class="text--robust__shade text--robust__shade--2"></div>
</div>
</div>
</div>
<div id="js-thunder-bg" class="thunder-bg"></div>
<div id="js-easy-screen" class="screen screen--easy">
<div id="js-easy" class="text easy">
<div id="js-easy-wrapper" class="easy__wrapper">
<div id="js-easy-text" class="easy__text">
easy
</div>
</div>
</div>
</div>
<div id="js-screen1" class="screen">
<div id="js-line" class="line"></div>
</div>
<div id="js-screen2" class="screen"></div>
<div id="js-velocity" class="velocity">
<span>v</span><span>e</span><span>l</span><span>o</span><span>c</span><span>i</span><span>t</span><span>y</span><span>.</span><span>j</span><span>s</span>
</div>
<div id="js-logos-screen" class="screen screen--logos">
<a id="js-github" class="github">
<div class="github__text">
VelocityJS on GitHub
</div>
</a>
<div id="js-restart" class="restart"></div>
<a id="js-lego" class="lego">
<div class="lego__text lego__text--header">
Demo by:
</div>
<div class="lego__text lego__text">
@legomushroom
</div>
</a>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
(function () {
var Helpers;
Helpers = function () {
function Helpers() {}
Helpers.prototype.createDiv = function (o) {
var $cont, $el;
if (o == null) {
o = {};
}
$el = $('<div />');
o["class"] != null && $el.addClass(o["class"]);
$cont = (o != null ? o.container: void 0) || $(document.body);
$cont.append($el);
return $el;
};
Helpers.prototype.cloneBits = function ($proto, cnt, $container) {
var $cont,
$new,
circles,
i,
_i;
if (cnt == null) {
cnt = 20;
}
circles = [];
for (i = _i = 0; 0 <= cnt ? _i < cnt: _i > cnt; i = 0 <= cnt ? ++_i: --_i) {
$new = $proto.clone();
$cont = $container || $(document.body);
$cont.append($new);
circles.push($new);
}
return circles;
};
Helpers.prototype.rand = function (min, max) {
return Math.floor(Math.random() * (max + 1 - min) + min);
};
return Helpers;
}();
window.helpers = new Helpers();
$.easing.quake = function (t) {
var b;
b = Math.exp(-t * 10) * Math.cos(Math.PI * 2 * t * 10);
if (t >= 1) {
return 1;
}
return 1 - b;
};
$.easing.elasticOut = function (t) {
var a,
p,
s;
s = void 0;
a = 0.1;
p = 0.4;
if (t === 0) {
return 0;
}
if (t === 1) {
return 1;
}
if (!a || a < 1) {
a = 1;
s = p / 4;
} else {
s = p * Math.asin(1 / a) / (2 * Math.PI);
}
return a * Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1;
};
}).call(this);
(function () {
var Spark;
Spark = function () {
function Spark(o) {
this.o = o != null ? o: {};
this.vars();
this.init();
}
Spark.prototype.vars = function () {};
Spark.prototype.init = function () {
var $proto,
$spark,
i,
size,
_i,
_len,
_ref,
_results;
$proto = helpers.createDiv({
"class": 'spark'
});
this.sparks = helpers.cloneBits($proto, this.o.cnt || helpers.rand(10, 20));
size = this.o.size || 2;
_ref = this.sparks;
_results = [];
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
$spark = _ref[i];
_results.push($spark.css({
width: size + helpers.rand(0, size),
height: size + helpers.rand(0, size),
left: this.o.left || '50%',
top: "" + (this.o.top || 50) + "%",
marginTop: this.o.shiftY,
marginLeft: this.o.shiftX
}));
}
return _results;
};
Spark.prototype.run = function () {
var $spark,
blowSize,
i,
top,
_i,
_len,
_ref,
_results;
_ref = this.sparks;
_results = [];
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
$spark = _ref[i];
blowSize = this.o.blowSize || 100;
top = 2 * this.o.top || 100;
if (top < 100) {
top = 100;
}
_results.push($spark.velocity({
translateX: helpers.rand(-blowSize, blowSize),
translateY: helpers.rand(-blowSize, blowSize),
opacity: 1
},
{
duration: 500 + blowSize,
easing: 'easeInOutQuad',
delay: (this.o.delay || 0) + helpers.rand(0, 100)
}).
velocity({
top: "" + top + "%",
translateY: 0,
marginTop: 0,
opacity: -2
},
{
duration: this.o.duration || 2500,
easing: 'easeInOutExp'
}));
}
return _results;
};
return Spark;
}();
window.Spark = Spark;
}).call(this);
(function () {
var Bubbles;
Bubbles = function () {
function Bubbles(o) {
this.o = o != null ? o: {};
this.vars();
this.init();
}
Bubbles.prototype.vars = function () {
this.$el = helpers.createDiv({
"class": "bubbles"
});
return this.$proto = $('<div class="bubble" />');
};
Bubbles.prototype.init = function () {
var $bit,
i,
size,
_i,
_len,
_ref,
_results;
this.bits = helpers.cloneBits(this.$proto, 30, this.$el);
_ref = this.bits;
_results = [];
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
$bit = _ref[i];
size = helpers.rand(12, 24);
_results.push($bit.css({
width: size,
height: size,
borderWidth: size / 2
}));
}
return _results;
};
Bubbles.prototype.run = function (delay) {
var $bit,
i,
_i,
_len,
_ref;
_ref = this.bits;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
$bit = _ref[i];
$bit.velocity({
top: '-10%',
borderWidth: 0,
translateX: helpers.rand(-120, 120),
translateY: helpers.rand(0, 300),
opacity: 100
},
{
duration: 1400,
delay: helpers.rand(i * 25, i * 25 + 1000) + delay
});
}
return this.$el.velocity({
marginTop: 0
},
{
duration: 1000,
delay: delay
});
};
return Bubbles;
}();
window.Bubbles = Bubbles;
}).call(this);
(function () {
var Drop;
Drop = function () {
function Drop(o) {
this.o = o != null ? o: {};
this.vars();
this.init();
}
Drop.prototype.vars = function () {
return this.$proto = $('<div class="circle c-green-g drop" />');
};
Drop.prototype.init = function () {
this.radius = this.o.radius;
if (this.radius == null) {
this.radius = 200;
}
this.cnt = this.radius / 10;
return this.$els = helpers.cloneBits(this.$proto, this.cnt, this.o.$container);
};
Drop.prototype.run = function () {
var $el,
angle,
centerX,
centerY,
coef,
delay,
delayStep,
i,
left,
left2,
step,
stepCalc,
top,
top2,
_i,
_j,
_k,
_len,
_ref,
_results;
step = 2 * Math.PI / this.cnt;
angle = 0;
centerX = 0;
centerY = 0;
_ref = this.$els;
_results = [];
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
$el = _ref[i];
left = parseInt(centerX + Math.cos(angle) * (this.radius / 1.25), 10);
top = parseInt(centerY + Math.sin(angle) * (this.radius / 1.25), 10);
$el.css({
marginLeft: left,
marginTop: top
});
left2 = parseInt(centerY + Math.cos(angle) * (1.1 * this.radius), 10);
top2 = parseInt(centerY + Math.sin(angle) * (1.1 * this.radius), 10);
left2 -= left;
top2 -= top;
$el.velocity({
translateX: left2,
translateY: top2,
opacity: 1
},
{
delay: this.o.i * 15,
easing: 'easeOutElastic',
duration: 1500
});
coef = 1;
if (left >= 0) {
delayStep = 100 * coef;
stepCalc = 50;
for (i = _j = 0; _j <= 1200; i = _j += stepCalc) {
if (top >= i && top <= i + stepCalc) {
delay = i / stepCalc * delayStep;
}
}
delayStep = 20 * coef;
for (i = _k = 0; _k <= 1200; i = _k += stepCalc) {
if (top <= -i && top >= -i - stepCalc) {
delay = i / stepCalc * delayStep;
}
}
if (delay == null) {
delay = 100 * coef;
}
$el.velocity({
translateX: -helpers.rand(20, 400),
translateY: helpers.rand(-600, 600),
left: 0
},
{
delay: (10 - this.o.i) * 50 * coef + delay + helpers.rand(0, delayStep) + 3350,
duration: 1000 * coef
});
}
_results.push(angle += step);
}
return _results;
};
return Drop;
}();
window.Drop = Drop;
}).call(this);
(function () {
var Cloud,
CloudBit;
Cloud = function () {
function Cloud(o) {
var timeout;
this.o = o != null ? o: {};
this.vars();
this.init();
timeout = setTimeout(function (_this) {
return function () {
clearTimeout(timeout);
return _this.hide();
};
}(this), this.o.hideDelay);
}
Cloud.prototype.vars = function () {
this.$el = helpers.createDiv({
"class": 'center c-green-g'
});
return window.$cloud = this.$el;
};
Cloud.prototype.init = function () {
var className;
className = 'inherit-bg circle center';
this.bits = [];
this.bits.push(new CloudBit({
width: 90,
height: 120,
deg: 5,
"class": className,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 80,
height: 90,
deg: 45,
"class": className,
shiftY: 40,
shiftX: -5,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 80,
height: 100,
deg: -35,
"class": className,
shiftY: 20,
shiftX: -90,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 60,
height: 60,
deg: 0,
"class": className,
shiftY: 30,
shiftX: -40,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 70,
height: 70,
deg: 10,
"class": className,
shiftX: 55,
shiftY: 40,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 60,
height: 30,
deg: 0,
"class": className,
shiftX: 75,
shiftY: 60,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 70,
height: 30,
deg: 0,
"class": className,
shiftX: -100,
shiftY: 60,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 80,
height: 50,
deg: 0,
"class": className,
shiftX: -60,
shiftY: 55,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 40,
height: 30,
deg: 0,
"class": className,
shiftX: 25,
shiftY: 55,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 10,
height: 10,
deg: 0,
"class": className,
shiftX: 103,
shiftY: 65,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 5,
height: 5,
deg: 0,
"class": className,
shiftX: 110,
shiftY: 66,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
this.bits.push(new CloudBit({
width: 10,
height: 10,
deg: 0,
"class": className,
shiftX: -128,
shiftY: 65,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
return this.bits.push(new CloudBit({
width: 8,
height: 5,
deg: 0,
"class": className,
shiftX: -135,
shiftY: 65,
container: this.$el,
delay: this.o.delay,
hideDelay: this.o.hideDelay
}));
};
Cloud.prototype.hide = function () {
var bit,
i,
_i,
_len,
_ref,
_results;
_ref = this.bits;
_results = [];
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
bit = _ref[i];
_results.push(bit.hide());
}
return _results;
};
return Cloud;
}();
CloudBit = function () {
function CloudBit(o) {
this.o = o != null ? o: {};
this.vars();
this.$el = helpers.createDiv({
"class": this.o["class"],
container: this.o.container
});
this.setAttrs();
this.loop();
this.show();
}
CloudBit.prototype.vars = function () {
this.scale = 0;
return this.opacity = 0;
};
CloudBit.prototype.setAttrs = function () {
var _base,
_base1;
return this.$el.css({
width: this.o.width,
height: this.o.height,
marginLeft: -this.o.width / 2 + ((_base = this.o).shiftX != null ? _base.shiftX: _base.shiftX = 0),
marginTop: -this.o.height / 2 + ((_base1 = this.o).shiftY != null ? _base1.shiftY: _base1.shiftY = 0),
'opacity': 0
}).
velocity({
scale: 0
},
{
duration: 0
});
};
CloudBit.prototype.show = function () {
return this.$el.velocity({
opacity: 100,
scale: 1
},
{
easing: 'easeOutElastic',
delay: this.o.delay + helpers.rand(0, 100),
duration: 1200
});
};
CloudBit.prototype.loop = function () {
return this.$el.velocity({
scaleX: .9,
scaleY: 1,
translateX: this.o.width / 20,
translateY: 0,
rotateZ: this.o.deg
},
{
duration: 500
}).
velocity({
scaleY: .9,
scaleX: 1,
translateX: 0,
translateY: this.o.height / 20,
rotateZ: this.o.deg,
complete: function (_this) {
return function () {
return !_this.disallowAnimation && _this.loop();
};
}(this)
},
{
duration: 500
});
};
CloudBit.prototype.destroy = function () {
return this.disallowAnimation = true;
};
CloudBit.prototype.hide = function () {
this.destroy();
return this.$el.velocity({
scale: 0,
translateX: -500
},
{
duration: 750
});
};
return CloudBit;
}();
window.Cloud = Cloud;
}).call(this);
(function () {
var Thunder;
Thunder = function () {
function Thunder(o) {
this.o = o != null ? o: {};
this.vars();
this.init();
}
Thunder.prototype.vars = function () {
this.$background = $('#js-thunder-bg');
this.$robust = $('#js-robust');
this.$robustScreen = $('#js-robust-screen');
this.$robustScreen2 = $('#js-robust-screen2');
return this.boomCnt = 0;
};
Thunder.prototype.init = function () {
this.spark1 = new Spark({
shiftY: -140,
shiftX: -120,
top: 100,
blowSize: 50
});
this.spark2 = new Spark({
shiftY: -80,
shiftX: -210,
top: 100,
blowSize: 50
});
this.spark3 = new Spark({
shiftY: -100,
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0