Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.05.2011, 15:23
Кандидат Javascript-наук
Отправить личное сообщение для ArmagedDance Посмотреть профиль Найти все сообщения от ArmagedDance
 
Регистрация: 07.12.2009
Сообщений: 147

Javascript - резка цельного изображения.
После знакомства с супербиблиотекой на js http://raphaeljs.com
начинаю подозревать, на JS возможно сделать все.
Возникло желание сделать смелую креативную задумку с анимацией на сайте. Но для этого надо понять как реализовать самый сложный ее механизм.

Итак, возможно ли на javascript добиться такого, что заставить цельное изображение (один файл) дробиться на равные доли, квадратики для простоты, с последующей манипуляцией ими.
Дробление - в смысле появление элементов прозрачности на исходном изображении. Либо же полноценное исчезновение фрагментов.
Если да - то в каком направлении двигаться? Html Canvas?

Последний раз редактировалось ArmagedDance, 17.05.2011 в 15:35.
Ответить с цитированием
  #2 (permalink)  
Старый 17.05.2011, 15:49
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

Можно.
Уже полно плагинов под jquery использующие подобный эффект.
Добиться результата можно разными способами, проще всего понять как, это найти пример и разобрать.
Удачи
__________________
.
Ответить с цитированием
  #3 (permalink)  
Старый 17.05.2011, 15:53
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Если картинка ваша (т.е. с вашего сервера), то не вижу повода не порезать её самому на эти квадратики (в пейнте) и дальше не делать всё, что вам нужно, с ними.

Если же вы хотите, чтобы картинку загружал пользователь (зачем?!), то тогда рекомендую AJAX+что-то на сервере+утилита для разрезания изображения на квадраты (где вы её найдёте, интересно...). Вот.

Если я что-то не понял - mea culpa, прошу разъяснений.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #4 (permalink)  
Старый 17.05.2011, 16:07
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

Есть картинка, нам нужно поделить на 10 квадратов.
берём 10 одинаковых картинок каждый в div и накладываем друг на друга, затем из каждого делаем квадратик позиционируя их и обрезаю(margin, overflow, height, width) и составляем одну картинку
__________________
.
Ответить с цитированием
  #5 (permalink)  
Старый 17.05.2011, 16:43
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

Тока не 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
Ответить с цитированием
  #6 (permalink)  
Старый 17.05.2011, 17:22
Кандидат Javascript-наук
Отправить личное сообщение для ArmagedDance Посмотреть профиль Найти все сообщения от ArmagedDance
 
Регистрация: 07.12.2009
Сообщений: 147

Как быть в случае, если картинка генерируется динамически, например, php-скриптом на сервере и нет возможности представить ее вид заранее?
Собственно, я нашупал нужное направление пути - что-то вроде этого.
http://black-zorro.com/mediawiki/П...tml_canvas_-_2
Skipp
Цитата:
Уже полно плагинов под jquery использующие подобный эффект.
Приведите хоть один навскидку?
Ответить с цитированием
  #7 (permalink)  
Старый 17.05.2011, 17:26
Кандидат Javascript-наук
Отправить личное сообщение для ArmagedDance Посмотреть профиль Найти все сообщения от ArmagedDance
 
Регистрация: 07.12.2009
Сообщений: 147

В целом задумка такая - я на сервере динамически создаю скрин сайта данной странички, с нужным разрешением. Как это сделать я уже в курсе. Когда пользователь кликает на определенных кнопках навигации, сайт перекрывается div'ом со скриншотом. И затем происходит недолгий, но очень красивый спецэффект, что-то в духе распада сайта на кусочки и появление обновленной странички. Осталось клиентскую часть кода реализовать.
Aetae Ух ты, я не подумал сделать множество div'ов с одним фоном и колдовать ими...
Впрочем, мне это вряд ли поможет. Так как я хочу реализовать распад скриншота по двум осям сразу, не представляю, как этого можно добиться, манипулируя фоном блоков.

Последний раз редактировалось ArmagedDance, 17.05.2011 в 17:41.
Ответить с цитированием
  #8 (permalink)  
Старый 17.05.2011, 17:47
Кандидат Javascript-наук
Отправить личное сообщение для ArmagedDance Посмотреть профиль Найти все сообщения от ArmagedDance
 
Регистрация: 07.12.2009
Сообщений: 147

все, дошло )
Ответить с цитированием
  #9 (permalink)  
Старый 17.05.2011, 17:52
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

Сообщение от ArmagedDance Посмотреть сообщение
В целом задумка такая - я на сервере динамически создаю скрин сайта данной странички, с нужным разрешением. Как это сделать я уже в курсе. Когда пользователь кликает на определенных кнопках навигации, сайт перекрывается div'ом со скриншотом. И затем происходит недолгий, но очень красивый спецэффект, что-то в духе распада сайта на кусочки и появление обновленной странички. Осталось клиентскую часть кода реализовать.
Не делайте этого.
Изображения:
Тип файла: gif facepalm.gif (274 байт, 29 просмотров)
__________________
29375, 35

Последний раз редактировалось Aetae, 17.05.2011 в 17:55.
Ответить с цитированием
  #10 (permalink)  
Старый 17.05.2011, 18:08
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Aetae,
+1
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[Книга] Stoyan Stefanov, Javascript Patterns Dmitry A. Soshnikov Учебные материалы 20 13.08.2013 11:37
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34
Как передать картинку из javascript в php KIVagant AJAX и COMET 3 12.05.2010 11:54
JavaScript на Яндекс.Фотки - почему тормозит браузеры? ZavFirefox Javascript под браузер 23 27.09.2009 19:24