在 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 中进行测试。否则，只需在 adding/removing 样式时向过滤器属性添加更多前缀。这取决于你如何改变你的箭头，但是你可以，例如（使用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;
}

在 fullpage.js 中反转图像回调的颜色

Inverting colours of an image callback in fullpage.js

javascript

jquery

css

webkit

fullpage.js