jquery的背景视差效果

本人知识浅薄，所以对着一个WordPress的主题研究了一天，没错，是一整天，终于弄明白了，效果很满意，目前没用发现什么毛病，既然有jQuery了，弄起来也特别简单。以幻灯片的代码为例：

HTML代码：

<div class="carousel-item  active">
    <div class="parallax" style="background-image:url(aaa.jpg)"></div>
    <div class="position-relative container-fluid">
        <div class="carousel-caption text-light pb-5">
            <h1 class="mb-3">title</h1>
            <p class="category-description mb-4">description</p>
        </div>
    </div>
</div>

CSS代码：

.parallax {
    background-size: cover !important;
    position: absolute;
    width: 100%;
    height: 130%;
    top: 0;
    opacity: 1;
    background-position: bottom;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background: #0030b8;
}

jquery代码：

<script>
$(document).ready(function() {
    function draw() {
        requestAnimationFrame(draw);
        scrollEvent();
    }
    draw();
});
function scrollEvent() {
    viewportTop = jQuery(window).scrollTop();
    if (jQuery(window).width())
        jQuery('.parallax').each(function() {
        elementOffset = jQuery(this).offset().top;
        distance = -(elementOffset - viewportTop) * 0.35;
        jQuery(this).css('transform', 'translate3d(0, ' + distance + 'px,0)');
    });
}
</script>

关键的地方就是requestAnimationFrame(draw)函数。

其实在弄出来那一刻，还是很有成就感的，我感觉到自己的智商很高！