Эффект лупы на сайте

[tr0nik]

Привет, можно ли сделать такой эффект для ссылки? Знаю для галереи можно с помощью jQuery прикрутить, а вот как на картинке можно, сделать для иконки - ссылки ? 

[Veseloff]

Не очень понятно как именно должно работать. Просто на картинке одно, в «лупе» другое. Откуда что берётся?

[Great Rash]

Можно сделать для всего. Алгоритм такой:

 

Допустим есть два блока - 100 и 1000 пикселей. Представим, что 100 пикселей - это наш сайт (или иконка, или картинка, или пофиг что), а 1000 пикселей - это увеличенная в 10 раз копия нашего контента. Получаем координаты мыши внутри маленького блока (который 100 пикселей) и переводим эти координаты в координаты для большого блока (который 1000 пикселей). Пропорции в каком у нас классе учат? Где-то в пятом-шестом наверное? Вот и решаем задачу на пропорции.

 

20px / 100px = 0.2 (или 20%)

1000px * 0.2 = 200px

 

Получили координаты для большого блока. Т.е. если координата мыши над иконкой равна 20, то надо подвинуть координату на увеличенной иконке на 200.

[tr0nik]

Не очень понятно как именно должно работать. Просто на картинке одно, в «лупе» другое. Откуда что берётся?

Это я не удачный скрин макета сделал, я так понял из макета, что при наведении на определенные части сайта, появляется эта лупа. Еще и в лупе текст появляется

[nerv]

теоретически можно, но это геморой

https://github.com/niklasvh/html2canvas

Откуда что берётся?

из фантазии ТС берется =) Edited October 7, 2014 by nerv

[tr0nik]

Понял)спасибо) покопаюсь)

[Great Rash]

http://codepen.io/GreatRash/pen/AkonH

[Vin]

http://mark-rolich.github.io/Magnifier.js/