Плавная анимация заголовка

Рейтинг: 0Ответов: 1Опубликовано: 07.05.2023

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

Код заголовка:

<div class="product-inner"><h2 class="woocommerce-loop-product__title"><a href="http://gtraderu.ru/product/dyson-purifier-humidifycool-formaldehyde-ph04/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">Purifier PH04 Humidify+Cool Formaldehyde</a></h2></div>


ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px;
    margin: 0 0 3px;
}

.woocommerce-loop-product__title {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.product-inner:hover .woocommerce-loop-product__title {
  ???
}

Возможность скролла добавил через css:

.woocommerce-loop-product__title {
  position: relative;
    overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.woocommerce-loop-product__title::-webkit-scrollbar {
  width: 0px;
    height: 0px;
}

и это дало возможность прокручивать на мобильной версии путём захвата и перетаскивания влево и вправо заголовка, осталось добавить запуск анимации при наведении на .product-inner:hover

css javascript wordpress woocommerce css-animation
Источник: Stack Overflow на русском

Ответы

▲ 0

"двигать заголовок по горизонтали захватом заголовка левой клавишей мыши и движением горизонтальным по горизонтали." - Это нужно писать блок на JS и я не очень представляю, как это должно выглядеть. Добавьте пример, если он есть

Для плавного джвижения по hover нужно добавить элементу в изначальном состоянии transition

.woocommerce-loop-product__title {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    transition: transform 0.3s ease-in-out;
}

.product-inner:hover .woocommerce-loop-product__title {
  transform: translate3d(100px, 0, 0);
}