0
나는 웹 사이트를 만들려고하고 있었고 나는 웹 사이트에서 영감을 얻기 위해 주변을 둘러 보았고 www.orangina.eu의 페이지 하단에 격자를 발견했으며 절대적으로 좋아했습니다. 나는 튜토리얼을 찾고 있었지만 아직 하나를 찾지 못했다. 누군가가이 그리드가 어떻게 작동하는지 설명해 주시겠습니까? (하나 위에 마우스를 올리면 다른 모든 블록은 그걸 따라 움직입니다).그리드의 스타일은 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()
})
}
우선, 제 질문에 답변 해 주셔서 감사합니다. 캔버스 안의 그림을 움직이는 방법을 찾고 있지는 않지만, 캔버스가 지금처럼 작동하도록하는 방법을 찾고 있습니다. 그 점에 대해 어떤 통찰력을 주시겠습니까? – Kairowa