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

Скрипты

Рисунок Баннер в виде уголка перелистываемой страницы
Баннер в виде уголка перелистываемой страницы Баннер в виде уголка перелистываемой страницы
оценка: 4.1 из 5
оценок: 22, отзывов: 21

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

В основе скрипта лежат файлы сборки 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 пикселей. Это изображение будет видно, когда угол отогнется до конца. Все эти изображения нужно, также, разместить у себя на хосте.

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

Code
<script type="text/javascript">
  esel_small = 'http://szenprogs.ru/images/esel/small.jpg';
  esel_big = 'http://szenprogs.ru/images/esel/big.jpg';
  esel_url = 'http://szenprogs.ru/load/26-1-0-137';
  esel_s = 'http://szenprogs.ru/flash/esel_s.swf';
  esel_b = 'http://szenprogs.ru/flash/esel_b.swf';
</script>
<script type="text/javascript" src="http://szenprogs.ru/scripts/esel.js"></script>

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

  • 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




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

rss
Категория:Скрипты
Просмотрено:15848
Рейтинг:4.1/22
Дата добавления:2009-07-27 01:40, Понедельник
Добавил:Szen
Теги:баннер, уголок, JavaScript, перелистывание

Мини-форум

1-10 11-20 21-21
№ 02009-07-27 01:40
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Баннер в виде уголка перелистываемой страницы".
Гость
№ 1
2009-09-22 16:25
kick
Аватар участника kick
Прикольный скрипт...у меня единственный вопрос: а где скачать файлы, чтобы залить их себе на сайт?
Я имею ввиду эти:
* http://szenprogs.ru/flash/esel_s.swf
* http://szenprogs.ru/flash/esel_b.swf
* http://szenprogs.ru/scripts/esel.js
Роман
№ 2
2009-09-22 17:11
kick
Аватар участника kick
...а если точнее, то первые два .swf
Спасибо огромное за скрипт, он мне очень поможет.
Роман
№ 3
2009-09-22 17:59
Szen
Аватар участника Szen
kick, это и есть пути к файлам. Скопируйте путь и вставьте его в строку адреса браузера. Когда загрузится до конца, сделайте "сохранить".
Szen · WWW
№ 4
2009-09-24 18:58
kick
Аватар участника kick
Ну в принципе у меня и свашими путями работает)))ток иногда подглючивает маленько))а так прикольно. Еще раз спасибо
Роман
№ 5
2009-09-24 19:00
kick
Аватар участника kick
Точно...чет я сразу не додумался в браузере меню файл открыть))
Роман
№ 6
2009-10-04 13:04
XxRaviLxX
Аватар участника XxRaviLxX
Можно ли сделать чтоб угол побольше отогнут был, изночально? И как это сделать?
XxRaviLxX · WWW
№ 7
2009-10-04 14:22
Szen
Аватар участника Szen
XxRaviLxX, такое невозможно, ибо это swf. Если только вы знаток Flash анимации и можете переделать его сами.
Szen · WWW
№ 8
2009-10-23 20:44
kick
Аватар участника kick
Хм... А как под IE его настроить. У меня почему то на Вашем сайте скрипт в IE работает, а [b]на моем[/b] нет...
Роман
№ 9
2009-10-23 21:00
Szen
Аватар участника Szen
kick, установите флеш-плеер для IE! Флеш-плеер ствится для каждого браузера свой.
И засветите свой сайт. Я хочу посмотреть.
Szen · WWW
№ 10
2009-10-23 21:19
kick
Аватар участника kick
_http://data.my1.ru
Я то могу установить,(только мне лично он не нужен у меня Firefox) но у остальных то работать не будет ведь...
Роман
1-10 11-20 21-21
Учавствовать в обсуждении "Баннер в виде уголка перелистываемой страницы" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Зарегистрированных посетителей не было.
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Во сколько оцените портал
Всего ответов: 1935
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 3
Гостей: 3
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2018 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz