Движущийся фон

Программирование, которое не связано с API.
Ответить
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Движущийся фон

Сообщение alexei »

В общем мне надо выполнить примерно, то что на видео. HTML5+JS+CSS3.
Чем больше старых версий браузеров поддерживает, тем лучше.
Нужен оптимальный вариант.

http://vk.com/video5057680_163924673
http://socforge.com/files/20120827_1542_07.swf

Какую технологию использовать?
За сколько бы Вы это сделали?
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Re: Движущийся фон

Сообщение alexei »

Есть идеи?
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: Движущийся фон

Сообщение Александр »

HTML5+JS+CSS3.
IE<9 не поддерживают.

Простая анимация css background-position не подойдёт?
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Re: Движущийся фон

Сообщение alexei »

Александр писал(а):
HTML5+JS+CSS3.
IE<9 не поддерживают.

Простая анимация css background-position не подойдёт?
Если можно сделать то, что на картинке. То пойдет.

Код: Выделить всё

 1.   Chrome          60,57 % 2.   Firefox           24,00 %3.   Opera          12,91 %4.   Opera Mini         1,52 %5.   Android Browser        0,73 %6.   Internet Explorer      0,21 %7.   Safari         0,04 %8.   IE with Chrome Frame   0,01 %9.   SeaMonkey          0,01 %
0.22% могут пострадать.
Аватара пользователя
bodnar
Модератор
Модератор
Сообщения: 1399
Зарегистрирован: 03 апр 2010, 06:41

Re: Движущийся фон

Сообщение bodnar »

alexei это откуда такая статистика странная?
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Re: Движущийся фон

Сообщение alexei »

bodnar писал(а):alexei это откуда такая статистика странная?
Google Analitics.
Аватара пользователя
Asped
WEB Team
WEB Team
Сообщения: 184
Зарегистрирован: 02 янв 2011, 20:34

Re: Движущийся фон

Сообщение Asped »

Нашел :) Может сгодится ;)

Код: Выделить всё

 <canvas id="canvas" height="310" width="500">    Your browser do not support HTML5</canvas> <script type="application/javascript">    canvas = document.getElementById("canvas");    ctx = canvas.getContext('2d');    img = new Image();    img.src = "bg.png";    img1 = new Image();    img1.src="wizard.png";     setInterval(movebgnd, 40);    var x = 0;    var v = -1;     function movebgnd() {        ctx.clearRect(0, 0, canvas.width, canvas.height);        x+=v;        if (x > 0 || x < -(img.width-canvas.width)) v = -v;        ctx.drawImage(img,x,0);        ctx.drawImage(img1,30,200);     }</script> 
Графика:
http://d.pr/i/MSYY
http://d.pr/i/FMqn
Аватара пользователя
Mihailow_du
Сообщения: 63
Зарегистрирован: 24 янв 2012, 18:26

Re: Движущийся фон

Сообщение Mihailow_du »

В продолжение темы я хотел сделать бесконечно движущийся один и тот же фон.
Решение получилось вот таким:

Код: Выделить всё

<canvas id="canvas" height="230" width="500">  //размер нашей видимой области    Извините, но ваш браузер не поддерживает HTML5</canvas> <script type="application/javascript">    canvas = document.getElementById("canvas");    ctx = canvas.getContext('2d');    img = new Image();    img.src = "bg.jpg";  //путь к нашему фону    img1 = new Image();    img1.src="bg.jpg";  //тот же путь к тому же фону     setInterval(movebgnd, 26);  // где число 26 это скорость движения фона, изменяя его настраиваем скорость    var x1 = 0;    var x2 = img1.width;    var v = -1;     function movebgnd() {        ctx.clearRect(0, 0, canvas.width, canvas.height);        x1+=v;        x2+=v;              if (x1 == -(img.width+canvas.width)) {x1 = img1.width-canvas.width};        if (x2 == -(img1.width+canvas.width)) {x2 = img.width-canvas.width};        ctx.drawImage(img,x1,0);        ctx.drawImage(img1,x2,0);    }</script>
В моем случае это цилиндрическая панорама размером 1280х233рх (http://saveimg.ru/show-image.php?id=62a ... 237955d2d7)

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