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背景以慢慢滚动？

1 个答案: