Запускаете очень простую, цикличную анимацию на сайте?

Question

Я хочу сделать анимацию, которая запускается, как только кто-то заходит на мой сайт и все загружается (может ли jQuery это сделать?) В основном все будет статичным, за исключением маленьких черных силуэтов листьев.

Подумайте об очень упрощенной версии анимации сайта Blizzard: http://us.blizzard.com/en-us/

Просто простой силуэт по простой траектории, почти прямой, с небольшими вариациями. Он пойдет перед большим белым объектом.

Спасибо.

Answer 1

Это определенно выполнимо, хотя и немного сложно. Я делаю то же самое на сайте, который делаю, за исключением снега. Есть 2 слоя png файлов, и я использовал плагин backgroundPosition, чтобы animate мог изменять положение фона - http://cornerstonegreentraining.com/comfortize.com/index.php, если вы хотите увидеть черновик. Переменная скорость только потому, что мне нравится работать в секундах, а не в миллисекундах. Я использовал следующий код:

$(function(){
 bgSnow(100000, 1);
 function bgSnow(animateTime, ratio){
        var speed = 1000;
        $('#snow2').animate({
              backgroundPosition:"(" + speed*15*ratio + "px "+ speed*15 +"px)"
        }, animateTime, 'linear');
        $('#snow1').animate({
               backgroundPosition:"(" + speed*6*ratio + "px "+ speed*4 +"px)"
        }, animateTime, 'linear', function(){
        clearSnow(animateTime, ratio);              
        });
 }
 function clearSnow(animateTime, ratio){
        $('#snow1, #snow2').css('backgroundPosition',"0px 0px");
        bgSnow(animateTime, ratio);
 }
});

Вы можете добавить еще пару анимаций разной продолжительности для некоторых вариаций. Это решение работает с IE7 - вам придется искать выход, если вы используете решение css3 или canvas.

Answer 2

Существует несколько способов сделать это.

1. Если вы анимируете что-либо в очереди анимации, например, позиции, цвета, цвета фона, поля, размеры шрифта и т. Д.Вы можете использовать функцию animate () JQuery.Таким образом, вы можете анимировать положение, ширину и высоту имеющихся у вас HTML-элементов, для которых вы хотите создать силуэт.Вы можете прочитать больше об объекте animate здесь - http://api.jquery.com/animate/

2. Используя преобразования CSS3, вы можете выполнить множество операций масштабирования и преобразования для ваших элементов HTML.Вот хорошее место, чтобы начать, чтобы узнать больше - http://css3.bradshawenterprises.com/. Вот еще один плагин, который помогает в анимации CSS3 - http://ricostacruz.com/jquery.transit/

3. Вы также можете запускать анимации, используя элемент canvas - http://www.html5canvastutorials.com/. Элемент canvas можно использовать для простой и сложной анимации.Для более сложной 3D-анимации есть отличная галерея - http://mrdoob.github.com/three.js/

4. Если вам нужна векторная графика и анимация для этих векторов, вы также можете использовать SVG.Кит Вуд создал для этого плагин Jquery - http://keith -wood.name / svg.html

Есть также множество других плагинов и JavaScript /Библиотеки JQuery, которые могут помочь в создании анимации.

Если вы хотите разместить анимацию над изображением или фоном, вам необходимо настроить HTML-код следующим образом:

<div class='container'>
    <div class='gallery'>
        <div id='item1'></div>
        <div id='item2'></div>
        <div id='item3'></div>
    </div>
</div>

.установите фон в классе 'container' и запустите галерею JQuery в классе 'gallery', чтобы переключаться между различными имеющимися у вас дочерними элементами #item.Например,вы можете использовать плагин JQuery Cycle - http://jquery.malsup.com/cycle/ - в разделе "галерея" и внутри каждого элемента #item размещать анимированные элементы.Помните, что z-индекс анимированных элементов должен быть выше, чем у родительского контейнера.

Blizzard использует Flash-модуль для анимации.Вы можете загрузить всю анимацию через JQuery, используя:

1. $ (window) .load () - запускается, когда весь контент загружен и является стандартной функцией Javascript.

2. $ (document) .ready () - запускается, когда документ HTML загружен и относится к JQuery.

Существует несколько способовделать то, что вы хотите достичь, и в зависимости от ваших требований, один метод может работать или нет.Важно учитывать аспект z-index, поскольку анимированные элементы должны отображаться над нижними уровнями.

Надеюсь, это поможет.