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

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

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