Подвижная анимированная карточка на JS и CSS

Подвижная анимированная карточка на JS и CSS

Owebs
8 декабря
Просмотры 144
Рейтинг
Время чтения Время чтения: 3 минуты

Оглавление
Развернуть Свернуть

Как сделать подвижную анимированную карточку

 

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

Для создания карточки перекопируйте следующие части кодов:

HTML:
 <div class="cardHoverAnimation" style="--color: rgb(243, 8, 8);"></div>       
CSS:
                .cardHoverAnimation {
                    position: relative;
                    width: 100%;
                    max-width: 300px;
                    height: 400px;
                    background-color: rgb(150, 7, 7);
                    border-radius: 20px;
                    overflow: hidden;
                }
        
                .cardHoverAnimation::before {
                    content: '';
                    position: absolute;
                    top: var(--y);
                    left: var(--x);
                    transform: translate(-50%, -50%);
                    background: radial-gradient(var(--color), transparent, transparent);
                    width: 500px;
                    height: 500px;
                    opacity: 0;
                    transition: 0.3s linear, top 0s, left, 0s;
                }
        
                .cardHoverAnimation:hover::before {
                    opacity: 1;
                }
        
                .cardHoverAnimation::after {
                    content: '';
                    position: absolute;
                    inset: 2px;
                    background-color: rgba(110, 4, 0, 0.75);
                    border-radius: 20px;
                }
            
JS:
                let allCards = document.querySelectorAll('.cardHoverAnimation');

                allCards.forEach(card => {
        
                    card.onmousemove = function (e) {
        
                        let x = e.pageX - card.offsetLeft;
                        let y = e.pageY - card.offsetTop;
        
                        card.style.setProperty('--x', x + 'px');
                        card.style.setProperty('--y', y + 'px');
        
                    }
        
                });
            

После копирования вышеупомянутых кусков кода наша карточка готова.

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Все статьи
Новые
Популярные
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

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

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 366
Рейтинг 4
9 февраля
3 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

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

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

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

Согласен