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

Question

I've changed the slide arrows to my own png, black arrows but on some slides, which have darker background I want to invert them so they are white.

-webkit-filter: invert(100%);

works just fine, but how to trigger this only on slides that using a callback?

Quick animation of the invert parameter 0% > 100% would be a cool bonus. Thanks.

Answer 1

I didn't know about fullPage.js , but reading through the docs , I found that you can customize a callback that fires when leaving or entering a slide.

I think this is what you want:

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

Notice that I'm only using -webkit-filter to invert the color, so this might not work in other non-webkit browsers. So test this in Chrome, for instance. Otherwise, just add more prefixes to the filter property when adding/removing the style. It depends on how you are changing your arrows, but you can, for instance (with fullPage.js), just change the border-color instead of using filter.

Basically, we are using the afterSlideLoad and the onSlideLeave callbacks to achieve this. Here's the code with the explanation in comments. It's pretty straightforward. My comments are way longer than the code needed, just hoping it's clear.

Example 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');

            }
        }
    });
});

And the CSS needed for the smooth transition on filter (change the animation speed to whatever you wish):

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