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

别说谁变了你拦得住时间么 提交于 2019-12-30 11:28:13

问题


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.



来源:https://stackoverflow.com/questions/14008143/add-parallax-effect-to-carousel-banner-so-images-and-text-move-at-different-spee

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!