HTML5 анимация веб-страницы

Question

Кто-нибудь знает, как добиться чего-то подобного?

http://teamviget.com/#!lift-off

Я хочу сделать что-то подобное, но я что-то новое в html5 и все такое

Спасибо!

Answer 1

Конечно, вы можете сделать. Прежде всего, вы должны нарисовать фоновое изображение. И предоставьте две кнопки с каждой стороны. При нажатии этих кнопок вы вызываете функцию ... которая вызывает функцию setInterval (), которая анимирует inturn (здесь в вашем случае изображение должно исчезнуть, и должно быть сформировано новое изображение). Для обеспечения эффекта затухания у нас есть популярный параметр. ctx.globalAlpha (). На каждом шаге анимации меняйте его значение. Позвольте мне привести пример кода, чтобы вы могли его правильно понять.

canvas = document.getElementById("canvas");  
ctx = canvas.getContext("2d");
var ms = new Image();      
ms.src = "images/asdf.jpg"
ctx.drawImage(ms,0,0);  // Will draw the initial image (assume)
ctx1 = canvas.getContext("2d");

Теперь позвольте мне определить функцию onclick.

onclick="caller()";

Функция вызова должна быть сделана для вызова функции animate

function caller()
{
   i=1;
   inter=setInterval(animate(),500); // Calls the animate function every 500 msec
}

И функция анимации будет выглядеть так, как показано ниже

function animate()
{
   i=i-0.1; 
   ctx1.globalAlpha=i;

   if(i=0)
   {
        clearInterval(inter);
        ctx1.drawImage(ms2,0,0);  // This will draw the next image defined in ms2.
   }
} 

Таким образом, изображение исчезнет, ​​и через 5 секунд появится новое изображение. Используйте массив, если у вас есть несколько изображений, и определенно javascipts поможет вам реализовать их так, как вы хотите. Дайте мне знать, если вам нужны дополнительные разъяснения по проблеме SPECIFIC , с которой вы столкнулись.