Инвертирование цветов обратного вызова изображения в fullpage.js

Question

Я сменил слайд-стрелки на собственные png, черные стрелки, но на некоторых слайдах, которые имеют более темный фон, я хочу инвертировать их, чтобы они были белыми.

-webkit-filter: invert(100%); 

работает нормально, но как вызвать это только на слайдах, используя обратный вызов?

Быстрая анимация инвертирующего параметра 0%> 100% будет прохладным бонусом. Благодарю.

Answer 1

Я не знал о fullPage.js, но, прочитав docs, я обнаружил, что вы можете настроить обратный вызов, который срабатывает при выходе или входе в слайд.

Я думаю, что это то, что вы хотите:

jsFiddle - https://jsfiddle.net/ym3snhu4/1/

Обратите внимание, что я только с помощью -webkit-filter, чтобы инвертировать цвета, так что это не может работать в других, не WebKit браузеров , Например, проверьте это в Chrome. В противном случае добавьте дополнительные префиксы в свойство фильтра при добавлении/удалении стиля. Это зависит от того, как вы меняете свои стрелки, но вы можете, например (с помощью fullPage.js), просто изменить цвет границы вместо использования фильтра.

В основном, мы используем afterSlideLoad и onSlideLeave обратные вызовы для достижения этой цели. Вот код с объяснением в комментариях. Это довольно просто. Мои комментарии длиннее кода, необходимого, просто надеясь, что это понятно.

Пример HTML:

<div class="section"> 
    <div class="slide" data-anchor="slide1"> Slide 1 - Index 0 </div> 
    <div class="slide" data-anchor="slide2"> Slide 2 - Index 1 </div> 
    <div class="slide slide-dark" data-anchor="slide3"> Slide 3 - Index 2 <br> I'm black </div> 
    <div class="slide" data-anchor="slide4"> Slide 4 - Index 3</div> 
</div> 

JavaScript:

// Just take into consideration the callback methods. 
// The body selector is the one I used in the jsFiddle, keep whatever you have. 

$(document).ready(function() { 
    $('body').fullpage({ 

     // The name is self explanatory. 
     // Fires when a a slide has finished loading 
     // and returns info about the slide. 
     // This is helpful so we can know when we are on the 
     // darker slide(s) 
     afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) { 

      // Notice that in the HTML I set the data-anchor attribute, 
      // since that can help us be specific about what slide we are in. 
      // Otherwise, just use the index, which is probably a good idea 
      // since onSlideLeave doesn't return the slideAnchor parameter, 
      // for some reason. 
      // Change the if statement to whatever fits your needs. 
      // Check what index and/or anchor your darker slides are. 

      if(slideAnchor === 'slide3' || slideIndex === 2) { 

       // This adds the invert filter to the controlArrow(s), 
       // effectively reversing their color WHEN inside of 
       // this specific slide. 
       // (In this example, slideIndex 2 with anchor 'slide3'). 
       $('.fp-controlArrow').css('-webkit-filter', 'invert(100%)'); 
      } 
     }, 

     // This fires when leaving a slide. 
     // This will be helpful to return the arrows to their 
     // default color. (When we know we've inverted them beforehand) 
     onSlideLeave: function (anchorLink, index, slideIndex, direction) { 

      // We inverted the color of the arrows in slide 3. 
      // When leaving this slide, we roll them back to their 
      // original color, by setting the filter to 'none'. 
      // I don't know why this 'event' doesn't return the 
      // slideAnchor parameter, so we will just use the index 
      // in here, which is slideIndex === 2 for 'slide3'. 
      // Again, change the if logic to fit your needs, i.e. add 
      // more slides. 

      if(slideIndex === 2) { 

       // This removes the filter, arrows go back to their 
       // original color. 

       $('.fp-controlArrow').css('-webkit-filter', 'none'); 

      } 
     } 
    }); 
}); 

И CSS, необходимый для плавного перехода на фильтре (изменить скорость анимации на то, что вы хотите):

.fp-controlArrow { 
    -webkit-transition: all 500ms; 
    transition: all 500ms; 
}