Баннер в виде уголка перелистываемой страницы

Делаем оригинальный баннер. Выглядит он, как отогнутая страница справа вверху страницы, а за ним проглядывает другая страница. Когда пользователь подводит курсор к этому краю, страница начинает анимированно отгибаться, а за ней открывается часть другой страницы. При щелчке по второй странице происходит переход на другой сайт или страницу. Выглядит это все завораживающе и необычно.

В основе скрипта лежат файлы сборки Esel.

Код немного переделан. Сейчас он позволяет передавать основные параметры прямо с кода страницы. При желании можно использовать файлы с нашего портала. Если хотите разместить файлы у себя на хосте, тогда нужно будет скопировать 3 файла:

• http://szenprogs.ru/flash/esel_s.swf
• http://szenprogs.ru/flash/esel_b.swf
• http://szenprogs.ru/scripts/esel.js

Эти файлы можете разместить где Вам угодно. Только не забудьте путь размещения.

После этого начинается обязательная программа. Нужно создать 2 изображения. Одно маленькое, желательно размером 100x100 пикселей. Это изображение будет проглядывать в углу сайта. Второе изображение большое. Размер, желательно 650x650 пикселей. Это изображение будет видно, когда угол отогнется до конца. Все эти изображения нужно, также, разместить у себя на хосте.

Далее, нужно разместить код на странице. Местоположение особой роли не играет:

Настраиваете передаваемые параметры под себя:

• esel_small - адрес маленького изображения.
• esel_big - адрес большого изображения.
• esel_url - ссылка на страницу, на которую будет происходить переход по клику на баннере.
• esel_s - адрес файла esel_s.swf. Если Вы используете файлы с нашего хоста, тогда переменную можно не задавать.
• esel_b - адрес файла esel_b.swf. Если Вы используете файлы с нашего хоста, тогда переменную можно не задавать.
• http://szenprogs.ru/scripts/esel.js - адрес js-скрипта. Если вы скопировали его на свой хост, то нужно заменить на свой адрес.

После настройки под себя можно наслаждаться работой скрипта. Теперь и у Вас в правом верхнем углу страницы будет отгибающийся уголок. С изображениями придется немного пожонглировать, чтобы отображалось именно то, что нужно. Но это уже мелочи жизни.

Этот скрипт "отгибающегося уголка" вы можете использовать, как баннер на определенный, рекламируемый сайт, как особый переход к определенному файлу или просто навигационное решение. Задание параметров из кода страницы дает более широкие возможности, чем размещение переменных в самом скрипте js.

Пример реализации "углового баннера", как и принято на нашем портале, можно увидеть на этой же странице.

Удачи всем!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

• 1
• 2
• 3
• 4
• 5

Баннер в виде уголка перелистываемой страницы
Скрипты
Скрипты, инструкции, справочники