HTML5+jQuery制作温馨浪漫爱心表白动画特效

var x = 19.5 * (16 * Math.pow(Math.sin(t), 3)); var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); return new Array(offsetX + x, offsetY + y); }

function startHeartAnimation() { var interval = 50; var angle = 10; var heart = new Array(); var animationTimer = setInterval(function () { var bloom = getHeartPoint(angle); var draw = true; for (var i = 0; i < heart.length; i++) { var p = heart[i]; var distance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2)); if (distance < Garden.options.bloomRadius.max * 1.3) { draw = false; break; } } if (draw) { heart.push(bloom); garden.createRandomBloom(bloom[0], bloom[1]); } if (angle >= 30) { clearInterval(animationTimer); showMessages(); } else { angle += 0.2; } }, interval); }

(function($) { $.fn.typewriter = function() { this.each(function() { var $ele = $(this), str = $ele.html(), progress = 0; $ele.html(''); var timer = setInterval(function() { var current = str.substr(progress, 1); if (current == '<') { progress = str.indexOf('>', progress) + 1; } else {

progress++; } $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : '')); if (progress >= str.length) { clearInterval(timer); } }, 75); }); return this; }; })(jQuery);

function timeElapse(date){ var current = Date(); var seconds = (Date.parse(current) - Date.parse(date)) / 1000; var days = Math.floor(seconds / (3600 * 24)); seconds = seconds % (3600 * 24); var hours = Math.floor(seconds / 3600); if (hours < 10) { hours = \ } seconds = seconds % 3600; var minutes = Math.floor(seconds / 60); if (minutes < 10) { minutes = \ } seconds = seconds % 60; if (seconds < 10) { seconds = \ } var result = \\seconds + \ $(\}

function showMessages() { adjustWordsPosition(); $('#messages').fadeIn(5000, function() { showLoveU(); }); }

function adjustWordsPosition() {

$('#words').css(\ $('#words').css(\ $('#words').css(\}

function adjustCodePosition() { $('#code').css(\}

function showLoveU() { $('#loveu').fadeIn(3000); }

Garden.js

function Vector(x, y) { this.x = x; this.y = y; };

Vector.prototype = {

rotate: function (theta) { var x = this.x; var y = this.y;

this.x = Math.cos(theta) * x - Math.sin(theta) * y; this.y = Math.sin(theta) * x + Math.cos(theta) * y; return this; },

mult: function (f) { this.x *= f; this.y *= f; return this; },

clone: function () {

return new Vector(this.x, this.y); },

length: function () {

return Math.sqrt(this.x * this.x + this.y * this.y); },

subtract: function (v) { this.x -= v.x; this.y -= v.y; return this; },

set: function (x, y) { this.x = x; this.y = y; return this; } };

function Petal(stretchA, stretchB, startAngle, angle, growFactor, bloom) { this.stretchA = stretchA; this.stretchB = stretchB; this.startAngle = startAngle;