Add Parallax effect to Carousel Banner so images a

2020-03-27 03:57发布

问题:

I have the carousel effect working, but I don't know how to make the text and images move at different speeds as shown in this banner for IBM:

http://www.ibm.com/us/en/

Here's my jQuery:

$.fn.zinCarousel = function(settings) {
    var settings = $.extend({}, $.fn.zinCarousel.defaultSettings, settings || {});
    return this.each(function() {
        var o = $.extend(true, {}, settings),
            $elem = $(this),
            caro = new Carousel(o, $elem);
        caro.init();
    });
};

jsFiddle Demo (Remove /show/ from URL to access edit page).

回答1:

Here is an online tutorial and live demo featuring a Parallax Carousel Banner.

Parallax Content Slider with CSS3 and jQuery

Do note the above example is one of many you'll find on the internet, as this one uses CSS3 for modern browsers.

Direct link to DEMO.