Анимация. Уголок для сайта.

Как и большинство других javascript-ов, отгибающийся (или отогнутый) уголок используется для привлечения внимания посетителей web сайта к определенному месту на веб - странице.  Как правило, это является рекламной информацией, клик по которой приносит какую либо выгоду.

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

  Далее все зависит от качества преподношения информации, чем привлекательнее содержимое "волшебного уголка", те больше шансов, что посетитель увидит Ваш рекламируемый материал перейдя по ссылке уголка страницы сайта. Данный, новый эффект один из самых красивых и привлекательных javascript ов, который не оставит равнодушным Вашего потенциального клиента.

Новый модуль волшебного ( или отогнутого)  уголка реализован при помощи flash технологии с использованием JavaScript, PHP. Поэтому проверять работоспособность скаченного уголка возможно только после извлечения файлов архива в корневую папку Вашего сайта на сервере.

             Установка JavaScript  "Отгибающийся уголок" на сайт.

Что бы установить новый javascript на веб страницу сайта необходимо:  <<архив pageear.zip>>

  • Скачать архив "отгибающийся уголок"
  • Извлечь содержимое в корневую папку сайта на сервере (кроме index.html)
  • В код страницы (на которой устанавливается новый javascript) добавить соответствующие записи
  • Настроить внешний вид javascript а под  дизайн сайта

Теперь обо всём поподробнее. Первые два пункта, надеюсь, разъяснений не требуют.
Открываем файл архива index.php и копируем код перед закрывающим тегом </body> на свою страницу сайта в соответствующие место.

 

новый javascript «отгибающийся уголок»

<script type="text/javascript">   
writeObjects();
</script>

Далее подключаем файлы pageear.js и ac_oetags.js : для этого в коде страницы между тегами <head>…..</head> прописываем:
<script type="text/javascript" src="scripti/ac_oetags.js"></script>
<script type="text/javascript" src="scripti/pageear.js"></script>

 

На сегодня, атрибут "language" тега <script> является устаревшим и его следует опускать.
В принципе, все современные браузеры поймут код javascript и без атрибута " type", но его присутствие требуют стандарты.

отгибающийся уголок установка

Всё новый javascript отгибающийся уголок установлен на странице Вашего web сайта.

    Настройка параметров волшебного (отогнутого) уголка.

Что бы настроить отгибающийся уголок под дизайн Вашего сайта необходимо заменить графические файлы архива  и в файле pageear.js указать URL сайта для перехода при клике по волшебному уголку.

 

Настройка параметров волшебного (отогнутого) уголка

Так же в этом файле находятся и другие настройки скрипта, которые лучше не трогать.

На момент написания этой статьи скрипт отворачивающегося угла встречался только на "резиновых" 100%-ых страницах сайтов. Теперь этот красивый уголок можно разместить и на сайтах с фиксированной шириной в любом месте web страницы.

    Отгибающийся уголок для WordPress

В последнее время большую популярность при создании сайта получила бесплатная CMS (система управления контентом) WordPress.
Данный движок привлекает, в основном, блогеров своим дружелюбным и простым интерфейсом. Кроме того, в интернете огромное количество информации по установке, настройке, дополнительным плагинам и т. д.

Принцип установки отгибающего уголка на web страницы сайта под управлением WordPress ни чем не отличается: те же фрагменты кода и те же самые файлы из архива pageear.zip.
Сложность, думаю, заключается в размещение файлов и последующего указания путей к ним.


Теперь по-порядку:

    - первое, что необходимо сделать - это скачать архив для WordPress и поместить содержимое (папку "pageear") в папку "wp-content/uploads/". В данном архиве в файле "pageear.js" уже исправлены пути к фоткам и флешкам.

    - Второе: надо подключить файлы javascript. Для этого в файле "header.php" вставляем перед </head>:

<script src="http://wordpress/wp-content/uploads/pageear/AC_OETags.js" language="javascript"></script>
<script src="http://wordpress/wp-content/uploads/pageear/pageear.js" type="text/javascript"></script>


    - Третье: в файле "footer.php" перед </body> прописываем javascript-код запуска функции, которая отвечает за работу скрипта "отгибающейся уголок".


<!-- PageEar function call -->
<script type="text/javascript">
writeObjects();
</script>


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

