Как реализовать такую кнопку?

Question

[Proroks]

Подскажите, как можно реализовать такую кнопку? Пример
при пролистывание слайда, она оставалась на месте и как бы проходила над картинкой.

Answer 1

[Роман Дворянов]

В общем суть такая -
Слайдеру делаешь
position: relative;

Кнопку суешь не в слайд, а где-нибудь в контейнере слайдера и прописываешь

position: absolute;
z-index: 100;

Для анимации кнопки все зависит от слайдера, но мысль такая -

// Ловишь событие движение слайдера (у некоторых слайдеров есть события)
$('slider').on('sliderMove', function() {
     // Вешаешь на кнопочку заранее написанную анимацию
     $('кнопка').addClass('doAnimation');
     SetTimeOut(function(){
        // Через пол секунды удаляешь анимацию кнопки
        $('кнопка').removeClass('doAnimation');
     }, 500);
});

Comments

[Proroks]

Спасибо за помощь, у owl слайдера есть событие?

[Роман Дворянов]

Proroks: ага,
www.owlcarousel.owlgraphic.com/docs/api-events.html
Вот как раз ваш случай -

var owl = $('.owl-carousel');
owl.owlCarousel();
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
   $('кнопка').addClass('doAnimation');
     SetTimeOut(function(){
        // Через пол секунды удаляешь анимацию кнопки
        $('кнопка').removeClass('doAnimation');
     }, 500);
})

[Proroks]

Спасибо большое!

Answer 2

[Александр Пупкин]

Держи https://yadi.sk/i/hB1z5QCRqdoQg

Comments

[holfza]

чертов гений)