Добавьте эффект параллакса в карусельный баннер, чтобы изображения и текст перемещались с разной скоростью.

У меня работает эффект карусели, но я не знаю, как заставить текст и изображения двигаться с разной скоростью, как показано на этом баннере для IBM:

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

Вот мой 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 (удалите /show/ из URL, чтобы получить доступ к странице редактирования).


person Community    schedule 23.12.2012    source источник
comment
Упомянутый вами код IBM Carousal является Parallax эффект.   -  person arttronics    schedule 23.12.2012


Ответы (1)


Вот онлайн-руководство и живая демонстрация с баннером-каруселью Parallax.

Параллаксный слайдер контента с CSS3 и jQuery

Обратите внимание, что приведенный выше пример — один из многих, которые вы найдете в Интернете, поскольку в нем используется CSS3 для современных браузеров.

Прямая ссылка на DEMO.

person arttronics    schedule 23.12.2012
comment
спасибо за ваш ответ ... я видел демонстрацию, я пытался перемещать изображение и текст отдельно, но не мог перемещать их отдельно .... можете ли вы сказать мне, как снимать это отдельно .... я хотел, чтобы левая половина двигалась отдельно, следуя по правой половине за один слайд - person ; 23.12.2012
comment
В соответствии с этим конкретным руководством вы можете изменить значение bgincrement. В нем указано: increments the background position (parallax effect) when sliding. Но вы всегда можете использовать селекторы jQuery для добавления дополнительных процедур анимации. Я рекомендую вам определить, какая из множества jQuery Parallax Carousel плагины будут лучше всего работать на вашей веб-странице. - person arttronics; 23.12.2012
comment
Я посмотрел на тот IBM Parallax Banner, и он сделан на заказ с нуля. Лучшее решение — просмотреть, какие плагины Parallax лучше всего подходят для ваших нужд, а затем работать с этим фреймворком jQuery, чтобы отдельно анимировать как текст, так и изображения. - person arttronics; 23.12.2012
comment
@attronics: не могли бы вы сказать мне, какое значение изменить, чтобы оно работало точно так же, как эффекты карусели IBM? - person ; 23.12.2012
comment
Не будет ничего, повторяю, ничего похожего на IBM Parallax Banner, потому что это единственный в своем роде заказной баннер. Однако в этой онлайн-демонстрации показан плагин Parallax с функциями, которые вы требуют и очень похожи на версию IBM, за исключением того, что она стоит 10 долларов США, но, возможно, в Интернете есть бесплатные версии, которые можно адаптировать (используйте слово «бесплатно» в своем поиске). - person arttronics; 23.12.2012
comment
Боковое примечание. Веб-сайт IBM, на котором размещен баннер Parallax, не использует jQuery, он использует Dojo Framework для всего. - person arttronics; 23.12.2012
comment
@attronics: было бы здорово, если бы ты сказал мне, что изменить в коде css или jquery - person ; 23.12.2012
comment
Что изменить, зависит от макета вашей веб-страницы, от того, как изменен скрипт jQuery, от вашей HTML-разметки, вашей разметки CSS и ваших целей параллакса анимации. Это само по себе выходит за рамки вашего вопроса. - person arttronics; 24.12.2012