682 lines
9.1 KiB
JavaScript
682 lines
9.1 KiB
JavaScript
gsap.config({
|
|
trialWarn: false });
|
|
|
|
|
|
var assetVerticalBreakPoints = [
|
|
{
|
|
selector: ".blason",
|
|
large: {
|
|
scale: 1,
|
|
transformOrigin: "center bottom",
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
scale: 1,
|
|
transformOrigin: "center bottom",
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
scale: 0.5,
|
|
transformOrigin: "center bottom",
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".small-tower",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 300,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 300,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".big-tower",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 200,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".house",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 120,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 400,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".tree",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 150,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 400,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".one",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 100,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 300,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".big-tower-left",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 400,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 400,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".big-tower-left-2",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: -60,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 190,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".double-tower-left",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 90,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 90,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".double-tower-center",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 250,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 400,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".tower-left, .tower-right",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 110,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".tower-roof-left, .tower-roof-right",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 60,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".top-back, .roof-tower-side, .tower-windows",
|
|
large: {
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
opacity: 0,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".horizontal-bottom-general",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: -160,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: -280,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".horizontal-bottom-1",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: -120,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: -210,
|
|
duration: 0.3 } }];
|
|
|
|
|
|
|
|
var assetHorizontalBreakPoints = [
|
|
{
|
|
selector: ".tree-right, .tree-right-2",
|
|
large: {
|
|
x: 0,
|
|
rotate: 0,
|
|
transformOrigin: "center",
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: -240,
|
|
rotate: -5,
|
|
transformOrigin: "center",
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: -240,
|
|
rotate: -5,
|
|
transformOrigin: "center",
|
|
opacity: 0,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".tree-left, .tree-left-2",
|
|
large: {
|
|
x: 0,
|
|
rotate: 0,
|
|
transformOrigin: "center",
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 240,
|
|
rotate: 5,
|
|
transformOrigin: "center",
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: 240,
|
|
rotate: 5,
|
|
transformOrigin: "center",
|
|
opacity: 0,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".light-radius",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 50,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".main-castle-center",
|
|
large: {
|
|
opacity: 1,
|
|
duration: 0 },
|
|
|
|
medium: {
|
|
opacity: 1,
|
|
duration: 0 },
|
|
|
|
narrow: {
|
|
opacity: 0,
|
|
duration: 0 } },
|
|
|
|
|
|
{
|
|
selector: ".big-tower-left",
|
|
large: {
|
|
x: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 0,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: 300,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".torsh",
|
|
large: {
|
|
opacity: 1,
|
|
duration: 0 },
|
|
|
|
medium: {
|
|
opacity: 1,
|
|
duration: 0 },
|
|
|
|
narrow: {
|
|
opacity: 0,
|
|
duration: 0 } },
|
|
|
|
|
|
{
|
|
selector: ".one",
|
|
large: {
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
opacity: 0,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".two",
|
|
large: {
|
|
x: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 334,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: 334,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".tree",
|
|
large: {
|
|
x: 0,
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 60,
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: 60,
|
|
opacity: 0,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".four",
|
|
large: {
|
|
x: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: -130,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: -350,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".inner-small-tower",
|
|
large: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
y: 0,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
y: 450,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".inner-house",
|
|
large: {
|
|
x: 0,
|
|
y: 0,
|
|
transformOrigin: "center bottom",
|
|
transform: "scale(1)",
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: -180,
|
|
y: 0,
|
|
transformOrigin: "center bottom",
|
|
transform: "scale(1)",
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: -280,
|
|
y: 0,
|
|
transformOrigin: "center bottom",
|
|
transform: "scale(0.6)",
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".inner-big-tower",
|
|
large: {
|
|
x: 0,
|
|
y: 0,
|
|
transformOrigin: "center top",
|
|
transform: "scale(1)",
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: -180,
|
|
y: 0,
|
|
transformOrigin: "center top",
|
|
transform: "scale(1)",
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: -280,
|
|
y: 0,
|
|
transformOrigin: "center top",
|
|
transform: "scale(0.6)",
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".wall-right",
|
|
large: {
|
|
x: 0,
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: -235,
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: -235,
|
|
opacity: 0,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".wall-left",
|
|
large: {
|
|
x: 0,
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 235,
|
|
opacity: 0,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: 235,
|
|
opacity: 0,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".tower-roof-left, .left-roof-tower-base",
|
|
large: {
|
|
x: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 360,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: 360,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".tower-left, .left-tower-base",
|
|
large: {
|
|
x: 0,
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 0,
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: 200,
|
|
opacity: 0,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".tower-roof-right, .right-roof-tower-base",
|
|
large: {
|
|
x: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: -360,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: -360,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".tower-right, .right-tower-base",
|
|
large: {
|
|
x: 0,
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 0,
|
|
opacity: 1,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: -200,
|
|
opacity: 0,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".double-tower-left",
|
|
large: {
|
|
x: 0,
|
|
scale: 1,
|
|
transformOrigin: "center",
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 180,
|
|
scale: 1,
|
|
transformOrigin: "center",
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: 350,
|
|
scale: 0.8,
|
|
transformOrigin: "center",
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".double-tower-center",
|
|
large: {
|
|
x: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 103,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: 103,
|
|
duration: 0.3 } },
|
|
|
|
|
|
{
|
|
selector: ".big-tower-left-2",
|
|
large: {
|
|
x: 0,
|
|
duration: 0.3 },
|
|
|
|
medium: {
|
|
x: 150,
|
|
duration: 0.3 },
|
|
|
|
narrow: {
|
|
x: 220,
|
|
duration: 0.3 } }];
|
|
|
|
|
|
|
|
|
|
function applySVGResponsiveness_horizontal(width) {
|
|
assetHorizontalBreakPoints.forEach(asset => {
|
|
if (width < 360) {
|
|
gsap.to(asset.selector, asset.narrow);
|
|
} else if (width < 620) {
|
|
gsap.to(asset.selector, asset.medium);
|
|
} else {
|
|
gsap.to(asset.selector, asset.large);
|
|
}
|
|
});
|
|
}
|
|
|
|
function applySVGResponsiveness_vertical(height) {
|
|
assetVerticalBreakPoints.forEach(asset => {
|
|
if (height < 300) {
|
|
gsap.to(asset.selector, asset.narrow);
|
|
} else if (height < 485) {
|
|
gsap.to(asset.selector, asset.medium);
|
|
} else {
|
|
gsap.to(asset.selector, asset.large);
|
|
}
|
|
});
|
|
}
|
|
|
|
const draw = document.getElementById("draw");
|
|
|
|
window.addEventListener("resize", function () {
|
|
draw.setAttribute(
|
|
"style",
|
|
"width:" + window.innerWidth + "px;height:" + window.innerHeight + "px;");
|
|
|
|
|
|
applySVGResponsiveness_horizontal(draw.offsetWidth);
|
|
applySVGResponsiveness_vertical(draw.offsetHeight);
|
|
});
|
|
|
|
var ro = new ResizeObserver(entries => {
|
|
for (let entry of entries) {
|
|
const cr = entry.contentRect;
|
|
applySVGResponsiveness_horizontal(cr.width);
|
|
applySVGResponsiveness_vertical(cr.height);
|
|
}
|
|
});
|
|
ro.observe(document.getElementById("draw"));
|
|
|
|
window.onload = function () {
|
|
gsap.to("#fade", {
|
|
opacity: 0,
|
|
duration: 5 });
|
|
|
|
};
|
|
|
|
document.addEventListener("mousedown", function () {
|
|
gsap.to("#instructions", {
|
|
opacity: 0,
|
|
duration: 0.4 });
|
|
|
|
}); |