Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Curl эффект - как загнуть угол у картинки без фотошопа

September 19th, 2007 | Category: Javascript, Tutorial, Дизайн | Автор: Александр

curl.js logoЯ уже писал как можно делать зеркальные отражения картинок при помощи джаваскрипта. Сегодня статья из этой же серии - для программистов которые не хотят возится с фотошопом. На этот раз мы будем загибать углы у картинок, и создадим такой своеобразный 3D эффект. Пример эффекта можно посмотреть например на Flickr, или наберите в гугле "curl effect".

Для туториала нам понадобится одна картинка и два джаваскрипт файла из комплекта curl.js (по этому адресу можно почитать документацию и посмотреть другие примеры использования).

Нашёл на Flickr вот такую медузу, дал ей id="jellyfish" и сейчас мы будем у неё загибать уголки.

Jellyfish

Добавляем js файлы:

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="cvi_curl_lib.js"></script>
  2. <script type="text/javascript" src="curl.js"></script>


Теперь я напишу скрипт, который будет загибать уголок у картинки. Сделаю это на этот раз без помощи прототайпа :)

PLAIN TEXT
JavaScript:
  1. var jellyfish = document.getElementById('jellyfish');
  2. jellyfish.onclick = function(e){cvi_curl.add(this, {size: 80 });}

Вот и всё. На картинку теперь можно кликнуть и один из углов у неё загнётся.

del.icio.us Забобрить!

5 Comments so far

  1. Dimonuch September 19th, 2007 08:43

    Кликнул на картинку. Она не загнулась :) зато пропала напрочь. Браузер ИЕ6

  2. Aleksandr September 19th, 2007 08:46

    попробовал в IE6. всё работает :)

  3. Dr.eVil November 28th, 2007 15:53

    У меня скрипт не работает в Firefox/2.0.0.10

  4. Aleksandr November 29th, 2007 10:41

    У меня тоже перестал работать

  5. Dimas June 9th, 2008 09:14

    Заметил я тут недавно у Safari и IE 7-8 такую особенность - при низкой скорости инета он отказываются догружать картинки и части скриптов(я имею ввиду объемных типа библиотеки JQuery). В Opera такого не разу не встречал.
    Так вот - после трех обновлений страниц у меня все зароботало и в IE и Safari.

Leave a reply