как сделать параллакс отзывчивым?

Я использую плагин jQuery plax: https://github.com/cameronmcefee/plax

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

Но я не могу заставить его работать

См. мою скрипку: http://jsfiddle.net/FfKgY/

Я думаю, что проблема с css:

            #shell {
            display: block;
            position: relative;
            margin: 100px auto;
            width: 100%;
            max-width: 318px;
            height: 100%;
            max-height: 318px;
            z-index: 1;
          }

          #plax-logo {
            width: 136px;
            height: 70px;
            position: absolute;
            top: 170px;
            left: 90px;
            z-index: 3;
            background:#099;
            }

          #plax-sphere-1 {
            width: 93px;
            height: 92px;
            position: absolute;
            z-index: 4;
            top: 189px;
            left: 191px;
            background: #3CC;
            }

            #plax-sphere-2 {
            width: 215px;
            height: 215px;
            position: absolute;
            z-index: 2;
            top: 100px;
            left: 53px;
            background: #3C9;
            }

            #plax-sphere-3 {
            width: 93px;
            height: 92px;
            position: absolute;
            top: 35px;
            left: 32px;
            z-index: 1;
            background: #669;
            }

html jquery css parallax
person DWTBC    schedule 01.05.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я понял это сам.

Я добавил еще одну строку CSS

header img {
width:100%;
}

Это помогло

person DWTBC    schedule 04.05.2013

arrow_upward
0
arrow_downward

во-первых, в следующий раз, когда вы захотите создать адаптивный веб-сайт, возможно, стоит проверить foundation. На мой взгляд, это является лучшим отзывчивым шаблоном. Видя, что у вас уже есть страница и, вероятно, вы не хотите начинать заново здесь есть ссылка на другой пост на Stack-overflow, который может показаться вам полезным. Привет, Марко

РЕДАКТИРОВАТЬ

if($(window).width() < 1670 && $(".banner").height() < 1253)
{
    var bannerContent = $(".title").html() + $(".social").parent().html();
    $(".banner").html(bannerContent);
}
else
{
    var bodyContent = $(".title").parent().html();
    $("body").html(bodyContent);
}

Вы можете использовать этот код для всей страницы, чтобы уменьшить ее содержимое. Как видите, если ширина окна = ‹ 1670, то это, иначе, если ширина = ‹1500, то это и т. д. и т. д.

person Marco Geertsma    schedule 01.05.2013
comment
Я умею делать адаптивные макеты. Но я не могу заставить плагин parallax jQuery, упомянутый выше, работать с адаптивным макетом. Я не очень хорошо разбираюсь в jQuery, поэтому мой вопрос здесь, поэтому я действительно не знаю, что искать в ссылке из другого поста на StackOverflow? - person DWTBC; 01.05.2013
comment
Значит, вы не думаете, что это можно исправить с помощью CSS? Я просто попробую это и дам вам знать, как это происходит - person DWTBC; 01.05.2013
comment
Я думаю, вы должны сделать это с помощью css, если это (имя класса, которое оформлено с помощью css и имеет ширину), иначе если (имя класса1, которое имеет тот же стиль, но с другой шириной) иначе, если (имя класса2 и т. д. и т. д.) Если это слишком хлопотно сделать (что я думаю, что это) рассмотреть фундамент. - person Marco Geertsma; 01.05.2013
comment
На самом деле вам не обязательно использовать основу, но вы можете просто взглянуть на код в качестве примера. - person Marco Geertsma; 01.05.2013
comment
Но будет ли фонд уменьшать размеры div, когда для них установлено значение position: absolute; - person DWTBC; 01.05.2013
comment
Я знаком только с основами jQuery, поэтому я не могу заставить код, который вы разместили, работать - person DWTBC; 01.05.2013
comment
Я также думаю, что основа выглядит как много CSS. Я пробовал bootstrap, который отлично работает и кажется похожим на Foundation, но содержит много CSS, который для меня не нужен. Я бы хотел, чтобы он был раздетым и простым, чтобы я знал, что чем управляет. Вместе с этим плагином параллакса я не думаю, что любой из адаптивных макетов будет работать. - person DWTBC; 01.05.2013
comment
Я не говорю вам, чтобы вы на самом деле ИСПОЛЬЗОВАЛИ основу, но вы можете посмотреть, как она делает элементы отзывчивыми, и извлечь из этого уроки. Я считаю, что вам нужно всего лишь 3 элемента, чтобы сделать что-то отзывчивое. - person Marco Geertsma; 01.05.2013
comment
хорошо, но, как уже упоминалось, причина, по которой он не отвечает, заключается в том, что у него есть position: absolute;, поэтому моя проблема заключается в том, как обойти это и сделать это относительным, отзывчивым и готовым к использованию. Foundation и все другие плавающие сетки используют относительное положение и процентное соотношение - person DWTBC; 01.05.2013
comment
Ни один фундамент не работает с position: absolute; вам просто нужно правильно стилизовать его. - person Marco Geertsma; 01.05.2013
comment
хорошо, тогда я попробую это... я дам вам знать, как это происходит - person DWTBC; 01.05.2013