Я хочу создать эффект искажения изображения динамически с помощью JS, когда мышь движется по краям изображения.

На чтение 3 мин Опубликовано 14.11.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Подготовка HTML
Шаг 2: CSS для стилей
Шаг 3: JavaScript для динамического искажения
Объяснение кода
Заключение

Вопрос или проблема

Как в этом примере,
https://www.hellomonday.com/services

Я хочу создать такой же эффект при наведении на изображения.

Кто-нибудь может помочь

Ответ или решение

Создание динамического искажения изображения при наведении курсора мыши на его края — задача, которую можно эффективно решить с помощью JavaScript и CSS. Ниже представлено пошаговое руководство по реализации такого эффекта, аналогичного тому, который представлен на сайте Hello Monday.

Шаг 1: Подготовка HTML

Начнем с создания простой структуры HTML, которая будет содержать изображения, к которым мы хотим применить эффект.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Динамическое искажение изображения</title>
</head>
<body>
    <div class="image-container">
        <img src="path_to_your_image.jpg" alt="Изображение" class="distort-image">
    </div>
    <script src="script.js"></script>
</body>
</html>

Шаг 2: CSS для стилей

Далее создадим стили для нашей картинки и контейнера. Обратите внимание на использование свойств overflow: hidden; и position: relative;, чтобы изображение находилось в нужных границах.

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.image-container {
    position: relative;
    overflow: hidden;
}

.distort-image {
    display: block;
    width: 100%; /* или любая другая ширина */
    transition: transform 0.3s ease-out;
}

Шаг 3: JavaScript для динамического искажения

Теперь добавим JavaScript, который будет обрабатывать события перемещения мыши и изменять стиль изображения. Мы будем определять направления движения курсора и применяем соответствующее искажение.

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const image = document.querySelector('.distort-image');

    image.addEventListener('mousemove', (event) => {
        const { offsetX, offsetY, target } = event;
        const { width, height } = target.getBoundingClientRect();

        const x = offsetX / width; // Нормализуем координату X
        const y = offsetY / height; // Нормализуем координату Y

        const distortX = (x - 0.5) * 20; // Коэффициент искажения по X
        const distortY = (y - 0.5) * 20; // Коэффициент искажения по Y

        image.style.transform = `perspective(500px) translateZ(0) rotateY(${distortX}deg) rotateX(${distortY}deg)`;
    });

    image.addEventListener('mouseleave', () => {
        image.style.transform = 'perspective(500px) translateZ(0) rotateY(0deg) rotateX(0deg)';
    });
});

Объяснение кода

HTML: Простая структура с изображением внутри контейнера.
CSS:
- overflow: hidden; — предотвращает выход изображения за пределы контейнера.
- transition — обеспечивает плавный переход при искажении.
JavaScript:
- Мы добавляем обработчик события mousemove, который вычисляет координаты курсора относительно изображения.
- distortX и distortY – значения, которые изменяются в зависимости от положения курсора, создавая иллюзию искажения.
- При выходе курсора из области изображения эффект сбрасывается.

Заключение

Этот код позволяет создать динамическое искажение изображения при наведении на его края, придавая вашему веб-сайту современный и интерактивный вид. Использование эффекта на ваших изображениях может значительно повысить привлекательность и вовлеченность пользователей. Вы можете перенастроить коэффициенты и параметры CSS, чтобы добиться желаемого результата в соответствии с общим стилем вашего проекта.