Баннер-уголок на jQuery

Баннер-уголок на jQuery

Продолжу свою сагу о подключении к сайту углового баннера. В принципе всё, что хотел уже было написано в предыдущих частях (про 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.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 6

  1. none, 16.09.2009 в 18:15

    Люблю jQuery, но, согласитесь, во флеше естественнее смотрится?

    Ответить

  2. rotor, 16.09.2009 в 18:53

    @none, я бы сказал «живее».

    Хотя, стоит подходить к выбору, исходя из особенностей проекта.

    Ответить

  3. Maslenov.ru, 04.11.2009 в 8:35

    Во флеше тормозов больше

    Ответить

  4. Web сайт, 29.03.2010 в 23:21

    Флеш можно оптимизировать и тормозов не будет

    Ответить

  5. krudger, 17.10.2011 в 9:52

    а где ссылка на архив ...или инструкция на русском ?

    Ответить

  6. отдых, 06.02.2017 в 12:24

    На своем сайте поставил данную реализацию, но через время убрал, флеш не очень

    Ответить

Есть что сказать?