Динамическая фоновая прокрутка - PullRequest
Новая
       0

Динамическая фоновая прокрутка

6 голосов
/ 18 сентября 2011

Вот ссылка на то, на что я буду ссылаться: http://beckabney.com/test.html

У меня возникли проблемы с тем, чтобы фоновое изображение работало так, как мне бы хотелось.

Я хочу, чтобы фон автоматически изменял размеры в зависимости от ширины окна, что он уже делает правильно. Если вы сделаете ваше окно меньше, вы увидите, что фон сжимается вместе с ним.

Вот проблема. Если вы сделаете ваше окно широким (коротким), тогда фон изменится и станет слишком высоким, чтобы вы больше не могли видеть верхнюю часть фона (так как фон расположен снизу). Я хочу, чтобы фон находился в верхней части, когда вы находитесь в верхней части страницы, и при прокрутке вниз он будет медленно перемещаться в нижнюю позицию. Вроде как эффект фона телефона Android, когда двигаться влево и вправо. Конечно, имейте в виду, что я все еще хочу, чтобы фон автоматически изменял размеры, когда вы уменьшаете окно.

HTML: 

<body>
    <img src="http://i.imgur.com/6d5Cm.jpg" alt="" class="background" />

    <div class="banner">
        <img src="http://i.imgur.com/JptsZ.jpg" alt="" />
    </div>
    <div class="content">
        <div class="innerContent">
            testing
        </div>
    </div>
</body>

CSS: 

html
{
    background-color: #70d4e3;
    height: 100%;
}

body
{
    height: 100%;
}

.background
{
    margin-top: 45px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -9999;
}

.banner
{
    margin: 0px auto;
    width: 991px;
    margin-bottom: -9px;
}

.content
{
    background: url("http://i.imgur.com/daRJl.png") no-repeat scroll center center transparent;
    height: 889px;
    margin: 0 auto;
    width: 869px;
}

.innerContent
{
    padding: 30px;
}

Может быть, для этого понадобится javascript или jquery.

Ответы [ 8 ]

5 голосов
/ 21 сентября 2011

Ну, это было весело, спасибо!

Надеюсь, вы не возражаете против того, чтобы я позволил себе использовать проценты, чтобы сделать мою жизнь немного проще и, возможно, сценарий немного более надежным, поскольку я могу надежно использовать плавающие числа с процентами.

Я сделал так, чтобы макет, html и css соответствовали правилам, необходимым для правильной анимации bg, они остались практически такими же, как и у вас.

Тогда это был просто вопрос вычисления вычислений, необходимых с правильными свойствами, чтобы выяснить, какой процент вы были сверху, *20 - это фактически пространство, «оставленное» для заполнения фоновым изображением в проценты (так как высота фона составляет 80%).

Они переместили вычисления в функцию, чтобы я мог вызывать ее при прокрутке и изменении размера окна, следя за тем, чтобы оно инициировалось при любом событии, которое каким-либо образом изменяет окно ...

Не проводил расширенного тестирования, но в Chrome он работал, и я устал: p

Я считаю, что это то, что вы ищете:

http://jsfiddle.net/sg3s/RSqrw/15/ См. Редактировать 2

Если вы хотели это по-другому, просто сделайте фон страницы начавшимся сверху и измените это:

http://jsfiddle.net/sg3s/RSqrw/14/ См. Редактировать 2

Edit:

В качестве бонуса, и поскольку я никогда не писал сценарий jquery в качестве «плагина», я решил преобразовать его в один. То, что я придумал, должно быть легко внедрить и использовать!

http://jsfiddle.net/sg3s/RSqrw/52/ См. Редактировать 3

Функциональность успешно протестирована в Chrome, Firefox 3.6, IE9 + режим совместимости

Редактировать 2:

Еще раз прочитав вопрос, проверив, правильно ли я это сделал, я заметил, что я не совсем сделал то, что вы хотите, поэтому я обновил ссылку в первом редактировании, которая дает вам плагин, в котором вы можете иметь несколько вариантов фона прокрутки. , Он сохраняет мою «старую» интерпретацию, а также делает то, что вы хотите ... Прочитайте комментарии в коде для некоторых дополнительных описаний.

Редактировать 3:

Когда я сегодня пошел на работу, меня беспокоил тот факт, что мой плагин 'try' был немного раздутым. И, как вы упомянули в комментарии, это не совсем соответствовало требованиям.

Поэтому я переписал его, чтобы делать только то, что вы хотите, и не намного, протестировал в Chrome Firefox, IE9 + compat и т. Д. И т. Д. Этот скрипт намного чище.

http://jsfiddle.net/sg3s/vZxHW/

Вы можете выбрать, чтобы фон прилипал к верху или низу, если высота соответствует размеру окна. Ничего другого, но этого уже более чем достаточно, чтобы сделать довольно крутые вещи: p

3 голосов
/ 21 сентября 2011

Точное решение: Fiddle: http://jsfiddle.net/srGHE/2/show/

Просмотр источник

Спасибо за вызов.Ниже приведено решение, которое соответствует всем требованиям, включая рекомендуемые, но необязательные (с инструкциями по их удалению) функции.Я показываю только измененные части вашей страницы с пояснениями после каждого раздела (CSS, HTML и JavaScript):

CSS (изменения) : 

html,body{
    margin: 0;
    height: 100%;
    padding: 0;
}
body{
    background-color: #70d4e3;  
}
#background { /*Previously: .background*/
    /*Removed: margin-top: 45px;
      No other changes*/
}
#banner /*Previously: .banner; no other changes */
#content /*Previously: .content; no other changes */
#innerContent /*Previously: .innerContent; no other changes */

