Страница 1 из 1
Движущийся фон
Добавлено: 27 авг 2012, 14:50
alexei
В общем мне надо выполнить примерно, то что на видео. HTML5+JS+CSS3.
Чем больше старых версий браузеров поддерживает, тем лучше.
Нужен оптимальный вариант.
http://vk.com/video5057680_163924673
http://socforge.com/files/20120827_1542_07.swf
Какую технологию использовать?
За сколько бы Вы это сделали?
Re: Движущийся фон
Добавлено: 30 авг 2012, 20:31
alexei
Есть идеи?
Re: Движущийся фон
Добавлено: 30 авг 2012, 20:53
Александр
HTML5+JS+CSS3.
IE<9 не поддерживают.
Простая анимация css background-position не подойдёт?
Re: Движущийся фон
Добавлено: 30 авг 2012, 23:27
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% могут пострадать.
Re: Движущийся фон
Добавлено: 31 авг 2012, 06:35
bodnar
alexei это откуда такая статистика странная?
Re: Движущийся фон
Добавлено: 31 авг 2012, 12:01
alexei
bodnar писал(а):alexei это откуда такая статистика странная?
Google Analitics.
Re: Движущийся фон
Добавлено: 31 авг 2012, 16:36
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
Re: Движущийся фон
Добавлено: 31 авг 2012, 21:56
Asped
Re: Движущийся фон
Добавлено: 12 окт 2012, 06:58
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)
Принцип такой:
дважды в ряд выстраиваю один и тот же фон и плавно двигаю их в лево, как только первая картинка скрылась за видимой областью - она перекидывается в конец второй.
соответственно как только вторая картинка скрылась за видимой областью она перекидывается в конец первой картинки и т.д. и до бесконечности...