<>
Каталог Java скриптов!Онлайн сервисов!Всё для Веб-мастера!

Уроки дизайнеру

Bookmark and Share

Вход
Логин:
Пароль:
На сайте
Всего: 1
Гостей: 1
Пользователей: 0
Создание flash эффекта перелистывания страницы на сайте

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

peel away effect

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

Примечание: Владельцы блогов на 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

Вот пример, для домена scriptozna.ucoz.ru

jaaspeel.ad_url = escape('http://scriptozna.ucoz.ru/publ/30-1-0-110');
jaaspeel.small_path = 'http://scriptozna.ucoz.ru/peel/small.swf';
jaaspeel.small_image = escape('http://scriptozna.ucoz.ru/peel/small.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://scriptozna.ucoz.ru/peel/large.swf';
jaaspeel.big_image = escape('http://scriptozna.ucoz.ru/peel/large1.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://scriptozna.ucoz.ru/peel/peel.js" type="text/javascript"></script

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


Рейтинг 4.0 (24) голосов | Категория: Уроки дизайнеру | Просмотров: 10910
| Комментарии: 20
Всего комментариев: 171 2 »
17 scriptozna  
Тему перенёс на ФОРУМ

16 sov31  
<html> <head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>$SITE_NAME$ - $MODULE_NAME$</title>

<script src=”http://nakley-vip-idey.ucoz.ru/Peel/peel.js” type=”text/javascript”></script>

</head><body><div align="left">$GLOBAL_AHEADER$

Ну ведь в правильное место скрипт вставлен! А не работает ((((((


15 scriptozna  
Скрипт нужно ставить в тело страницы между тегов <head> и </head> пример:
Code
<html>  
<head>
<title>Имя страницы</title>
<script src=”http://nakley-vip-idey.ucoz.ru/Peel/peel.js” type=”text/javascript”></script>  
</head>

14 scriptozna  
Пример на Этой странице

13 sov31  
var jaaspeel = new Object();

jaaspeel.ad_url = escape('http://www.odnoklassniki.ru');
jaaspeel.small_path = 'http://nakley-vip-idey.ucoz.ru/Peel/small.swf';
jaaspeel.small_image = escape('http://nakley-vip-idey.ucoz.ru/Peel/small.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://nakley-vip-idey.ucoz.ru/Peel/large.swf';
jaaspeel.big_image = escape('http://nakley-vip-idey.ucoz.ru/Peel/large.jpg');
По моему всё верно. Файлы через файловый менеджер закачаны на сервер в папку Peel. Туда же закачан файл peel.js
Графического редактирования никакого не делал, т.к. пока не вижу самого эффекта.
Вот мой скрипт: <script src=”http://nakley-vip-idey.ucoz.ru/Peel/peel.js” type=”text/javascript”></script>
Прошу помощи. Спасибо.


12 sov31  
А вот почему то и по вашему адресу (http://scriptozna.ucoz.ru/publ/30-1-0-110) не вижу эффекта?.......

11 sov31  
Подозреваю что не туда вставляю Javascript код (после тега <title>, но перед тегом </head>)
Вообще не вижу такого тега.

10 sov31  
http://nakley-vip-idey.ucoz.ru/

9 scriptozna  
дайте адрес страницы?

8 sov31  
Ну просто никак не получается. Помогите, плиз! sad

1-10 11-17
наверх
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Топ статьи


  Рекомендуем
АнтеБаннер
Сервисы для веб-мастера
Windows DI
Заработок для вебмастера
Все для веб-мастера
Фотообои
Шокирующие фото

Рейтинг@Mail.ru Rambler's Top100
Хостинг от uCoz