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

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

Зеркальный джаваскрипт или делаем отражения без фотошопа

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

ReflectionПоследнее время стало модно использовать в дизайне вэб сайтов эффект отражения. У меня есть небольшие представления как подобный эффект сделать в фотошопе, но за фотошоп я берусь в крайнем случае, если дизайнер в отпуске. :)

Делать отражение мы будем при помощи джаваскрипта, и поможет нам в этом старый добрый Prototype, Script.aculo.us и скрипт Reflector. Преимущество данного способа это скорость. То есть допустим заказчик просит показать как будет выглядеть логотип сайта с отражением и времени на обработку картинки в фотошопе - нету. Ну и конечно большое преимущество, что не нужно вообще уметь работать с графикой, чтобы сделать этот эффект.

И так, приступим.

1) Подгружаем скрипты:

PLAIN TEXT
HTML:
  1. <script src="prototype.js" type="text/javascript"></script>
  2. <script src="scriptaculous.js" type="text/javascript"></script>
  3. <script type="text/javascript" charset="utf-8">
  4.     // <![CDATA[
  5.     var Reflector = {
  6.       reflect: function(element) {
  7.         element = $(element);
  8.         options = $H({
  9.           amount: 1/3,
  10.           opacity: 1/3
  11.         }).merge(arguments[1] || {});
  12.         
  13.         var p = element.parentNode, n = element.nextSibling;
  14.         var d = 1.0/(element.height*options.amount);
  15.           
  16.         (element.height*options.amount).times( function(line) {
  17.           var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
  18.             [Builder.node('img',{src:element.src,
  19.               style:'margin-top:-'+(element.height-line-1)+'px'
  20.             })]);
  21.           p.insertBefore(h,n);
  22.           $(h).setOpacity((1-d*line)*options.opacity);
  23.         });
  24.       }
  25.     }
  26.     // ]]>
  27. </script>

2) Вставляем картинку, к которой надо применить эффект:

PLAIN TEXT
HTML:
  1. <img src="reflect-this.jpg" alt="test" id="reflect-this" />

3) Запускаем скрипт. Как параметр передаём id картинки.

PLAIN TEXT
JavaScript:
  1. Event.observe(window,'load', function(){
  2.   Reflector.reflect('reflect-this');
  3. });

Вот собственно и всё. Результат можно посмотреть по этому адресу: Туториал - отражение с помощью джаваскрипта. У меня получается небольшой артефакт у картинки, которую я выбрал для примера. Не знаю, или это глюк скрипта, или это картинка такая, но например на сайте разработчика всё работает как надо.

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

No comments yet. Be the first.

Leave a reply