Создание flash эффекта перелистывания страницы на сайте

Если вы заметили в правом углу сайта визуальный эффект перелистываемой страницы, то Вам несомненно должно быть интересно как это реализовать.

Этот эффект перелистывания используется для привлечения большего внимания к различным товарам, услугам. Для вебмастеров-манимейкеров он может стать новым видом размещения рекламы с блога.

Примечание: Владельцы блогов на wordpress могут скачать плагин, выполняющий этот трюк, предварительно настроив его.
А мы рассмотрим, как это сделать вручную.

Шаг 1. Скачиваем необходимые файлы.

Скачиваем и распаковываем архив, который содержит следующие файлы:

- large.swf
- large.jpg
- small.swf
- small.jpg
- peel.js

Продумайте, где будет лежать архив на сервере. Для пользователей wordpress, желательно распологать архив в текущей теме. Закачайте папку /peel/ в корень темы
/wp-content/themes/ваша-тема/.
Далее открываем Ваши текстовый и графический редакторы.

Шаг 2 – Редактируем peel.js

Открываем текстовым редактором. Заменяем следующие параметры:

1. jaaspeel.ad_url – URL на который перейдет пользователь.
2. jaaspeel.small_path – Путь к small.swf
3. jaaspeel.small_image – Путь к small.jpg
4. jaaspeel.big_path – Путь к large.swf
5. jaaspeel.big_image – Путь к large.jpg

Вот пример, для домена 3pu.info

1. jaaspeel.ad_url = escape(’http://blogwm.ru’);
2. jaaspeel.small_path = ‘http://3pu.info/wp-content/themes/i3theme17/peel/small.swf’;
3. jaaspeel.small_image = escape(’http://3pu.info/wp-content/themes/i3theme17/peel/small.jpg’);
4. jaaspeel.big_path = ‘http://3pu.info/wp-content/themes/i3theme17/peel/large.swf’;
5. jaaspeel.big_image = escape(’http://3pu.info/wp-content/themes/i3theme17/peel/large.jpg’);

Шаг 3 – Редактируем изображения

- small.jpg – Эту маленькую картинку посетители видят до эффекта перелистывания. Отредактируйте на свое усмотрение, но лучше по фону сайта.

- large.jpg – Эту картинку посетители видят после наведения на маленькую картинку и реализации эффекта перелистывания. Картинка треугольная с длиной и шириной в 500px. На ней необходимо разместить баннер, рекламу и.т.п.

Оба флеш файла small.swf и large.swf срабатывают при наведении мышью.

Шаг 4 – Закачиваем файлы

Закачиваем отредактированные файлы в папке peel на сервер. Об этом мы говорили на первом шаге.

Шаг 5 – Добавляем Javascript в header

В wordpress нужно перейти в редактор тем и выбрать файл header.php.
Далее добавляем следующий Javascript код после тега <title>, но перед тегом </head>.

<script src=”http://3pu.info/wp-content/themes/i3theme17/peel/peel.js” type=”text/javascript”></script>

Перезагрузите страницу в браузере и в правом верхнем углу увидите эффект перелистывания.

БлогПост

Используем Twitter для продвижения блога, компании, бренда
Статистика ВКонтакте
Раскрутка форума. Часть 1, Часть 2