添加视差效果到旋转横幅，使图像和文字以不同的速度移动 [英] Add Parallax effect to Carousel Banner so images and text move at different speeds

问题描述

我有轮转效果工作，但我不知道如何使文本和图像以不同的速度移动，如此横幅中所示为IBM：

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/

这是我的jQuery：

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 （从网址中删除 / show / ）。

推荐答案

这里是一个在线教程和现场演示，其中包含 Parallax Carousel Banner 。

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

视差内容滑块与CSS3和jQuery

请注意，上面的例子是许多你会发现在互联网上， CSS3 适用于现代浏览器。

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

直接链接到 DEMO 。

Direct link to DEMO.

这篇关于添加视差效果到旋转横幅，使图像和文字以不同的速度移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！