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

Программирование, которое не связано с API и Flash.

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

Сообщение alexei » 27 авг 2012, 14:50

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

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

Какую технологию использовать?
За сколько бы Вы это сделали?
http://appslessons.com/ — Мой блог посвященный урокам приложений ВКонтакте
Аватара пользователя
alexei
Разработчик
Разработчик
 
Автор темы
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44
Откуда: Rostov-on-Don
Благодарил (а): 5 раз.
Поблагодарили: 54 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



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

Сообщение alexei » 30 авг 2012, 20:31

Есть идеи?
http://appslessons.com/ — Мой блог посвященный урокам приложений ВКонтакте
Аватара пользователя
alexei
Разработчик
Разработчик
 
Автор темы
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44
Откуда: Rostov-on-Don
Благодарил (а): 5 раз.
Поблагодарили: 54 раз.

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

Сообщение Александр » 30 авг 2012, 20:53

HTML5+JS+CSS3.

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

Простая анимация css background-position не подойдёт?
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

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

Сообщение alexei » 30 авг 2012, 23:27

Александр писал(а):
HTML5+JS+CSS3.

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

Простая анимация css background-position не подойдёт?


Если можно сделать то, что на картинке. То пойдет.
  1.  
  2. 1.   Chrome          60,57
  3. 2.   Firefox           24,00 %
  4. 3.   Opera          12,91 %
  5. 4.   Opera Mini         1,52 %
  6. 5.   Android Browser        0,73 %
  7. 6.   Internet Explorer      0,21 %
  8. 7.   Safari         0,04 %
  9. 8.   IE with Chrome Frame   0,01 %
  10. 9.   SeaMonkey          0,01 %


0.22% могут пострадать.
http://appslessons.com/ — Мой блог посвященный урокам приложений ВКонтакте
Аватара пользователя
alexei
Разработчик
Разработчик
 
Автор темы
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44
Откуда: Rostov-on-Don
Благодарил (а): 5 раз.
Поблагодарили: 54 раз.

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

Сообщение bodnar » 31 авг 2012, 06:35

alexei это откуда такая статистика странная?
Обязательно к прочтению: ActionScript 3.0 Ошибки среды выполнения
Аватара пользователя
bodnar
Модератор
Модератор
 
Сообщения: 1399
Зарегистрирован: 03 апр 2010, 06:41
Благодарил (а): 16 раз.
Поблагодарили: 185 раз.

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

Сообщение alexei » 31 авг 2012, 12:01

bodnar писал(а):alexei это откуда такая статистика странная?

Google Analitics.
http://appslessons.com/ — Мой блог посвященный урокам приложений ВКонтакте
Аватара пользователя
alexei
Разработчик
Разработчик
 
Автор темы
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44
Откуда: Rostov-on-Don
Благодарил (а): 5 раз.
Поблагодарили: 54 раз.

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

Сообщение Asped » 31 авг 2012, 16:36

Нашел :) Может сгодится ;)
  1.  
  2. <canvas id="canvas" height="310" width="500">
  3.     Your browser do not support HTML5
  4. </canvas>
  5.  
  6. <script type="application/javascript">
  7.     canvas = document.getElementById("canvas");
  8.     ctx = canvas.getContext('2d');
  9.     img = new Image();
  10.     img.src = "bg.png";
  11.     img1 = new Image();
  12.     img1.src="wizard.png";
  13.  
  14.     setInterval(movebgnd, 40);
  15.     var x = 0;
  16.     var v = -1;
  17.  
  18.     function movebgnd() {
  19.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  20.         x+=v;
  21.         if (x > 0 || x < -(img.width-canvas.width)) v = -v;
  22.         ctx.drawImage(img,x,0);
  23.         ctx.drawImage(img1,30,200);
  24.     }
  25. </script>
  26.  

Графика:
http://d.pr/i/MSYY
http://d.pr/i/FMqn

За это сообщение автора Asped поблагодарил:
Mihailow_du
Аватара пользователя
Asped
WEB Team
WEB Team
 
Сообщения: 184
Зарегистрирован: 02 янв 2011, 20:34
Откуда: Волгоград
Благодарил (а): 5 раз.
Поблагодарили: 8 раз.

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

Сообщение Asped » 31 авг 2012, 21:56

Аватара пользователя
Asped
WEB Team
WEB Team
 
Сообщения: 184
Зарегистрирован: 02 янв 2011, 20:34
Откуда: Волгоград
Благодарил (а): 5 раз.
Поблагодарили: 8 раз.

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

Сообщение Mihailow_du » 12 окт 2012, 06:58

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

  1. <canvas id="canvas" height="230" width="500">  //размер нашей видимой области
  2.     Извините, но ваш браузер не поддерживает HTML5
  3. </canvas>
  4.  
  5. <script type="application/javascript">
  6.     canvas = document.getElementById("canvas");
  7.     ctx = canvas.getContext('2d');
  8.     img = new Image();
  9.     img.src = "bg.jpg";  //путь к нашему фону
  10.     img1 = new Image();
  11.     img1.src="bg.jpg";  //тот же путь к тому же фону
  12.  
  13.     setInterval(movebgnd, 26);  // где число 26 это скорость движения фона, изменяя его настраиваем скорость
  14.     var x1 = 0;
  15.     var x2 = img1.width;
  16.     var v = -1;
  17.  
  18.     function movebgnd() {
  19.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  20.         x1+=v;
  21.         x2+=v;     
  22.         if (x1 == -(img.width+canvas.width)) {x1 = img1.width-canvas.width};
  23.         if (x2 == -(img1.width+canvas.width)) {x2 = img.width-canvas.width};
  24.         ctx.drawImage(img,x1,0);
  25.         ctx.drawImage(img1,x2,0);
  26.     }
  27. </script>


В моем случае это цилиндрическая панорама размером 1280х233рх (http://saveimg.ru/show-image.php?id=62a ... 237955d2d7)

Принцип такой:
дважды в ряд выстраиваю один и тот же фон и плавно двигаю их в лево, как только первая картинка скрылась за видимой областью - она перекидывается в конец второй.
соответственно как только вторая картинка скрылась за видимой областью она перекидывается в конец первой картинки и т.д. и до бесконечности...
Не идите за мной - я сам заблудился...
Карта/справочник некоторых городов:
http://vk.com/app2170107 <-- входите!
Аватара пользователя
Mihailow_du

 
Сообщения: 63
Зарегистрирован: 24 янв 2012, 18:26
Откуда: Красноярск
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в Программирование на PHP и других языках (без использования API)



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron