Я столкнулся с действительно резким вступительным эффектом, который я хотел бы попробовать создать в jQuery, mootools или прототипе: http: / /www.johndigweed.com/ (только вращение в действии) Итак, в некотором смысле, я хочу включить в основной контент div страницы.

Любые предложения, чтобы начать или есть базовые плагины, которые помогают достичь этого вступительного эффекта вне флэш-памяти? Или этот эффект вообще возможно сделать с помощью JavaScript?

Я нуб с JavaScript, так что большое спасибо!

1
Mikey1980 4 Сен 2010 в 16:00

3 ответа

Лучший ответ

Это не будет работать на каждом сайте и в любом браузере, но это только начало:

var i = -90,
    ii = -900,
    timer,
    body = jQuery("body");

function rotation() {
    body.css({
        '-moz-transform': 'rotate('+(i++)+'deg)',
        top: (ii+=10) + "px"
    });
    if(i>0){
        clearInterval(timer);
    }
}

body.css({
    '-moz-transform': 'rotate('+i+'deg)',
    top: ii+"px",
    position: "absolute"
});

timer = setInterval(function(){rotation();}, 100);
2
jerone 4 Сен 2010 в 13:42

Как правило, предполагайте, что что-то возможно, пока вы не получите сотрясение мозга со столом.

В любом случае, можно делать анимацию на основе javascript, простые вещи уже реализованы в jQuery и т. П. (Слайды, затухания и т. Д.)

Мои первые исследования привели к выводу, что такая анимация в настоящее время возможна только в браузерах webkit (и IE, использующих совершенно другой метод и линейную алгебру). Существует стиль webkit под названием -webkit-transform, который имеет значение 'rotate ()'

Вы можете установить вращение (используя jQuery здесь, потому что это то, что я знаю) следующим образом:

jQuery("#div").css('-webkit-transform', 'rotate(20deg)')

Бит deg важен, иначе он не работает (вы также можете использовать радианы, используя rad вместо deg)

Помните, что это будет работать только в браузерах WebKit, то есть в Safari и Chrome. У Mozilla может быть похожий метод, который вы можете использовать.

1
Aatch 4 Сен 2010 в 12:23

Для этого вы можете использовать следующий плагин jQuery.

http://code.google.com/p/jquery-rotate/

После того, как вы включите jQuery и этот плагин, вы можете просто сделать что-то вроде:

function rotation() {
    //being #theimage the element id that you want to rotate
    $('#theimage').rotateRight(45);
}

$("document").ready(function(){
    setInterval("rotation()",1000);
});

Этот код очень прост для понимания. После того, как документ готов (DOM готов), вы просто будете вызывать функцию rotation() каждую 1 секунду. И каждый раз, когда выполняется вращение, вы поворачиваете изображение на 45 градусов.

Это даже проще сделать с помощью HTML5 canvas. Если вы хотите, я могу опубликовать код для этого.

1
Yi Jiang 4 Сен 2010 в 13:18