我正在寻找创建一个网站，我在网站上寻找灵感，并在www.orangina.eu的页面底部找到了网格，我非常喜欢它。我一直在寻找教程，但还没找到。有人可以尝试向我解释这个网格是如何工作的（将鼠标悬停在一个网格上，所有其他“区块”随之移动）。
我一直在他们的.js文件中窥探，看看我是否能找到与此相关的任何东西，我认为我与这个相对接近（？）尽管我还不完全理解它，我认为是。
drawBlocks: function (t) {
function e(t) {
l.clearRect(0, 0, a.width, a.height), 1008 >= m ? (s = !0, "canvas-products" == o && (u = ["#eb4155", "#ffe118", "#ffea5c", "rgba(5,29,81,.4)", "rgba(5,29,81,.4)", "4bbfe7", "#e23a19", "rgba(5,29,81,.4)"]), "canvas-home" == o && (u = ["rgba(5,29,81,.4)", "rgba(5,29,81,.4)", "#ffffff", "#1a4e8b", "#ffa300", "#ffffff", "rgba(5,29,81,.4)", "#ffa300"])) : (s = !1, "canvas-products" == o && (u = ["#ffe118", "#eb4155", "rgba(5,29,81,.4)", "#ffea5c", "rgba(5,29,81,.4)", "4bbfe7", "#e23a19", "rgba(5,29,81,.4)"]), "canvas-home" == o && (u = ["rgba(5,29,81,.4)", "rgba(5,29,81,.4)", "#1a4e8b", "#ffffff", "#ffa300", "#ffffff", "rgba(5,29,81,.4)", "#ffa300"])), d = [{
x: 0,
y: c
}, {
x: .25 * a.width + c,
y: 0
}, {
x: .5 * a.width,
y: v
}, {
x: .75 * a.width,
y: 0
}, {
x: a.width,
y: 0
}, {
x: 0,
y: .5 * a.height
}, {
x: .25 * a.width,
y: .5 * a.height + c
}, {
x: .5 * a.width + v,
y: .5 * a.height
}, {
x: .75 * a.width,
y: .5 * a.height - v
}, {
x: a.width,
y: .5 * a.height
}, {
x: 0,
y: a.height
}, {
x: .25 * a.width + c,
y: a.height - c
}, {
x: .5 * a.width,
y: a.height - 2 * c
}, {
x: .75 * a.width - c,
y: a.height
}, {
x: a.width,
y: a.height
}], s && (d = [{
x: 0,
y: c
}, {
x: .5 * a.width + c,
y: 0
}, {
x: a.width,
y: v
}, {
x: 0,
y: .25 * a.height
}, {
x: .5 * a.width,
y: .25 * a.height
}, {
x: a.width,
y: .25 * a.height
}, {
x: 0,
y: .5 * a.height + c
}, {
x: .5 * a.width + v,
y: .5 * a.height
}, {
x: a.width,
y: .5 * a.height - v
}, {
x: 0,
y: .75 * a.height
}, {
x: .5 * a.width,
y: .75 * a.height
}, {
x: a.width + c,
y: .75 * (a.height - c)
}, {
x: 0,
y: a.height - c / 2
}, {
x: .5 * a.width - c,
y: a.height
}, {
x: a.width,
y: a.height
}]);
for (var e = 0; e < d.length; e++) p[e] = {
x: d[e].x,
y: d[e].y
};
if (void 0 != t && !s) {
var n = t;
t > u.length / 2 - 1 && n++;
var i = f[t].value * h;
if (p[n].x = p[n].x - i, p[n].y = p[n].y - i, p[n + 1].x = p[n + 1].x + i, p[n + 1].y = p[n + 1].y - i, p[n + 6].x = p[n + 6].x + i, p[n + 6].y = p[n + 6].y + i, p[n + 5].x = p[n + 5].x - i, p[n + 5].y = p[n + 5].y + i, null != g) {
var r = g;
g > u.length / 2 - 1 && r++;
var y = (1 - f[t].value) * h;
p[r].x = p[r].x - y, p[r].y = p[r].y - y, p[r + 1].x = p[r + 1].x + y, p[r + 1].y = p[r + 1].y - y, p[r + 6].x = p[r + 6].x + y, p[r + 6].y = p[r + 6].y + y, p[r + 5].x = p[r + 5].x - y, p[r + 5].y = p[r + 5].y + y
}
"canvas-home" == o && (p[2] = d[2], p[3] = d[3], p[7] = d[7], p[8] = d[8])
}
l.save(), l.scale((a.width - 40) / a.width, (a.height - 40) / a.height), l.translate(20, 20);
for (var e = 0; e < u.length; e++) {
var b = e;
if (e > u.length / 2 - 1 && !s && b++, s && (e > 1 && b++, e > 3 && b++, e > 5 && b++), "canvas-home" == o && 0 == e) {
if (s) var w = l.createLinearGradient(0, 0, .5 * a.width, 0);
else var w = l.createLinearGradient(0, 0, .25 * a.width, 0);
w.addColorStop(0, "#09255c"), w.addColorStop(1, "#123c79"), l.fillStyle = w
} else if ("canvas-home" == o && 1 == e) {
if (s) var w = l.createLinearGradient(.5 * a.width, 0, a.width, 0);
else var w = l.createLinearGradient(.25 * a.width, 0, .5 * a.width, 0);
w.addColorStop(0, "#123c79"), w.addColorStop(1, "#1a4e8b"), l.fillStyle = w
} else l.fillStyle = u[e];
l.beginPath(), s ? (l.moveTo(p[b].x, p[b].y), l.lineTo(p[b + 1].x, p[b + 1].y), l.lineTo(p[b + 4].x, p[b + 4].y), l.lineTo(p[b + 3].x, p[b + 3].y)) : (l.moveTo(p[b].x, p[b].y), l.lineTo(p[b + 1].x, p[b + 1].y), l.lineTo(p[b + 6].x, p[b + 6].y), l.lineTo(p[b + 5].x, p[b + 5].y)), l.closePath(), l.fill()
}
l.restore()
}
function i() {
var t = r.width() + 40,
e = r.height() + 40;
a.width = t, a.height = e, m = t, 2 == window.devicePixelRatio && (a.width = 2 * t, a.height = 2 * e, a.style.width = t - 20 + "px", a.style.height = e - 20 + "px", a.style.top = "10px", a.style.left = "-10px")
}
var r = t,
a = r.find("[data-id='canvas']")[0],
o = r.find("[data-id='canvas']").attr("id");
if (a.getContext) {
var s = !1,
l = a.getContext("2d"),
u = [];
"canvas-products" == o && (u = ["#ffe118", "#eb4155", "rgba(5,29,81,.4)", "#ffea5c", "rgba(5,29,81,.4)", "4bbfe7", "#e23a19", "rgba(5,29,81,.4)"]), "canvas-home" == o && (u = ["rgba(5,29,81,.4)", "rgba(5,29,81,.4)", "#1a4e8b", "#ffffff", "#ffa300", "#ffffff", "rgba(5,29,81,.4)", "#ffa300"]);
var c = 10,
h = 20,
d = [],
p = [],
f = [{
value: 0
}, {
value: 0
}, {
value: 0
}, {
value: 0
}, {
value: 0
}, {
value: 0
}, {
value: 0
}, {
value: 0
}],
g = null;
r.hover(function () {}, function () {
g = null
});
var m = a.width;
r.find(".block").each(function () {
var t = parseInt($(this).attr("data-id")),
i = f[t];
$(this).hover(function () {
n.to(i, .2, {
value: 1,
onUpdate: function () {
e(t)
}
})
}, function () {
g = t, n.to(i, .2, {
value: 0,
onUpdate: function () {
e(t)
}
})
})
});
var v;
v = "canvas-home" == o ? 0 : c, i(), e(), $(window).resize(function () {
i(), e()
})
} else $(".block-product").click(function () {
$(".overlay-products").show()
})
}
答案 0 :(得分：0)
他们用画布（html5的标签）写了过度动画......你必须学会在画布上写字。 对于图像的动画，他们使用精灵并将其移动为帧。