Разлетающиеся объекты

<!--Разлетающиеся объекты-->
<!--https://mt-webdesign.ru/objects-->
<script src='https://matilda-design.ru/library/matter.min.js'></script>
<!--Триггерная Библиотека-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js'></script>

<div id="objects_gravity"></div>

<script>
var canvas = document.getElementById('objects_gravity');
var Engine = Matter.Engine,
Render = Matter.Render,
Events = Matter.Events,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
var engine = Engine.create(),
world = engine.world;
// Направление гравитации
engine.world.gravity.y = 0;
engine.world.gravity.x = 0;
var render = Render.create({
element: canvas,
engine: engine,
options: {
width: window.innerWidth,
height: window.innerHeight,
pixelRatio: 2,
background: 'transparent',
wireframes: false,
}
});
// Размер обводки, радиус скругление углов объектов
var border = 2
var radius = 20
// Условия для разрешений
// 60 - размер объекта, 80 - положение объекта
if( $(window).width() > 320 && $(window).width() < 480) {
var ground = Bodies.rectangle(
(window.innerWidth / 2) + 30, window.innerHeight + -80, window.innerWidth + 120, 60,{render: { fillStyle: '#000'}, isStatic: true });
var wallLeft = Bodies.rectangle( 80, window.innerHeight / 2, 60, window.innerHeight, {render: { fillStyle: '#000'}, isStatic: true });
var wallRight = Bodies.rectangle(window.innerWidth + -80, window.innerHeight / 2, 60, 1200, {render: { fillStyle: '#000'}, isStatic: true });
var roof = Bodies.rectangle(
(window.innerWidth / 2) + 130, 80, window.innerWidth + 260, 60, {render: { fillStyle: '#000'}, isStatic: true });
// Объекты на холсте
var matilda = Bodies.rectangle(150, 180, 165, 76, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3830-3437-4538-b762-653738393335/Matilda.png', xScale: 1, yScale: 1 }}});
}
// else if( $(window).width() > 481 && $(window).width() < 640){
// var ground = Bodies.rectangle(
// (window.innerWidth / 2) + 30, window.innerHeight + -80, window.innerWidth + 120, 60,{render: { fillStyle: '#000'}, isStatic: true });
// var wallLeft = Bodies.rectangle( 80, window.innerHeight / 2, 60, window.innerHeight, {render: { fillStyle: '#000'}, isStatic: true });
// var wallRight = Bodies.rectangle(window.innerWidth + -80, window.innerHeight / 2, 60, 1200, {render: { fillStyle: '#000'}, isStatic: true });
// var roof = Bodies.rectangle(
// (window.innerWidth / 2) + 130, 80, window.innerWidth + 260, 60, {render: { fillStyle: '#000'}, isStatic: true });
// // Объекты на холсте
// var matilda = Bodies.rectangle(900, 180, 165, 76, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3830-3437-4538-b762-653738393335/Matilda.png', xScale: 1, yScale: 1 }}});
// }
// else if( $(window).width() > 641 && $(window).width() < 960){
// var ground = Bodies.rectangle(
// (window.innerWidth / 2) + 30, window.innerHeight + -80, window.innerWidth + 120, 60,{render: { fillStyle: '#000'}, isStatic: true });
// var wallLeft = Bodies.rectangle( 80, window.innerHeight / 2, 60, window.innerHeight, {render: { fillStyle: '#000'}, isStatic: true });
// var wallRight = Bodies.rectangle(window.innerWidth + -80, window.innerHeight / 2, 60, 1200, {render: { fillStyle: '#000'}, isStatic: true });
// var roof = Bodies.rectangle(
// (window.innerWidth / 2) + 130, 80, window.innerWidth + 260, 60, {render: { fillStyle: '#000'}, isStatic: true });
// // Объекты на холсте
// var matilda = Bodies.rectangle(900, 180, 165, 76, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3830-3437-4538-b762-653738393335/Matilda.png', xScale: 1, yScale: 1 }}});
// }
// else if( $(window).width() > 961 && $(window).width() < 1200){
// var ground = Bodies.rectangle(
// (window.innerWidth / 2) + 30, window.innerHeight + -80, window.innerWidth + 120, 60,{render: { fillStyle: '#000'}, isStatic: true });
// var wallLeft = Bodies.rectangle( 80, window.innerHeight / 2, 60, window.innerHeight, {render: { fillStyle: '#000'}, isStatic: true });
// var wallRight = Bodies.rectangle(window.innerWidth + -80, window.innerHeight / 2, 60, 1200, {render: { fillStyle: '#000'}, isStatic: true });
// var roof = Bodies.rectangle(
// (window.innerWidth / 2) + 130, 80, window.innerWidth + 260, 60, {render: { fillStyle: '#000'}, isStatic: true });
// // Объекты на холсте
// var matilda = Bodies.rectangle(900, 180, 165, 76, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3830-3437-4538-b762-653738393335/Matilda.png', xScale: 1, yScale: 1 }}});
// }
else if( $(window).width() > 1201 && $(window).width() < 3000){
var ground = Bodies.rectangle(
(window.innerWidth / 2) + 30, window.innerHeight + 20, window.innerWidth + 80, 60,{render: { fillStyle: 'blue'}, isStatic: true });
var wallLeft = Bodies.rectangle( 80, window.innerHeight / 2, 60, window.innerHeight, {render: { fillStyle: 'red'}, isStatic: true });
var wallRight = Bodies.rectangle(window.innerWidth + -80, window.innerHeight / 2, 60, 1200, {render: { fillStyle: 'green'}, isStatic: true });
var roof = Bodies.rectangle(
(window.innerWidth / 2) + 130, 80, window.innerWidth + 260, 60, {render: { fillStyle: 'yellow'}, isStatic: true });
// Объекты на холсте
var matilda = Bodies.rectangle(900, 180, 165, 76, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3830-3437-4538-b762-653738393335/Matilda.png', xScale: 1, yScale: 1 }}});
}
// else{
// var ground = Bodies.rectangle(
// (window.innerWidth / 2) + 30, window.innerHeight + -80, window.innerWidth + 120, 60,{render: { fillStyle: '#000'}, isStatic: true });
// var wallLeft = Bodies.rectangle( 80, window.innerHeight / 2, 60, window.innerHeight, {render: { fillStyle: '#000'}, isStatic: true });
// var wallRight = Bodies.rectangle(window.innerWidth + -80, window.innerHeight / 2, 60, 1200, {render: { fillStyle: '#000'}, isStatic: true });
// var roof = Bodies.rectangle(
// (window.innerWidth / 2) + 130, 80, window.innerWidth + 260, 60, {render: { fillStyle: '#000'}, isStatic: true });
// // Объекты на холсте
// var matilda = Bodies.rectangle(900, 180, 165, 76, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://static.tildacdn.com/tild3830-3437-4538-b762-653738393335/Matilda.png', xScale: 1, yScale: 1 }}});
// };
/*Указываем тригер*/
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
trigger: ".trigger-gravity",
markers: false,
start: "top center",
end: "bottom center",
onEnter: () => myfunction_1(),
onEnterBack: () => myfunction_1(),
onLeave: () => myfunction_2(),
onLeaveBack: () => myfunction_2(),
});
function myfunction_1() {
// Направление гравитации
engine.world.gravity.y = -1;
engine.world.gravity.x = 0;
};
function myfunction_2() {
// Направление гравитации
engine.world.gravity.y = 1;
engine.world.gravity.x = 0;
};
// Перечисляем объекты на холсте
World.add(engine.world, [
ground, wallLeft, wallRight, roof, matilda
]);
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
render.mouse = mouse;
mouse.element.removeEventListener("mousewheel", mouse.mousewheel);
mouse.element.removeEventListener("DOMMouseScroll", mouse.mousewheel);
let click = false;
document.addEventListener('mousedown', () => click = true);
document.addEventListener('mousemove', () => click = false);
document.addEventListener('mouseup', () => console.log(click ? 'click' : 'drag'));
Events.on(mouseConstraint, 'mouseup', function(event) {
var mouseConstraint = event.source;
var bodies = engine.world.bodies;
if (!mouseConstraint.bodyB) {
for (i = 0; i < bodies.length; i++) { 
var body = bodies[i];
if (click === true) {
if (Matter.Bounds.contains(body.bounds, mouseConstraint.mouse.position)) {
var bodyUrl = body.url;
console.log("Body.Url >> " + bodyUrl);
if (bodyUrl != undefined) {
window.open(bodyUrl, '_blank');
console.log("Hyperlink was opened");
}
break;
}
}
}
}
});
Engine.run(engine);
Render.run(render);
</script>