zcy
/
snap.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made snap logo demo interactive

master
Yohei Shimomae 2013-10-17 16:15:22 -07:00
parent a1906ac8e5
commit 04a4f10f96
1 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
demos/snap-mascot/snap-logo.html
View File

@ -22,42 +22,60 @@
window.onload = function () {
var logo = Snap.select("#snap-logo"),
elements = [
parts = [
["top", [0, 20]],
["left", [20, 0]],
["bottom", [0, -20]],
["right", [-20, 0]]
],
i;
i = 0,
showTimer = null,
hideTimer = null;
for (i = 0; i < elements.length; i++) {
var el = elements[i],
for (i = 0; i < parts.length; i++) {
var el = parts[i],
element = logo.select("#" + el[0]);
element.attr({
opacity: 0,
transform: "t" + el[1]
});
elements[i] = element;
parts[i].push(element);
}
i = 0;
function animateEach() {
if (!elements[i]) return;
elements[i].animate({
function showEach() {
clearTimeout(hideTimer);
if (i >= parts.length) return;
parts[i][2].animate({
transform: "t0,0",
opacity: 1
}, 200, mina.easeout);
setTimeout(animateEach, 200);
showTimer = setTimeout(showEach, 200);
i++;
if (i >= parts.length) i = parts.length-1;
}
function hideEach() {
clearTimeout(showTimer);
if (i < 0) return;
parts[i][2].animate({
transform: "t" + parts[i][1],
opacity: 0
}, 200, mina.easeout);
hideTimer = setTimeout(hideEach, 200);
i--;
if (i < 0) i = 0;
}
setTimeout(function () {
logo.attr({
display: "inline"
});
animateEach();
}, 500);
showEach();
}, 100);
logo.hover(hideEach, showEach);
};
</script>