Как я могу выровнять размер пикселя при разной ширине на этом сайте с прокруткой, созданном с помощью SVG?

(Предварительное обновление моего вопроса: я понял это перед публикацией, но все равно публикую информацию для всеобщего сведения, хотя это довольно неясный материал.)

Я работаю над новым прокручиваемым сайтом для игры, вот рабочая страница: http://pman.mindevo.com/< /а>

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

Мое последнее и лучшее на данный момент рабочее решение — сделать SVG той же высоты, что и остальные фоновые изображения. Проблема, с которой я сталкиваюсь, заключается в том, что при разной ширине браузера «пиксели» персонажа (я использую этот термин вольно, потому что он векторный) не совпадают с «пикселями» фона.

Есть ли у кого-нибудь какие-либо предложения по сохранению того же размера пикселя за пикселем, что и фоны при разной ширине браузера?

Вот некоторая информация о фоновых SVG (открывающий тег SVG):

Это один из слоев параллакса фона дерева:

<svg xmlns="http://www.w3.org/2000/svg" width="2697" height="150" viewBox="0 0 2697 150">

Вот заголовок svg персонажа («Potatoman»):

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="150" viewBox="0 0 10 150">

Первоначально он был встроен в страницу как <img> сам по себе. Вот так:

<div class="section2" data-1999="height:0;" data-2000="height:100%" data-3999="height:100%" data-4000="height:0" class="skrollable skrollable-between">
  <h2> Some dialogue and potatoman animation happens in this section</h2>
    <img src="images/theMan.svg" id="theMan" data-2000="left:-100%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:100%">
</div>

С CSS так:

#theMan {
  position:absolute;
  left: 0;
  bottom:1.3em;
  height:100%;
  width:4%;
}

У меня были проблемы с правильным расположением его по вертикали после изменения ширины.

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


svg pixel skrollr
person ChaBuku Bakke    schedule 03.10.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, вот как мне пришлось все изменить. Сначала я удалил свойство ширины на изображении (#theMan) и позволил ему вернуться к моему базовому CSS img, например так

#theMan {
  bottom:0;
  height:100%;
  left: 0;
  position:absolute;
}
/* for reference img is set like so: */
img {width: 100%;}

Затем мне пришлось изменить свои атрибуты данных, чтобы манипулировать широким браузером и высоким браузером img на это:

  <img src="images/theMan.svg" id="theMan" data-2000="left:-50%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:50%">

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

person ChaBuku Bakke    schedule 03.10.2014