Не нравятся результаты поиска? Попробуйте другой поиск!

Скользящий фон посредством css


 Maksim_94    14.02.2014    Стол заказов    2246    2

В общем нужно сделать скольжение фона, как это сейчас есть на World of Tanks (ссылка)

css:

body, html {
    background:url(../images/bg.jpg) #000 fixed no-repeat 50% 0px;
    color: #fff;
    height: 100%;
    margin-top: 0px;
    font-family:Verdana, Geneva, sans-serif;
    
}


Покопался в ихнем коде, так и не понял как это сделано

Комментарии пользователей (2)

RadarWeb
11

99 | 24

RadarWeb - 14 февраля 2014 07:58 - Юзер

Ну в принципе там и копаться сильно не надо чтобы понять что это эффект параллакса. Как только поняли сразу лезем в исходы и находим

worldoftanks.ru/static/3.17.1.2/common/wg_bg_parallax.js


Дальше думаю не сложно разобраться

dunwell
9

74 | 15

dunwell - 14 марта 2014 02:18 - Юзер

Все просто.

1. Создаешь JS файл, либо добавляешь в другой JS файл этот код.
(function($, window, document, navigator) {

    var BACKGROUND_PARALAX_SPEED = 2,
        L_PAGE_SELECTOR = '.pareffect',
        WRAPPER_ID = 'js-background-parallax-translate-y-wrapper',
        transformPrefix, allowTranslateY = false, $lpage,
        $window = $(window);

    // We don't support any versions of IE for background parallax
    if ($.browser.msie) {
        return;
    }

    function getVendorPrefix(arrayOfPrefixes) {
        var tmp = document.createElement("div"),
            i, len;

        for (i = 0, len = arrayOfPrefixes.length; i < len; i++) {
            if (typeof tmp.style[arrayOfPrefixes[i]] !== 'undefined') {
                return arrayOfPrefixes[i];
            }
        }
        return undefined;
    }

    transformPrefix = getVendorPrefix(["transform", "msTransform", "MozTransform", "WebkitTransform", "OTransform"]);

    // For now safari only have speedup with translateY mode
    if (/version\/((\d+)?[\w\.]+).+?(mobile\s?safari|safari)/i.exec(navigator.userAgent.toLowerCase()) && transformPrefix !== undefined) {
        allowTranslateY = true;
    }

    if (allowTranslateY) {
    
        $(document).ready(function() {
            var $wrapper = $('<div />');

            $lpage = $(L_PAGE_SELECTOR);

            $lpage.css('overflow','hidden');
                
            $wrapper
                .attr('id', WRAPPER_ID)
                .css({
                    'background-image': $lpage.css('background-image'),
                    'background-position': $lpage.css('background-position'),
                    'background-position-x': $lpage.css('background-position-x'),
                    'background-position-y': $lpage.css('background-position-y'),
                    'background-repeat': $lpage.css('background-repeat'),
                    'position': 'absolute',
                    'top': '0',
                    'left': '0',
                    'right': '0',
                    'bottom': '0'
                });

            $('body').css('min-width','500px');

            $lpage.css({'background-image':'none'});

            $wrapper.prependTo('body');

            $window.bind('scroll.bgparallax', function() {
                var posY = $window.scrollTop() / BACKGROUND_PARALAX_SPEED;

                $wrapper.css(transformPrefix, 'translateY('+ posY + "px)");
            });

            $window.scroll();
        });

    } else {
                    
        $(document).ready(function() {
            $lpage = $(L_PAGE_SELECTOR);

            $window.bind('scroll', function() {
                var posY = ($window.scrollTop() / BACKGROUND_PARALAX_SPEED);

                // Speed improvement on large pages
                if (posY < 1500) {
                    $lpage.css('background-position', '50% '+ posY + "px");
                }
            });
        });
    
    }

})(jQuery, window, document, navigator);


2. Далее, где у тебя в CSS прописан Background. Например <body> - пишешь в шаблоне <body class="pareffect">
3. Чистим Кэш
4. PROFIT!!!

Скорость скроллинга в JS корректируй. Это не сложно.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте