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

Модификаторы

Модификация позволяет создать объекты на странице с реалистичной физикой. Они падают, ударяются, крутятся и разлетаются, при взаимодействии

Описание

Посмотреть пример

Инструкция по подключению

Создать блок T123 над всей страницей и добавить код

Библиотека для объектов


<script src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js'></script><script  src="./script.js"></script>

Создать блок T123 над всей страницей и добавить код

Библиотека для триггера


<!--Триггерная Библиотека-->
<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>

В Zero блоке создаём HTML код и помещаем в него код ниже и растягиваем его на ширину и высоту экрана

Холст


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

В Zero блоке создаём шейп с классом trigger-gravity

Триггер

Создаём блок T123 и помещаем скрипт.

Скрипт для работы и взаимодействия


<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 + -300, 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{
    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: "top top",
  onEnter: () => myfunction_1(),
  onLeaveBack: () => myfunction_1(),
});
function myfunction_1() {
  // Направление гравитации
    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>

Подробные настройки по подключению и взаимодействию в видео

Другие модификации

Подсказки при наведении курсора

Модификаторы