Javascript - резка цельного изображения.
После знакомства с супербиблиотекой на js http://raphaeljs.com
начинаю подозревать, на JS возможно сделать все. Возникло желание сделать смелую креативную задумку с анимацией на сайте. Но для этого надо понять как реализовать самый сложный ее механизм. Итак, возможно ли на javascript добиться такого, что заставить цельное изображение (один файл) дробиться на равные доли, квадратики для простоты, с последующей манипуляцией ими. Дробление - в смысле появление элементов прозрачности на исходном изображении. Либо же полноценное исчезновение фрагментов. Если да - то в каком направлении двигаться? Html Canvas? |
Можно.
Уже полно плагинов под jquery использующие подобный эффект. Добиться результата можно разными способами, проще всего понять как, это найти пример и разобрать. Удачи |
Если картинка ваша (т.е. с вашего сервера), то не вижу повода не порезать её самому на эти квадратики (в пейнте) и дальше не делать всё, что вам нужно, с ними.
Если же вы хотите, чтобы картинку загружал пользователь (зачем?!), то тогда рекомендую AJAX+что-то на сервере+утилита для разрезания изображения на квадраты (где вы её найдёте, интересно...). Вот. Если я что-то не понял - mea culpa, прошу разъяснений. |
Есть картинка, нам нужно поделить на 10 квадратов.
берём 10 одинаковых картинок каждый в div и накладываем друг на друга, затем из каждого делаем квадратик позиционируя их и обрезаю(margin, overflow, height, width) и составляем одну картинку |
Тока не 10 одинаковых. А одну background'ом с разными background-position в 10 div'ов.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {background-image:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif); width:336px; height:11px; position:relative}
</style>
</head>
<body>
<div style="background-position:0 0px"></div>
<div style="background-position:0 -11px"></div>
<div style="background-position:0 -22px"></div>
<div style="background-position:0 -33px"></div>
<div style="background-position:0 -44px"></div>
<div style="background-position:0 -55px"></div>
<div style="background-position:0 -66px"></div>
<script>
d=document.getElementsByTagName('div');
(function(){
d[Math.floor(Math.random()*d.length)].style.left=Math.floor(Math.random()*10)-5+'px';
setTimeout(arguments.callee,50)
})()
</script>
</body>
</html>
|
Как быть в случае, если картинка генерируется динамически, например, php-скриптом на сервере и нет возможности представить ее вид заранее?
Собственно, я нашупал нужное направление пути - что-то вроде этого. http://black-zorro.com/mediawiki/П...tml_canvas_-_2 Skipp Цитата:
|
В целом задумка такая - я на сервере динамически создаю скрин сайта данной странички, с нужным разрешением. Как это сделать я уже в курсе. Когда пользователь кликает на определенных кнопках навигации, сайт перекрывается div'ом со скриншотом. И затем происходит недолгий, но очень красивый спецэффект, что-то в духе распада сайта на кусочки и появление обновленной странички. Осталось клиентскую часть кода реализовать.
Aetae Ух ты, я не подумал сделать множество div'ов с одним фоном и колдовать ими... :) Впрочем, мне это вряд ли поможет. Так как я хочу реализовать распад скриншота по двум осям сразу, не представляю, как этого можно добиться, манипулируя фоном блоков. |
все, дошло :))
|
Вложений: 1
Цитата:
|
Aetae,
+1 |
| Часовой пояс GMT +3, время: 06:07. |