Комментарии по теме: "Анимация. Уголок для сайта.".

  1. автор Дмитрий

    У меня вопрос, работают ли уголки если их несколько на странице в каждом DIV-е, вот у меня например получилось их разместить несколько на одной странице , но отгибается только один самый первый, а остальные не хотят, есть ли решение, помогите...

  2. автор Дарья

    Евгений,
    спасибо, все получилось))
    +

  3. автор Евгений

    Да, действительно отгибающейся уголок невсегда появляется в браузерах(Опера и FF), возможно это исправится после выхода новых версий браузеров или Flash плеера, если нет буду искать решение данного глюка.
    Остальное настраивается в файле "pageear.js"
    // Цffnet den link im neuen Fenster (new) oder im selben (self)
    // Browser target (new) or self (self)
    var openLink = 'self';
    // Цffnet das pagepeel automatisch wenn es geladen ist (false:deaktiviert | 0.1 - X Sekunden bis zum цffnen)
    // Opens pageear automaticly (false:deactivated | 0.1 - X seconds to open)
    var openOnLoad = false;

  4. автор Дарья

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

  5. автор Дарья

    Евгений,
    спасибо!
    а как сделать, чтобы при нажатии на уголок ссылка открывалась не в новой вкладке, а в старой?

  6. автор Евгений

    Маленьная - 100х100
    Большая - 500х500

  7. автор Дарья

    Евгений,
    спасибо, помогло.
    Но теперь у меня другой вопрос: какие размеры у этих двух картинок?

  8. автор Евгений

    Дарья, в файле "pageear.js" пропишите правильно пути к графическим элементам отгибающегося уголка

    // URL zum kleinen Bild / URL to small image
    var pagearSmallImg = 'pageear_s.jpg';
    // URL zu pageear_s.swf / URL to small pageear swf
    var pagearSmallSwf = 'pageear_s.swf';

    // URL zum groЯen Bild / URL to big image
    var pagearBigImg = 'pageear_b.jpg';
    // URL zu pageear_b.swf / URL to big pageear swf
    var pagearBigSwf = 'pageear_b.swf';

    У вас эти файлы находятся в папке "ugolok".
    Должно быть ugolok/pageear_b.swf.....

  9. автор Дарья

    Здравствуйте.
    У меня почему-то не отображается уголок. Вообще. Как будто и не было кода с уголком.
    Помогите, пожалуйста.
    С уважением,
    Дарья.

  10. автор Евгений

    Не нашел у вас на сервере эти файлы:
    src="scripti/ac_oetags.js"
    src="scripti/pageear.js"

  11. автор Александр

    Всё установил и сделал,как описано,но "уголок" так и не появился!Сайт на котором делал указал!
    Поможете?

  12. автор Сергей

    А можно такой уголок установить в интернет магазине Webasyst?

  13. автор Елена Чашкина

    Спасибо огромное. Все так доступно описано. Очень красиво получилось!

  14. автор Евгений

    Вячеслав, уголок у Вас отлично работает

  15. автор Вячеслав

    Сделал все по уроку, но уголок не отгибается. На хостинг закачал файлы, в index вставил скрипты, но увы, где я что не так сделал?

  16. автор Евгений

    Тимур, для этого надо маленькую флешку уголка (pageear_s.swf) перерисовать под дизайн для Вашего сайта.
    Если есть желание, то Flash Decompiler Trillix и Adobe Flash Professional Вам в помощь.

  17. автор Тимур

    Спасибо, все здорово. Работает и радует уголок. А как сделать что бы маленький до открытия уголок был побольше?

  18. автор Владимир

    Вопрос по теме.
    Как можно сделать отгибающийся угол не на сайте или блоге, а на мультимедийном диске?
    Я занимаюсь созданием презентаций, и т.д. с последующей записью на СД, ДВД, и хотелось бы украсить отгибающимся уголком.
    Ответ желательно по почте vlad-kosmopoisk@mail.ru

  19. автор Вал

    Для WordPress есть плагин page-peel,минимум настроек,меньше мороки с кодом

  20. автор Евгений

    Валерий, спасибо за вопрос.
    Подробный ответ дописал в посте.

  21. автор Валерий

    Дорогие...., скажите пожалуйста...., этот уголок на WordPress работает...??? Я что-то пробовал....., вообще не получилось....

  22. автор Инкогнито

    Ок Спасибо.

  23. автор Евгений

    Инкогнито, на комп необходимо установить виртуальный сервер, например "Денвер", загрузить все файлы сайта на этот сервер.
    И тогда всё получется

  24. автор Инкогнито

    И всё же на вопросы вы не ответили )
    Я сделал всё как указано в примере.
    А сайт у меня не на сервере а на компе.

  25. автор Евгений

    1.
    Проверять работоспособность скаченного уголка возможно только после извлечения файлов архива в корневую папку Вашего сайта на сервере.
    2.
    Размещайте код запуска функции в нужном DIV'е
    <script type="text/javascript">

    window.onload = writeObjects();

    </script>
    и отгибающейся уголок будет работать только для данного дива.

  26. автор Инкогнито

    Есть пару вопросов, во-первых у вас на сайте уголок красиво отгибается, а в скачанном скрипте он только дёргается и при наведении не отгибается, плюс он когда на него кликаешь на сайт не переходит.

    И ещё как его сделать что бы он не с самого верху сайта был, там где шапка, а что бы как у вас под шапкой в углу данной новости ?

  27. автор Геннадий

    Спасибо! У вас стабильно рабочие скрипты...

  28. автор Юля

    Устранила проблему, почистив кеш) спасибо за скрипт)

  29. автор Юля

    Не получается поставить нужные фото, загрузила в корень(просто поменяла уже имеющиеся на новые с такими же именами), а уголок не изменился? помогите, пожалуйста, очень понравился))

  30. автор Сергей

    закрыл тегом </div> и все ок

    Евгений, спасибо. Супер. ТО что надо :)
    оказывается надо было еще поправить пути "pageear.js"

  31. автор Сергей

    о ! теперь работает.. только верстка поплыла.. :)
    но хоть уже что-то

  32. автор Сергей

    все файлы кроме index.html лежат в одной папке fileadmin/templates/media/

    ок. поправлю пути в pageear.js

  33. автор Евгений

    А остальные файлы архива где лежат?
    Если не в корневой, то в файле "pageear.js" необходимо исправить пути до этих файлов.

    // URL zum kleinen Bild / URL to small image
    var pagearSmallImg = 'pageear_s.jpg';
    // URL zu pageear_s.swf / URL to small pageear swf
    var pagearSmallSwf = 'pageear_s.swf';

    // URL zum groЯen Bild / URL to big image
    var pagearBigImg = 'pageear_b.jpg';
    // URL zu pageear_b.swf / URL to big pageear swf
    var pagearBigSwf = 'pageear_b.swf';

  34. автор Сергей

    1) прописал между тегами <head>…..</head>

    <script type="text/javascript" src="fileadmin/templates/media/AC_OETags.js"></script>
    <script type="text/javascript" src="fileadmin/templates/media/pageear.js"></script>

    2) прописал перед закрывающим тегом </body>

    <script type="text/javascript">
    writeObjects();
    </script>

    и ничего. что не так?

  35. автор Сергей

    в предыдущем посте меняем </body> на </head> :)
    ошибся..

  36. автор Сергей

    ага.. заметил, что я прописываю их после закрывающего тега </body> наверное в этом дело..

    я просто добавляю в админ части сайта еще один элемент к существующей странице, в данном случае html код, но он прописывается не там где надо. что бы прописать перед тегом </body> надо изменять сам шаблон страницы..

    но такого я еще не делал

  37. автор Сергей

    нет, я загружал скрипты не в корневую папку:

    <script src="fileadmin/templates/media/AC_OETags.js" language="javascript"></script>
    <script src="fileadmin/templates/media/pageear.js" type="text/javascript"></script>

  38. автор Евгений

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

    <script src="AC_OETags.js" language="javascript"></script>
    <script src="pageear.js" type="text/javascript"></script>
    </head>

  39. автор Сергей

    Что-то и у меня не вышло с этим уголком. Хотя так классно выглядит у вас на сайте, обидно.
    Локально на ПК работает при загрузке index.html, да и то не совсем так как хотелось бы, работает - не так как у вас.

    То есть уголок не разворачивается и не реагирует на клики. Ссылку я перепрописал на свою. У вас же при наведении на уголок он разворачивается и показывается большая картинка.

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

  40. автор Наташа

    Что то и с облаком тегов не получилось, хотя все сделала как у Вас написано. Посмотрите, пожалуйста.Внесла рукописный код, исправила там на свой адрес сайта.

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
    height="250" width="250"><param name="movie"
    value="http://melecas-sadic.narod.ru/tagcloud.swf" />
    <param name="quality" value="high" />
    <embed src="%20http://melecas-sadic.narod.ru%20/tagcloud.swf"
    quality="high"
    pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
    type="application/x-shockwave-flash" height="250"
    width="250"></object>

    tagcloud.xml-исправила для своего сайта

  41. автор Евгений

    Наташа, проблемы с уголком связаны с хостингом (narod)
    К сожалению, бесплатно не всегда хорошо.

    Программой KompoZer, ни когда не пользовался, поэтому ни чего сказать не могу, но думаю, если она (программа) умеет вставлять flash в web страницу, то результат будет положительный.

    tagcloud.xml. Этот файл после редактирования тоже закачать в корневую папку.

  42. автор Наташа

    tagcloud.xml. Этот файл после редактирования тоже закачать в корневую папку?

  43. автор Наташа

    Tagcloud.swf – облако тегов во флэш. Именно этот файл необходимо вставлять в нужное место на web странице сайта.
    С помощью Adobe Dreamweaver CS3 достаточно просто мышкой перетащить файл flash облака в нужное место, а необходимый код программа сгенерирует за Вас сама.

    А если я обрабатываю страницы сайта с помощью программы KompoZer, а не Adobe Dreamweaver CS3, то результат будет?

  44. автор Наташа


    Не помогает.

  45. автор Евгений

    Или файл "AC_OETags.js" переименуйте на "ac_oetags.js"

  46. автор Евгений

    Тогда исправте:
    <script type="text/javascript" src="ac_oetags.js"></script>
    на
    <script type="text/javascript" src="AC_OETags.js"></script>

  47. автор Наташа

    Она тоже там, только почему-то записана большими буквами AC_OETags.js. Я просто загружала. Тут же и остальные файлы.

  48. автор Евгений

    При таком подключении
    <script type="text/javascript" src="ac_oetags.js"></script>
    <script type="text/javascript" src="pageear.js"></script>
    файлы "ac_oetags.js" и "pageear.js" должны находится в корневой папке
    "pageear.js" - на сервере есть.
    А где "ac_oetags.js"???

  49. автор Евгений

    Загрузите файл "ac_oetags.js" на сервер в корневую папку

  50. автор Наташа

    Я попробовала и так:
    <script type="text/javascript" src="scripti/ac_oetags.js"></script>
    <script type="text/javascript" src="scripti/pageear.js"></script>
    , создав папку scripti.
    И так:
    <script type="text/javascript" src="ac_oetags.js"></script>
    <script type="text/javascript" src="pageear.js"></script>
    но результата нет.

  51. автор Евгений

    Наташа, Вы в <head> прописали подключение файлов
    <script type="text/javascript" src="scripti/ac_oetags.js"></script>
    <script type="text/javascript" src="scripti/pageear.js"></script>
    Но по данным адресам файлов на сервере нет
    В корневой папке создайте папку "scripti" и в неё положите файлы "ac_oetags.js" и "pageear.js"

  52. автор Наташа

    Не получается. Вот адрес сайта: melecas-sadic.narod.ru. Поставила Ваш вариант уголка на две страницы: "Контакты" и "Карта сайта". На "Главной" странице и странице "О нас" стоят уголки других авторов. Но они работают только в браузере Opera, а в Firefox(10-я версия) и Explorer(8-я версия) не работают. Мне же хочется, чтобы везде работало. И потом, у Вас уголок с музыкой. Но, увы...

  53. автор Евгений

    Чтобы при клике по отгибающему уголку переходить на нужный Вам адрес,
    в файле "pageear.js"
    в строке:
    var jumpTo = 'http://www.wellsait.ru/'
    замените (http://www.wellsait.ru/) на свой URL

  54. автор Наташа

    В которое место надо указать URL сайта для перехода при клике по волшебному уголку.

    Я только начинаю с сайтом работать и мне не понятен этот момент.

  55. автор кристина

    классно спасибо

  56. автор Евгений

    Это надо править "pageear_s.swf"

  57. автор Нико

    А как сделать, чтобы уголок не качался а статично стоял на месте?

  58. автор Евгений

    закрывающий тег body должен быть обязательно в других файлах PHP (например footer)

  59. автор Виталий

    Доброго времени суток. Уголок отличная вещь. Весьма кликабелен. Установил на сайт все работает. Там страницы html. Решил поставить на другой , а он PHP. Попробовал в header.php его воткнуть что бы на всех страницах отображался но никаких изменнений. подскажите куда мне это вставить (в headere нет закрывающего тега body но зато есть head)в хроме ничего не произошло IE открыл вообще только footer показал

  60. автор Евгений

    100 px X 100 px - оптимальный вариант
    Больше - всё равно видно не будет
    Меньше - не закроет отвёрнутый уголок

  61. автор Андрей

    Народ, вопрос следующий: размеры маленького изображения 100 px X 100 px, иль можно произвольные значения задавать?

  62. автор Игорь

    Прикольно! Попробую установить.

  63. автор Евгений

    Это проблемма с Adobe Flash Player.
    В IE всё на месте.
    После переустановки Adobe Flash Player всё возращается

  64. автор Еврик

    да, действительно исчез уголок с моего сайта... и у немца webpicasso тоже.

  65. автор Андрей

    Ребята, у Вас ролик уголка со страници исчез.

  66. автор Евгений

    У тебя в корневой папке нет файла "ac_oetags.js"

  67. автор Денися

    Я сделал в файле index.php между тегами <head>…..</head>..... (Путь : ./templates/orbit1)прописал:

    <head>
    .................
    <script type="text/javascript" src="ac_oetags.js"></script>
    <script type="text/javascript" src="pageear.js"></script>
    </head>

    далее перед </body> прописал:
    ...........................
    <script type="text/javascript">
    writeObjects();
    </script>
    </body>
    </html>

    правильно?

  68. автор Евгений

    Здесь написано:
    Далее подключаем файлы pageear.js и ac_oetags.js : для этого в коде страницы между тегами <head>…..</head>.....

    src="/pageear.js - это путь к файлу "pageear.js", если он лежит в корневой папке;
    src="/моя папка/pageear.js - это путь к файлу "pageear.js", если он лежит в папке "моя папка"

  69. автор Денися

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

  70. автор Евгений

    Если отправил в корневую папку, то откуда папка /scripti/.

    <script type="text/javascript" src="/scripti/AC_OETags.js"></script>
    <script type="text/javascript" src="/scripti/pageear.js"></script>

  71. автор Денися

    Я проверил, все файлы отправлены в коренвую папку как и положено, даже не знаю в чем дело((((

  72. автор Евгений

    Может какой-нибуть файлик на сервер забыли отправить или пути указали не верно

  73. автор Денися

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

  74. автор Алексей

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

  75. автор Евгений

    Может, какой-то файлик не отправили на сервер.
    Или путь указан не правильно.

  76. автор Алексей

    Столкнулся с такой проблемой - на локальном сервере (denver) скрипт работает, а когда копирую все на виртуальный сервер скрипт не работает. Подскажите, в чем может быть проблема?

  77. автор Евгений

    В файле pageear.js есть 44-я строка:

    --- Opens pageear automaticly (false:deactivated | 0.1 - X seconds to open)

    --- время в секундах до автоматического открытия уголка

    var openOnLoad = 3;

    меняешь на 600, и автоматическое открытие произойдет через 10мин 6000=1ч40мин...

  78. автор Денис

    А как настроить, чтобы он сам не отгибался при загрузке страницы? А то в Опере чуть притормаживает, в отличие от firefox.

  79. автор Евгений

    Можно на фото pageear_b.jpg нарисовать в фотошопе кнопку (можно наверно даже анимированную GIF), а ссылку с уголка указать на форму регистрации.

  80. автор Виталий

    Подскажите,как на отгибающемся угоке зделать кнопку регистрации?

  81. автор Евгений

    В IE при отгибании и возвращении уголка в исходное положение издается характерный звук

  82. автор VonKruger

    Спасибо, очень интересный и нужный скрипт. Единственный вопрос, а зачам в архиве файл Mp3 лежит?

  83. автор Eurik

    Искал не зря, нашел только здесь! Спасибо - пошел устанавливать.

  84. автор Евгений

    Этот текст находится на фото pageear_b.jpg.

  85. автор Александр

    Подскажите пожалуйста, как поменять текст "Pagepeel costenlos....." он расположен при разворачивании уголка) никак не могу найти его..Заранее спасибо!

  86. автор Евгений

    Вообщем то только перерисовать исходник во флеш (повернуть против часовой стрелки на 45градусов) и в pageear.js в строке
    // Css style default x-position
    var xPos = 'right';
    right заменить на left

  87. автор Евгений

    А как сделать чтоб уголок не в правом а в левом углу был, подскажите

  88. автор Evgeniy

    Да, конечно. Вот пример SHTML: http://wellsait.ru/pageear.shtml

  89. автор Валерий

    Отлично!

  90. автор Павел

    А в .shtml страницу вставляется тот же код?:

  91. автор NewMoscow

    Красивый волшебный уголок. Для рекламы, лучше и быть не может.

  92. автор Evgeniy

    Большая просьба, оставлять сообщения только по данной теме. Спам, реклама и т.д. будут удаляться.

Добавить комментарий