Search code examples
jquerycssbannerparallax

Add Parallax effect to Carousel Banner so images and text move at different speeds

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).

Solution

  • 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.