Движущийся фон
Движущийся фон
В общем мне надо выполнить примерно, то что на видео. HTML5+JS+CSS3.
Чем больше старых версий браузеров поддерживает, тем лучше.
Нужен оптимальный вариант.
http://vk.com/video5057680_163924673
http://socforge.com/files/20120827_1542_07.swf
Какую технологию использовать?
За сколько бы Вы это сделали?
Чем больше старых версий браузеров поддерживает, тем лучше.
Нужен оптимальный вариант.
http://vk.com/video5057680_163924673
http://socforge.com/files/20120827_1542_07.swf
Какую технологию использовать?
За сколько бы Вы это сделали?
Re: Движущийся фон
Есть идеи?
Re: Движущийся фон
IE<9 не поддерживают.HTML5+JS+CSS3.
Простая анимация css background-position не подойдёт?
Re: Движущийся фон
Если можно сделать то, что на картинке. То пойдет.Александр писал(а):IE<9 не поддерживают.HTML5+JS+CSS3.
Простая анимация 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 %
Re: Движущийся фон
alexei это откуда такая статистика странная?
Re: Движущийся фон
Google Analitics.bodnar писал(а):alexei это откуда такая статистика странная?
Re: Движущийся фон
Нашел Может сгодится
Графика:
http://d.pr/i/MSYY
http://d.pr/i/FMqn
Код: Выделить всё
<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: Движущийся фон
В продолжение темы я хотел сделать бесконечно движущийся один и тот же фон.
Решение получилось вот таким:
В моем случае это цилиндрическая панорама размером 1280х233рх (http://saveimg.ru/show-image.php?id=62a ... 237955d2d7)
Принцип такой:
дважды в ряд выстраиваю один и тот же фон и плавно двигаю их в лево, как только первая картинка скрылась за видимой областью - она перекидывается в конец второй.
соответственно как только вторая картинка скрылась за видимой областью она перекидывается в конец первой картинки и т.д. и до бесконечности...
Решение получилось вот таким:
Код: Выделить всё
<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>
Принцип такой:
дважды в ряд выстраиваю один и тот же фон и плавно двигаю их в лево, как только первая картинка скрылась за видимой областью - она перекидывается в конец второй.
соответственно как только вторая картинка скрылась за видимой областью она перекидывается в конец первой картинки и т.д. и до бесконечности...