132 lines
5.2 KiB
HTML
132 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="copyright" content="Copyright © 2013 Adobe Systems Incorporated. All rights reserved.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the “License”);
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an “AS IS” BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.">
|
|
<title>Snap</title>
|
|
<script src="../../dist/snap.svg-min.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script>
|
|
window.onload = function () {
|
|
|
|
var logo = Snap.select("#snap-logo"),
|
|
parts = [
|
|
["top", [0, 20]],
|
|
["left", [20, 0]],
|
|
["bottom", [0, -20]],
|
|
["right", [-20, 0]]
|
|
],
|
|
i = 0,
|
|
showTimer = null,
|
|
hideTimer = null;
|
|
|
|
for (i = 0; i < parts.length; i++) {
|
|
var el = parts[i],
|
|
element = logo.select("#" + el[0]);
|
|
element.attr({
|
|
opacity: 0,
|
|
transform: "t" + el[1]
|
|
});
|
|
parts[i].push(element);
|
|
}
|
|
|
|
i = 0;
|
|
|
|
function showEach() {
|
|
clearTimeout(hideTimer);
|
|
if (i >= parts.length) return;
|
|
parts[i][2].animate({
|
|
transform: "t0,0",
|
|
opacity: 1
|
|
}, 200, mina.easeout);
|
|
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"
|
|
});
|
|
showEach();
|
|
}, 100);
|
|
|
|
logo.hover(hideEach, showEach);
|
|
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
<svg version="1.1" id="snap-logo" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="250px" height="250px">
|
|
<defs>
|
|
<linearGradient id="bottom_1_" gradientUnits="userSpaceOnUse"
|
|
x1="196" y1="485.6281" x2="196" y2="732.5812"
|
|
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
|
|
<stop offset="0" stop-color="#002E3B"/>
|
|
<stop offset="1" stop-color="#002639"/>
|
|
</linearGradient>
|
|
<radialGradient id="right_2_" cx="146.3819" cy="449.8799"
|
|
r="408.7811" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
|
|
gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="#00BC85"/>
|
|
<stop offset="1" stop-color="#149D91"/>
|
|
</radialGradient>
|
|
<radialGradient id="left_1_" cx="139.0562" cy="454.2622"
|
|
r="507.5908" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
|
|
gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="#004473"/>
|
|
<stop offset="1" stop-color="#00345F"/>
|
|
</radialGradient>
|
|
<linearGradient id="top_1_" gradientUnits="userSpaceOnUse"
|
|
x1="195.922" y1="486.8864" x2="195.922" y2="732.5903"
|
|
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
|
|
<stop offset="0" stop-color="#002E3B"/>
|
|
<stop offset="1" stop-color="#002639"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<polygon id="bottom" fill="url(#bottom_1_)" stroke="url(#bottom_1_)"
|
|
points="124.913,210.751 89.063,193.264 89.103,193.245 89.093,193.24
|
|
51,211.82 124.941,247.884 199,211.9 160.771,192.962 "/>
|
|
<polygon id="right" fill="url(#right_2_)" stroke="url(#right_2_)"
|
|
points="198.996,138.632 198.996,38.123 165.596,58.995 165.596,117.758
|
|
165.596,117.758 165.596,117.758 51.091,174.781 51.091,211.945 "/>
|
|
<polygon id="left" fill="url(#left_1_)" stroke="url(#left_1_)"
|
|
points="199,211.912 199,211.912 199,174.746 84.498,117.723 84.498,58.96
|
|
51.096,38.088 51.096,138.597 "/>
|
|
<polygon id="top" fill="url(#top_1_)" stroke="url(#top_1_)"
|
|
points="84.396,58.904 84.396,58.892 124.939,39.118 165.485,58.892
|
|
198.844,38.046 124.912,1.985 51,38.035 51,38.067 84.368,58.918 "/>
|
|
</svg>
|
|
|
|
|
|
</body>
|
|
</html> |