Чтобы создать эффект падения элементов и дать возможность перемещать их с помощью курсора, вы можете использовать JavaScript библиотеку, такую как jQuery или даже чистый JavaScript.
Вот как вы можете реализовать это с использованием JavaScript:
1. Создайте HTML разметку для изображений, которые вы хотите сделать падающими:
```html
<div class="container">
<img src="path_to_image1" class="falling-image" alt="Image 1">
<img src="path_to_image2" class="falling-image" alt="Image 2">
<!-- Добавьте любое количество изображений -->
</div>
```
2. Добавьте стили для контейнера и падающих изображений:
```css
.container {
position: relative;
height: 500px; /* Установите желаемую высоту контейнера */
}
.falling-image {
position: absolute;
top: 0;
left: 0;
transform: translateX(-50%);
/* Другие стили, такие как ширина и высота изображения */
}
```
3. Напишите JavaScript код, который будет обрабатывать падение и перемещение изображений:
```javascript
// Получаем все падающие изображения
var fallingImages = document.getElementsByClassName('falling-image');
// Задаем начальное положение для каждого изображения
for (var i = 0; i < fallingImages.length; i++) {
var image = fallingImages[i];
image.style.top = Math.random() * 100 + '%'; // Случайное вертикальное положение
image.style.left = Math.random() * 100 + '%'; // Случайное горизонтальное положение
}
// Обработчик события для перемещения изображений с помощью курсора
document.addEventListener('mousemove', function(event) {
for (var i = 0; i < fallingImages.length; i++) {
var image = fallingImages[i];
var mouseX = event.pageX; // Горизонтальная позиция курсора
var mouseY = event.pageY; // Вертикальная позиция курсора
var imageX = image.offsetLeft + image.clientWidth / 2; // Горизонтальная позиция изображения
var imageY = image.offsetTop + image.clientHeight / 2; // Вертикальная позиция изображения
var deltaX = mouseX - imageX; // Расстояние по горизонтали между курсором и изображением
var deltaY = mouseY - imageY; // Расстояние по вертикали между курсором и изображением
var angle = Math.atan2(deltaY, deltaX); // Угол между курсором и изображением
var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); // Расстояние между курсором и изображением
var strength = 1000 / distance; // Мощность перемещения, падение ускоряется с близкими изображениями
// Изменяем положение изображения в соответствии с углом и мощностью
image.style.transform = 'translate(' + Math.cos(angle) * strength + 'px, ' + Math.sin(angle) * strength + 'px)';
}
});
```
Обратите внимание, что код выше предполагает, что у вас есть изображения с классом "falling-image" внутри контейнера с классом "container". Вы также можете настроить стили и JavaScript код в соответствии с вашими потребностями.
Надеюсь, это поможет вам создать эффект падения элементов и их перемещение с помощью курсора!
