| |
|
|
| | Не подскажете как это сделано и как это можно реализовать?
Аватарки зеркаляться!
Вот тута:
http://pocket-video.net/2006/12/05/tajjny_smolvilja__smallville__season_2.html#comment
Просто дико интересно | |
| |
|
|
| |
|
|
| |
для: strelok
(11.02.2007 в 19:59)
| | | Вообще-то это легко делается на фильтрах в DHTML и ява-скрипт. | |
| |
|
|
| |
|
|
| |
для: coloboc66
(11.02.2007 в 20:49)
| | | А примерчик можно? | |
| |
|
|
| |
|
|
| |
для: strelok
(11.02.2007 в 19:59)
| | | А залезть в исходный код желания не возникало?
http://pocket-video.net/engine/ajax/reflection.js | |
| |
|
|
| |
автор: user1313 (16.02.2007 в 12:22) |
|
| |
для: Саня
(11.02.2007 в 22:10)
| | | А можно по данной теме пример с применением данного скрипта reflection.js | |
| |
|
|
| |
|
|
| |
для: user1313
(16.02.2007 в 12:22)
| | | А что это вообще за ссылка такая странная?! Пример работы кода где можно увидеть? Или хоть описание какое-то... | |
| |
|
|
| |
|
|
| |
для: coloboc66
(16.02.2007 в 13:22)
| | | ссылка на сайт где это применяют!
Но только не понятно как это сделать... | |
| |
|
|
| |
|
|
| |
для: strelok
(26.02.2007 в 23:18)
| | | Там же всё написано :)
/* Copy original image's classes & styles to div */
d.className = newClasses;
p.className = 'reflected';
d.style.cssText = p.style.cssText;
p.style.cssText = ' ';
if (document.all && !window.opera) {
var reflection = document.createElement('img');
reflection.src = p.src;
reflection.style.width = reflectionWidth+'px';
reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='
+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='
+(options['height']*100)+')';
d.style.width = reflectionWidth+'px';
d.style.height = divHeight+'px';
p.parentNode.replaceChild(d, p);
d.appendChild(p);
d.appendChild(reflection);
} else {
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
canvas.style.height = reflectionHeight+'px';
canvas.style.width = reflectionWidth+'px';
canvas.height = reflectionHeight;
canvas.width = reflectionWidth;
d.style.width = reflectionWidth+'px';
d.style.height = divHeight+'px';
p.parentNode.replaceChild(d, p);
d.appendChild(p);
d.appendChild(canvas);
context.save();
context.translate(0,image.height-1);
context.scale(1,-1);
context.drawImage(image, 0, 0, reflectionWidth, image.height);
context.restore();
context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
context.fillStyle = gradient;
if (navigator.appVersion.indexOf('WebKit') != -1) {
context.fill();
} else {
context.fillRect(0, 0, reflectionWidth, reflectionHeight*2);
}
}
|
Для IE - фильтр с переменной прозрачностью (такое свойство фильтра редко где описывается). Для правильных - canvas. А перед этим (см. код reflection.js) в созданный объект р (image), наверное, заносится копия рисунка. В любом случае, достаточно прикрутить этот скрипт к своей странице с рисунками класса "reflect" (см. код reflection.js), а потом модифицировать на своё усмотрение. | |
| |
|
|
