个性化阅读
专注于IT技术分析

WordPress上divi主题的航路点如何工作?

Divi主题实现了航点, 任何人都知道它是如何工作的以及如何使用它们?例如, 该类允许动画在某个时间点到达, 但我需要知道如何操纵事件。


#1


它的工作原理如下:当你将et-waypoint类分配给任何divi模块时, 它将由divi JS编写的jQuery自动提取,

<script>
(function($) {
    var $animation_elements = $('.et-waypoint'), $window = $(window);

    function check_if_in_view() {
        var window_height = $window.height(), window_top_position = $window.scrollTop(), window_bottom_position = (window_top_position + window_height);

        $animation_elements.each(function() {
            var $element = $(this), element_height = $element.outerHeight(), element_top_position = $element.offset().top, element_bottom_position = (element_top_position + element_height);

            //check to see if this element is within viewport
            if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
                $element.addClass('et-animated');
            } else {
                $element.removeClass('et-animated');
            }
        });
    }

    $window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>

在这种情况下, $ animation_elements抓取et-waypoint, 并在窗口滚动时调用check_if_in_view。

赞(0) 打赏
未经允许不得转载:srcmini » WordPress上divi主题的航路点如何工作?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