Баннер-уголок на jQuery
Среда, 16 сентября 2009
Продолжу свою сагу о подключении к сайту углового баннера. В принципе всё, что хотел уже было написано в предыдущих частях (про flash-баннер, почитать можно тут и тут), но без альтернативной возможности создания подобного баннера на jQuery, рассказ был бы не полным. Исправляюсь.
Собственно, разрабатывать и писать сам скрипт мне не пришлось, так, как нашёл уже готовое и работающее решение в блоге sohtanaka.com (там же подробное описание подключение скрипта к странице и демо).
+ / −
Плюсы: не нужен установленный в браузере flash.
Минусы (для меня не минусы, но все-таки): нужна библиотека jQuery; уголок не «шевелится», когда на него не наведён курсор. Нужен заметный дизайн, чтобы привлечь внимание.
Вредные советы
Я уже успел использовать в jQuery-баннер в одном из своих проектов, поэтому к написанному выше, добавлю пару своих рекомендаций.
1. Если будете использовать анимируемый уголок из архива, протестируйте его анимацию над разным фоном (фотографиями). Так, как у него есть полупрозрачная тень снизу (формат файла PNG-24), то при анимации через прозрачные участки верхнего уголка возможно просвечивание нижнего рекламного рисунка.
Уверен, что те, кто столкнутся — поймут о чем речь.
Как возможное решение проблемы — убрать прозрачную область. Я вообще нарисовал совершенно другой уголок и сохранил в JPEG.
2. Если нужны другие размеры уголка, то нужно изменить значения width и height. Сначала в CSS: в #pageflip img и #pageflip .msg_block. Это начальное состояние уголка, до наведения. И затем в скрипте установить новые параметры «развернутого состояния» (по молчанию 307 и 319 px) и сбросить старые «неразвёрнутого».
3. Для адептов кода: CSS не пройдет валидацию, пока не удалите строку -ms-interpolation-mode: bicubic. Лично я не заметил разницы с этим параметром и без при анимации в Internet Explorer.
Все. Про уголки больше не буду.
Используйте на пользу!
* * *
Сканер блогов:
В тему: плавное увеличение картинки при наведении курсора. SEO-откровения для новичков от Bormaley.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: Баннер-уголок на jQuery
- добавьте статью в закладки:
* * *
Люблю jQuery, но, согласитесь, во флеше естественнее смотрится?
@none, я бы сказал «живее».
Хотя, стоит подходить к выбору, исходя из особенностей проекта.
Во флеше тормозов больше