javascript - jQuery单词逐字渐隐效果

香港专业教育学院一直在寻找这个确切的脚本有一段时间了，我不能让它工作。我希望逐个单词使用从左到右的淡入效果。

例如

 <div class="box5">
      <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus
      </h1>
</div>

我希望它渐渐消失，然后有足够的行在稍晚一点的延迟后逐字渐渐消失。

我当前的淡入效果不错，但它是通过看起来像这样的完整容器来完成的

.reveal {
    position: relative;
    overflow: hidden;
}

/*initial - hidden*/
.reveal .reveal__cover {
    position: absolute;
    top: 0;
    left: -250px;
    height: 100%;
    margin: 2px;
    width: calc(100% + 250px);
}

.reveal .reveal__cover.reveal__uncovered {
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: calc(100% + 250px);
    margin: 2px;
    transition: left 2500ms ease-out 0ms;
}

.reveal__cover-section {
    height: 100%;
    float: right;
    /* NOTE: Background must match existing background */
    /*background: #000;*/
    background: #fff;
    width: 2%;
}

.reveal__10 {
    opacity: 0.1;
}

.reveal__20 {
    opacity: 0.2;
}

.reveal__30 {
    opacity: 0.3;
}

.reveal__40 {
    opacity: 0.4;
}

.reveal__50 {
    opacity: 0.5;
}

.reveal__60 {
    opacity: 0.6;
}

.reveal__70 {
    opacity: 0.7;
}

.reveal__80 {
    opacity: 0.8;
}

.reveal__90 {
    opacity: 0.9;
}

.reveal__100 {
    opacity: 1;
    width: 82%;
}

然后JS

function replaceAllInstances(source, search, replacement) {
    var regex = new RegExp(search, "g");
    var result = source.replace(regex, replacement);
    return result;
}

$.fn.isOnScreen = function (x, y) {

    if (x == null || typeof x == 'undefined')
        x = 1;
    if (y == null || typeof y == 'undefined')
        y = 1;

    var win = $(window);

    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var height = this.outerHeight();
    var width = this.outerWidth();

    if (!width || !height) {
        return false;
    }

    var bounds = this.offset();
    bounds.right = bounds.left + width;
    bounds.bottom = bounds.top + height;

    var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

    if (!visible) {
        return false;
    }

    var deltas = {
        top: Math.min(1, (bounds.bottom - viewport.top) / height),
        bottom: Math.min(1, (viewport.bottom - bounds.top) / height),
        left: Math.min(1, (bounds.right - viewport.left) / width),
        right: Math.min(1, (viewport.right - bounds.left) / width)
    };

    return (deltas.left * deltas.right) >= x && (deltas.top * deltas.bottom) >= y;

};

/*
 * Init specified element so it can be gradually revealed.
 *
 * Limitations:
 *  Only works on backgrounds with a solid color.
 *
 *  @param options = {
 *       id:'box3'
 *      ,background='#ffffff' //default
 *      ,delay='0' //default
 *  }
 *
 */
$.fn.initReveal = function (options) {
    console.log('-------------');
    console.log('selector:' + this.selector);
    var parent = $(this).parent();

    //grab a copy of the contents, then remove it from DOM
    var contents = $(this).clone();
    $(this).empty();

    var revealHtmlBlock = "<div class='reveal'> <div class='text reveal__inner reveal__inner-{class}'> </div> <div class='reveal__cover reveal__cover-{class}'> <div class='reveal__cover-section reveal__100'></div> <div class='reveal__cover-section reveal__90'></div> <div class='reveal__cover-section reveal__80'></div> <div class='reveal__cover-section reveal__70'></div> <div class='reveal__cover-section reveal__60'></div> <div class='reveal__cover-section reveal__50'></div> <div class='reveal__cover-section reveal__40'></div> <div class='reveal__cover-section reveal__30'></div> <div class='reveal__cover-section reveal__20'></div> <div class='reveal__cover-section reveal__10'></div> </div> </div>";
    revealHtmlBlock = replaceAllInstances(revealHtmlBlock, "{class}", options.id);

    $(revealHtmlBlock).appendTo(parent);
    contents.appendTo($('.reveal__inner-' + options.id));

    //handle options

    //delay
    if (options.delay === undefined) {
        console.log('delay set to 0');
        options.delay = 0; //set default
    } else {
        console.log('delay set to:' + options.delay);
    }
    var revealElementFunction = function (options) {
        $(this).performReveal(options);
    };

    //background
    if (options.background !== undefined) {
        $('.reveal__cover-' + options.id + ' .reveal__cover-section').css({'background-color': options.background});
    }

    //trigger the reveal at the specified time, unless auto is present and set to false
    if (options.auto === undefined || (options.auto !== undefined && options.auto)) {
        setTimeout(function () {
            console.log('call');
            revealElementFunction(options);
        }, options.delay);
    }

    //trigger on-visible
    if (options.trigger !== undefined) {
        var revealOnScreenIntervalIdMap = {};
        function uncoverText() {
            var onscreen = $('.reveal__inner-box4').isOnScreen();
            if ($('.reveal__inner-' + options.id).isOnScreen()) {
                $('.reveal__cover-' + options.id).addClass('reveal__uncovered');
                revealOnScreenIntervalIdMap[options.id] = window.clearInterval(revealOnScreenIntervalIdMap[options.id]);
            }
        }
        function showTextWhenVisible() {
            revealOnScreenIntervalIdMap[options.id] = setInterval(uncoverText, 800);
        }
        showTextWhenVisible();
    }

};

//--------------------
/*
 * trigger options:
 * immediately (on page load)
 * on event, eg. onclick
 * on becoming visible, after it scrolls into view, or is displayed after bein ghidden
 *
 *  @param options = {
 *       id:'box3'
 *  }
 *
 */
$.fn.performReveal = function (options) {
    var _performReveal = function () {
        $('.reveal__cover-' + options.id).addClass('reveal__uncovered');
    };
    //allow time for init code to complete
    setTimeout(_performReveal, 250);
};

主JS

jQuery(function () {
    //Box 1: reveal immediately - on page load
    //NOTE: id does refer to an element id, It is used to
    //      uniquely refer to the element to be revealed.
    var options1 = {
        id: 'box1',

        background: '#008d35'
    };
    $('.box1').initReveal(options1);

    //------------------------
    //Box 2: reveal after specified delay
    var options2 = {
        id: 'box2'
        , delay: 3000
        , background: '#008d35'
    };
    $('.box2').initReveal(options2);

    //------------------------
    //Box 3: reveal on event - eg. onclick
    var options3 = {
        id: 'box3'
        , auto: false
    };
    var box3 = $('.box3');
    box3.initReveal(options3);

    $('.btn-reveal').on('click', function () {
        box3.performReveal(options3);
    });

    //------------------------
    //Box 4: Reveal when element scrolls into the viewport
    var options4 = {
        id: 'box4'
        , auto: false
        , trigger: 'on-visible'
    };
    $('.box4').initReveal(options4);
});

//------------------------
//Box 5 reveal
    var options5 = {
        id: 'box5'
        , delay: 2500 ,
        background: '#008d35'
    };
    $('.box5').initReveal(options5);

有谁知道如何使它逐字而不是逐行地工作

最佳答案

这是可以建立的简单方法。它会创建所需的跨度，并根据您设置的间隔值淡入。

var fadeInterval = 300

$('h1').html(function(_, txt){
    var words= $.trim(txt).split(' ');
    return  '<span>' + words.join('</span> <span>') + '</span>';
}).find('span').each(function(idx, elem){
    $(elem).delay(idx * fadeInterval).fadeIn();
});

DEMO