Объяснение изменений CSS:

  1. margin-top:45px в фоновом режиме не требуется, поскольку вы абсолютно позиционируетеelement.
  2. Все элементы, которые вряд ли появятся более одного раза, должны быть выбраны с помощью селектора id (#).Этот селектор более специфичен, чем селектор класса.

HTML (изменения) : все атрибуты class были заменены на id.Других изменений не было.Не забудьте включить JQuery Framework , потому что я реализовал ваши пожелания с помощью JQuery.

JavaScript (новый):Примечание. Я добавил функцию, которую вы не запрашивали, но кажется логичной.Код автоматически зарезервирует достаточное поле в левой части окна, чтобы всегда отображать фон.Удалите что-либо между отмеченными комментариями, если вы не хотите использовать эту функцию. 

$(document).ready(function(){
    //"Static" variables
    var background = $("#background");
    var marginTop = parseFloat(background.css("margin-top")) || 0;
    var bannerWidth = $("#banner").width(); /*Part of auto left-margin */
    var extraContWidth = (bannerWidth - $("#content").width())/2; /*Same as above*/

    function fixBG(){
        var bodyWidth = $("body").width();
        var body_bg_width_ratio = bodyWidth/1920;
        var bgHeight = body_bg_width_ratio * 926; //Calcs the visible height of BG

        var height = $(document).height();
        var docHeight = $(window).height();
        var difHeight = bgHeight - docHeight;
        var scrollDif = $(document).scrollTop() / (height - docHeight) || 0;

        /*Start of automatic left-margin*/
        var arrowWidth = body_bg_width_ratio * 115; //Arrow width
        if(bodyWidth - bannerWidth > arrowWidth*2){
            $("body > div").css("margin-left", "auto");
        } else {
            $("body > #banner").css("margin-left", arrowWidth+"px");
            $("body > #content").css("margin-left", (arrowWidth+extraContWidth)+"px");
        }
        /*End of automatic left-margin*/

        if(difHeight > 0){
            background.css({top:(-scrollDif*difHeight-marginTop)+"px", bottom:""});
        } else {
            background.css({top:"", bottom:"0"});
        }
    }
    $(window).resize(fixBG);
    $(window).scroll(fixBG);
    fixBG();
});

Объяснение кода JavaScript Размер фона определяется путем расчета соотношения фона и документа ширина .Свойство width используется, потому что это самый надежный метод для расчета.

Затем вычисляется высота области просмотра, тела документа и фона.Если применимо, также рассчитывается смещение прокрутки, чтобы подготовить движение фона, если необходимо.

Опционально , код определяет, нужно ли корректировать левое поле (чтобы сохранитьфон виден в узком окне).

Наконец, если фоновая стрелка имеет большую высоту, чем тело документа, фон соответствующим образом перемещается с учетом положения прокрутки.Стрелка начинается в верхней части документа и будет перемещаться вверх по мере прокрутки пользователем (так что нижняя сторона стрелки будет нижней частью страницы, когда пользователь полностью прокрутит вниз).Если нет необходимости перемещать фон, потому что он уже хорошо подходит, фон будет расположен в нижней части страницы.

Когда страница завершит загрузку, эта функция будет добавлена ​​в события изменения размера и прокрутки,чтобы фон всегда был в нужном месте.

Если у вас есть какие-либо вопросы, не стесняйтесь их задавать.

0 голосов
/ 22 сентября 2011

Решением вашей проблемы является симпатичный легкий плагин от Scott Robin.Вы можете получить больше информации, скачать ее и облегчить жизнь всем своим проектам, посетив его страницу проекта здесь .

0 голосов
/ 21 сентября 2011

@ Abney; как я понимаю твой вопрос может это ты хочешь http://jsfiddle.net/sandeep/RSqrw/60/

для этого вам нужен только css: 

#background {    
    position: fixed;
    width: 100%;
    height:100%;
    top: 0;
    left:0;   
    z-index: -1;
}
0 голосов
/ 21 сентября 2011

Я рекомендую использовать jQuery Background Parallax http://www.stevefenton.co.uk/Content/Jquery-Background-Parallax/

Функция проста, как 

$("body").backgroundparallax();

Спроси, не получишь ли ты его на работу.

0 голосов
/ 21 сентября 2011

Или, может быть: 

.background {
    margin-top: 45px;
    max-width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -9999;
    max-height: 100%;

}
0 голосов
/ 21 сентября 2011

Используя jQuery, я смог дать вам то, о чем вы думаете: 

$(window).scroll(function() {
    var h = Math.max($(document).height(), $(window).height());
    var bottom = h - $(".background").height() - $(window).height();
    $(".background").css("top", (($(window).scrollTop() / h) * bottom) + "px");
});

РЕДАКТИРОВАТЬ: Забыл учесть, как scrollTop сообщает о позиции.

0 голосов
/ 19 сентября 2011

ну, я не уверен, что понимаю вас и почему вы хотите это сделать, но вы можете попробовать добавить 2 фона (см. http://www.css3.info/preview/multiple-backgrounds/), один с верхним bg, а другой с нижнимНо я думаю, что если страница не слишком длинная, это вызовет проблемы, поэтому другой ответ с использованием чистого CSS следующий: сначала добавьте 3 горизонтальных элемента с шириной 100%.У верхнего div будет ваша верхняя граница и его высота, средний div будет прозрачным, а у автоматической высоты, а у нижнего div будет ваша нижняя bg и его высота.Все div будут иметь 0 z-index.Затем создайте div с более высоким z-index, чтобы он действовал как контейнер, и все будет готово.Если я правильно понимаю ваш вопрос, это то, что я могу придумать, чтобы достичь этого.При этом я уверен, что вы можете сделать это с JQuery с лучшими результатами

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...