AlexeyRybakov Aug 15 at 15:19

Анимации Hover и эффекты Blur: Полный гид по созданию динамических карточек

Medium

5 min

2.1K

CSS*JavaScript*

Tutorial

Recovery Mode

Translation

Original author: ChokCoco

В этой статье мы подробно рассмотрим, как реализовать анимацию с эффектом Hover для карточек, как показано ниже.

Основные трудности, которые нам предстоит решить:

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

Альтернативный подход — использовать маску. Можно заранее создать общий эффект с градиентной границей и внутренним свечением, а затем сделать так, чтобы маска следовала за курсором.

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

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

Создание статического эффекта

Сначала мы создаем статический эффект, который виден, когда мышь не находится над карточкой. Вот пример:

Каждая карточка имеет размытое фоновое изображение, которое должно быть индивидуальным для каждой картинки, поэтому одну универсальную фоновую картинку использовать нельзя.

Кроме того, размытое фоновое изображение должно примерно соответствовать цвету настоящего изображения.

Для решения этой задачи можно использовать CSS-фильтр filter: blur(). Код для этого достаточно простой.

<div></div>

:root {
    --pic: url("https://oss.aiyuzhou8.com/2023/05/08-.jpg");
}
div {
    position: relative;
    margin: auto;
    width: 350px;
    height: 500px;
    border-radius: 30px;
    overflow: hidden;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        background: var(--pic);
        background-size: cover;
        background-position: center;
        border-radius: 30px;
    }
    
    &::before {
        inset: 0;
        filter: blur(20px);
    }
    
    &::after {
        inset: 50px;
    }
}

Мы используем псевдоэлементы: один для исходного изображения, другой для размытого фона.

Это позволяет адаптировать размытое изображение к любому фону.

Реализация градиентной границы

Следующий шаг – создание градиентной границы.

Для этого используется conic-gradient. Потребуется дополнительный элемент div, чтобы создать нужный эффект. Мы накладываем этот элемент на предыдущий эффект, немного увеличив его размер.

<div></div>

div {
    width: 350px;
    height: 500px;
    border-radius: 30px;
    background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
}

Получаем такой градиент.

Мы накладываем этот элемент на предыдущий эффект, немного увеличив его размер.

При внимательном рассмотрении можно заметить, что помимо градиентной границы, текущий эффект также имеет внутреннее свечение. Он очень кривой, это не совсем то, чего мы хотим добиться:

Исследование прозрачности с filter: blur()

Эффект прозрачности возникает из-за того, что элемент с фильтром filter: blur() создаёт плавное затухание прозрачности от краёв к центру.

Проведем простой эксперимент

<div></div>
<div></div>

div {
    position: relative;
    width: 200px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid #000;
    background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
    
    &::before {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #000;
    }
}

Мы создаем два одинаковых div, где сам элемент имеет угловой градиентный фон.

Затем, используя его псевдоэлемент, мы устанавливаем белый фон в середине элемента, на расстоянии 10px от границы. Эффект выглядит следующим образом:

На данный момент два элемента не отличаются друг от друга. Но далее мы добавляем фильтр: blur() эффект "Размытие по Гауссу" к псевдоэлементу второго элемента:

div:nth-child(2) {
    &::before {
        filter: blur(20px);
    }
}

В этот момент снова посмотрите на эффекты:

На краях белого элемента действительно наблюдается эффект уменьшения прозрачности в направлении внутрь.

Конечно, поскольку размытие по Гауссу распространяется и наружу, приведенный выше DEMO выглядит не очень четко, поэтому мы можем предотвратить распространение гауссова размытия наружу, применив дополнительный слой контейнеров с overflow: hidden.

Давайте еще немного подправим макет:

<div class="g-father">
    <div class="g-child"></div>
</div>
<div class="g-father">
    <div class="g-child"></div>
</div>

.g-father {
    position: relative;
    width: 200px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid #000;
    background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
    
    .g-child {
        position: absolute;
        inset: 10px;
        border-radius: 10px;
        border: 1px solid #000;
        overflow: hidden;
        
        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: #fff;
            border-radius: 10px;
            
        }
    }
}

.g-father:nth-child(2) {
    .g-child::before {
        filter: blur(20px);
    }
}

Сейчас если мы посмотрим на весь эффект, элемент с установленным фильтром: blur() будет иметь прозрачный распад от краев к центру, и эффект будет очень очевиден:

Добавление событий мыши и масок для достижения эффекта

Итак, к этому моменту нам удалось добиться такого эффекта:

Исходя из вышеописанного эффекта, в итоге мы добиваемся такого эффекта:

Мы будем использовать обработчик события mousemove для отслеживания перемещения курсора и комбинировать его с маской для создания желаемого эффекта.

В реализации эффекта используются несколько слоев. Конкретно, граница и внутреннее свечение — это отдельные слои, которые формируют фоновый эффект.

Что нам нужно сделать:

Создать маску с радиальным градиентом с помощью radial-gradient().
Отслеживать событие перемещения мыши и перемещать центр маски в зависимости от положения курсора.
Добавить дополнительный слой, чтобы градиентный элемент фона появлялся только при наведении мыши (Hover), и исчезал, когда курсор покидает область элемента.

Примерный код выглядит следующим образом:

<div id="g-container">
    <div id="g-img"></div>
</div>

:root {
    --x: 0;
    --y: 0;
}
#g-container {
    position: relative;
    width: 350px;
    height: 500px;
    border-radius: 30px;
}
#g-img {
    position: absolute;
    inset: 0px;
    border-radius: 30px;
    background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
    mask: radial-gradient(
        circle at var(--x) var(--y),
        #000,
        #000,
        transparent,
        transparent,
        transparent
    );
}

const container = document.getElementById("g-container");
const img = document.getElementById("g-img");

container.addEventListener("mousemove", (event) => {
    img.style.visibility = 'visible';

    const target = event.target;
    const rect = target.getBoundingClientRect();

    var offsetX = event.clientX - rect.left;
    var offsetY = event.clientY - rect.top;

    var percentX = (Math.min(Math.max(offsetX / rect.width, 0), 1) * 100).toFixed(2);
    var percentY = (Math.min(Math.max(offsetY / rect.height, 0), 1) * 100).toFixed(2);;

    console.log('X: ' + percentX + '%');
    console.log('Y: ' + percentY + '%');

    container.setAttribute('style', `--x: ${percentX}%;--y: ${percentY}%;`);

});

container.addEventListener("mouseout", (event) => {
    img.style.visibility = 'hidden';
});

Перемещение мыши по графику дает такой эффект:

Объедините два первых слоя, чтобы в итоге получился идеальный эффект:

Tags:

Hubs: