17.05.2011, 15:23
|
|
Кандидат Javascript-наук
|
|
Регистрация: 07.12.2009
Сообщений: 147
|
|
|
Javascript - резка цельного изображения.
После знакомства с супербиблиотекой на js http://raphaeljs.com
начинаю подозревать, на JS возможно сделать все.
Возникло желание сделать смелую креативную задумку с анимацией на сайте. Но для этого надо понять как реализовать самый сложный ее механизм.
Итак, возможно ли на javascript добиться такого, что заставить цельное изображение (один файл) дробиться на равные доли, квадратики для простоты, с последующей манипуляцией ими.
Дробление - в смысле появление элементов прозрачности на исходном изображении. Либо же полноценное исчезновение фрагментов.
Если да - то в каком направлении двигаться? Html Canvas?
Последний раз редактировалось ArmagedDance, 17.05.2011 в 15:35.
|
|
17.05.2011, 15:49
|
 |
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
|
Можно.
Уже полно плагинов под jquery использующие подобный эффект.
Добиться результата можно разными способами, проще всего понять как, это найти пример и разобрать.
Удачи
__________________
.
|
|
17.05.2011, 15:53
|
 |
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
|
Если картинка ваша (т.е. с вашего сервера), то не вижу повода не порезать её самому на эти квадратики (в пейнте) и дальше не делать всё, что вам нужно, с ними.
Если же вы хотите, чтобы картинку загружал пользователь (зачем?!), то тогда рекомендую AJAX+что-то на сервере+утилита для разрезания изображения на квадраты (где вы её найдёте, интересно...). Вот.
Если я что-то не понял - mea culpa, прошу разъяснений.
|
|
17.05.2011, 16:07
|
|
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
|
Есть картинка, нам нужно поделить на 10 квадратов.
берём 10 одинаковых картинок каждый в div и накладываем друг на друга, затем из каждого делаем квадратик позиционируя их и обрезаю(margin, overflow, height, width) и составляем одну картинку
__________________
.
|
|
17.05.2011, 16:43
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,495
|
|
Тока не 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>
__________________
29375, 35
|
|
17.05.2011, 17:22
|
|
Кандидат Javascript-наук
|
|
Регистрация: 07.12.2009
Сообщений: 147
|
|
Как быть в случае, если картинка генерируется динамически, например, php-скриптом на сервере и нет возможности представить ее вид заранее?
Собственно, я нашупал нужное направление пути - что-то вроде этого.
http://black-zorro.com/mediawiki/П...tml_canvas_-_2
Skipp
|
Цитата:
|
|
Уже полно плагинов под jquery использующие подобный эффект.
|
Приведите хоть один навскидку? |
|
17.05.2011, 17:26
|
|
Кандидат Javascript-наук
|
|
Регистрация: 07.12.2009
Сообщений: 147
|
|
В целом задумка такая - я на сервере динамически создаю скрин сайта данной странички, с нужным разрешением. Как это сделать я уже в курсе. Когда пользователь кликает на определенных кнопках навигации, сайт перекрывается div'ом со скриншотом. И затем происходит недолгий, но очень красивый спецэффект, что-то в духе распада сайта на кусочки и появление обновленной странички. Осталось клиентскую часть кода реализовать.
Aetae Ух ты, я не подумал сделать множество div'ов с одним фоном и колдовать ими... 
Впрочем, мне это вряд ли поможет. Так как я хочу реализовать распад скриншота по двум осям сразу, не представляю, как этого можно добиться, манипулируя фоном блоков.
Последний раз редактировалось ArmagedDance, 17.05.2011 в 17:41.
|
|
17.05.2011, 17:47
|
|
Кандидат Javascript-наук
|
|
Регистрация: 07.12.2009
Сообщений: 147
|
|
все, дошло ) |
|
17.05.2011, 17:52
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,495
|
|
Сообщение от ArmagedDance
|
|
В целом задумка такая - я на сервере динамически создаю скрин сайта данной странички, с нужным разрешением. Как это сделать я уже в курсе. Когда пользователь кликает на определенных кнопках навигации, сайт перекрывается div'ом со скриншотом. И затем происходит недолгий, но очень красивый спецэффект, что-то в духе распада сайта на кусочки и появление обновленной странички. Осталось клиентскую часть кода реализовать.
|
Не делайте этого.
__________________
29375, 35
Последний раз редактировалось Aetae, 17.05.2011 в 17:55.
|
|
17.05.2011, 18:08
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
|
Aetae,
+1
|
|
|
|
