Разрушение элемента, отправка фигур в случайных направлениях

Я пытаюсь «разбить» элемент - скажем, например, изображение - и отправить частички, летящие в случайных направлениях. Когда куски достигают места назначения (то есть x расстояние в пикселях), они становятся меньшими версиями исходного изображения. Эффект jQuery UI's explode недостаточен тем, что он не выполняет рандомизацию направления, и он разбивает части одинаково (т. е. должен делиться на идеальный квадрат).Разрушение элемента, отправка фигур в случайных направлениях

я нашел this JSFiddle, и я понимаю, как это работает - это оборачивает каждую букву «нажмите здесь» в <span> тегах, а затем оживляет посылая их в разных направлениях при масштабировании их размеров шрифта и выцветания их, - но у меня нет Идея, как адаптировать что-то подобное к одному элементу/изображению, содержимое которого невозможно обрезать таким образом.

$o.html($o.text().replace(/([\S])/g, "<span>$1</span>")); 
    $o.css("position", "relative"); 
    $("span", $o).each(function(i) { 
    var newTop = Math.floor(Math.random()*500)*((i%2)?1:-1); 
    var newLeft = Math.floor(Math.random()*500)*((i%2)?1:-1); 

    $(this).css({position: "relative", 
     opacity: 1, 
     fontSize: 12, 
     top: 0, 
     left: 0 
    }).animate({ 
     opacity: 0, 
     fontSize: 84, 
     top: newTop, 
     left:newLeft 
    },1000); 
    });

Любая идея о том, как сделать то, что я имею в виду? Не искать решения обязательно; просто полезная рука, чтобы вести меня.

источник

2014-01-05 daveycroqet

См. Http://stackoverflow.com/questions/13894066/html-5-shattering-text-effect-and-re-assembling-text-back для вдохновения. –

Не совсем то, что я искал, но спасибо тем не менее. – daveycroqet

Вы должны будете отобразить свои элементы на холсте, который затем можно «разрезать» и взорваться. Вы можете прочитать об оказании на холст здесь:

Rendering HTML elements to <canvas>

источник

2014-01-05 08:02:35 ColinE

html2canvas неправильно реплицировал элементы, даже когда я разрешил заражение документа. Не похоже, что в настоящее время я ищу. Или, если это так, это намного выше моей головы, мне нужно переосмыслить мой подход. Несмотря ни на что, я ценю ответ. – daveycroqet

Я работал на маленькую библиотеке JavaScript разделить изображение: Shatter.js

Это приведет вас на полпути. Вам просто нужно добавить свою собственную физику/гравитацию, чтобы получившиеся изображения взорвались во всех направлениях.

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

источник

2014-05-28 14:23:31 Cory

Разрушение элемента, отправка фигур в случайных направлениях

ответ

Смежные вопросы