Параллакс с холстом HTML 5

Я работаю над сайтом параллакса, который имеет полноразмерное фоновое изображение вверху страницы. В настоящее время он использует контейнеры с фиксированным позиционированием, которые настраиваются с помощью jquery для событий прокрутки.

Вот пример

CSS

#bg{
      z-index: -5;
      positioned: fixed;
      width: 100%
      height: auto;
   }

#skyline{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
   }

НАЗНАЧКА

<div id="bg">
  <img id="skyline" src="skyline.jpg" alt="Skyline"/>
</div>

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

Из исследования, которое я проводил, похоже, что использование холста HTML 5 поможет решить эту проблему. Мне интересно, может ли кто-нибудь предложить, как получить полноразмерный фон, который изменяет размер окна с помощью HTML5 Canvas.

Любая помощь будет отличной

Спасибо


canvas html parallax html5-canvas
person StefCharle    schedule 10.04.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Редактировать: кажется, я понимаю ваше замешательство. Так

dx = 0
dy = 0
dWidth = window.innerWidth // use your favorite method for obtaining the width/height
...

Тогда все, что вам нужно сделать, это изменить исходные координаты на каждом кадре, а sWidth и sHeight будут равны dWidth и dHeight (это размер среза, вы хотите, чтобы он соответствовал вашему экрану).

надеюсь, это поможет

Ознакомьтесь с документацией по холсту. Я думаю, это хорошо объяснено.

Посмотрите на пример 3, где вы можете указать смещения для изображения:

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Насколько велико изображение, которое вы используете? Если вы перемещаете изображение размером 3 МБ, я могу представить, что на большинстве машин оно будет прерывистым.

Кроме того, для анимации Chrome/Chromium ведет себя намного лучше, поэтому я использую его для разработки, но обычно просматриваю в Firefox.

person RecencyEffect    schedule 10.04.2013
comment
Я прочитал документацию и получил изображение для отображения, но оно неправильно изменило размер и по какой-то причине увеличило изображение. Могу ли я изменить размер изображения до размера холста? (что должно соответствовать ширине окна) ....... Размер изображения составляет всего около 300 КБ, но оно все еще вялое, даже на моем новом MacBook Pro Retina с четырехъядерным процессором I7. - person StefCharle; 10.04.2013
comment
Вы уверены, что прочитали достаточно внимательно :) Первые четыре параметра определяют расположение и размер среза на исходном изображении. Последние четыре параметра определяют положение и размер на целевом холсте. - person RecencyEffect; 10.04.2013
comment
Я попробую, когда вернусь домой, и опубликую результаты ... очень ценю, мой друг - person StefCharle; 11.04.2013