如何设置 CSS 背景为慢速滚动？

Question

我目前有一个单页设计，背景图片设置为 CSS，background-position: fixed; 这很好用，但我希望背景图像滚动，而不是固定 - 但稍微滚动，不以与内容相同的速度滚动。（视差）

我了解有多种视差解决方案可用，但是否有适合我的设计且无需彻底改变的解决方案？

Answer 1

假设您正在使用 jquery。

试试这个插件：

(function($) {

                $.fn.parallax = function(options) {

                    var windowHeight = $(window).height();

                    // Establish default settings
                    var settings = $.extend({
                        speed        : 0.15
                    }, options);

                    // Iterate over each object in collection
                    return this.each( function() {

                        // Save a reference to the element
                        var $this = $(this);

                        // Set up Scroll Handler
                        $(document).scroll(function(){

                                var scrollTop = $(window).scrollTop();
                                    var offset = $this.offset().top;
                                    var height = $this.outerHeight();

                        // Check if above or below viewport
                        if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) {
                            return;
                        }

                        var yBgPosition = Math.round((offset - scrollTop) * settings.speed);

                             // Apply the Y Background Position to Set the Parallax Effect
                            $this.css('background-position', 'center ' + yBgPosition + 'px');

                        });
                    });
                }
            }(jQuery));

            $('.bg-1,.bg-3').parallax({
                speed : 0.15
            });

            $('.bg-2,.bg-4').parallax({
                speed : 0.25
            });

            $('.bg-5, .bg-7').parallax({
                speed : 0.35
            });
            $('.bg-6, .bg-8').parallax({
                speed : 0.15
            });
            $('.bg-9, .bg-11').parallax({
                speed : 0.25
            });
            $('.bg-10').parallax({
                speed : 0.35
            });
        }

根据您的标记更改选择器（例如“.bg_1”）

如何设置 CSS 背景为慢速滚动？

How to set a CSS background to scroll slowly?

html

css

parallax