// Let's make something cool!2
var _window = window;
var debounce = _window._.debounce;
var _window$Matter = _window.Matter;
var Body = _window$Matter.Body;
var Render = _window$Matter.Render;
var Engine = _window$Matter.Engine;
var World = _window$Matter.World;
var Bodies = _window$Matter.Bodies;
var Events = _window$Matter.Events;
var _window$gsap = _window.gsap;
var random = _window$gsap.utils.random;
var to = _window$gsap.to;
// eslint-disable-next-line
console.clear();
var ORIGINAL_SIZE = 76;
var TEXTURES = ['https://assets.codepen.io/605876/bear--default-badge-large.png', 'https://assets.codepen.io/605876/bear--gold-badge--large.png', 'https://assets.codepen.io/605876/bear--silver-badge--large.png', 'https://assets.codepen.io/605876/bear-bronze-badge-large.png', 'https://assets.codepen.io/605876/bear-emerald-badge-large.png', 'https://assets.codepen.io/605876/bear-purple-badge-large.png'];
var canvas = document.querySelector('canvas');
var engine = Engine.create({
enableSleeping: true
});
var render = Render.create({
element: document.body,
canvas: canvas,
engine: engine,
options: {
background: 'transparent',
wireframeBackground: 'transparent',
wireframes: false,
width: window.innerWidth,
height: window.innerHeight
}
});
// Create the ground
var ground = Bodies.rectangle(0, window.innerHeight - 10, 10000, 1, {
isStatic: true,
render: {
opacity: 0
}
});
// add all of the bodies to the world
World.add(engine.world, [ground]);
// run the engine
Engine.run(engine);
// run the renderer
Render.run(render);
var addBear = function addBear() {
var HEADS = [];
var amount = 100;
var _loop = function _loop(h) {
var SIZE = random(25, 76);
var HEAD = Bodies.rectangle(random(0, window.innerWidth), -100, SIZE, SIZE, {
angle: random(0, 360) * (Math.PI / 180),
render: {
strokeStyle: '#ffffff',
sprite: {
texture: TEXTURES[Math.floor(random(0, TEXTURES.length))],
xScale: SIZE / ORIGINAL_SIZE,
yScale: SIZE / ORIGINAL_SIZE
}
}
});
if (Math.random() > 0.5) to(HEAD, {
angle: (Math.random() > 0.5 ? '-' : '+') + '=' + 360 * Math.PI / 180,
repeat: -1,
duration: random(0.2, 2)
});
Events.on(HEAD, 'sleepStart', function () {
World.remove(engine.world, HEAD);
if (engine.world.bodies.length < 80) mixed();
});
HEADS.push(HEAD);
};
for (var h = 0; h < amount; h++) {
_loop(h);
}
World.add(engine.world, HEADS);
};
var mixed = function mixed() {
return addBear();
};
var bear = function bear() {
return addBear(0);
};
var golden = function golden() {
return addBear(1);
};
var silver = function silver() {
return addBear(2);
};
var bronze = function bronze() {
return addBear(3);
};
var green = function green() {
return addBear(4);
};
var purpleRain = function purpleRain() {
return addBear(5);
};
var clear = function clear() {
return World.clear(engine.world, true);
};
document.body.addEventListener('click', mixed);
window.addEventListener('resize', debounce(function () {
World.clear(engine.world, true);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
Body.setPosition(ground, {
x: 0,
y: window.innerHeight - 10
});
mixed();
}, 500));
mixed();ты хочешь изменить цвета, чтобы посимпатичнее смотрелось?как я и сказал, диз меня устраивает и тёмные тона в нём тоже, но я думаю можно ещё опробовать варианты, возможно получится что-то лучше, поэтому я и написал сюда. может сделал что не так, но я ожидал больше откликов, глупо полагая, что кому-то это нужно))
<div class="flex">
<div class="block-left"></div>
<div class="poster" style="background-image: url(LINK)"></div>
</div>
<div class="block-right"></div>
<div class="screenshots"><div
</div>
</div>.block-left,
.block-right {
padding: 20px;
}
.block-right {
width: 100%;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.screenshots {
display: flex;
flex-wrap: wrap;
}
.poster {
width: 128px; height: 178px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}<img class="poster" src="картинка"/>