Анимированный отгибающийся уголок для сайта

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

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

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

Способы создания анимированного отгибающегося уголка для сайта:

  1. Способ с использованием плагина.
  2. Способ с помощью скрипта.

Создание анимированного отгибающегося уголка для сайта с помощью плагина Page Peel

Как обычно входим в админ панель своего сайта во вкладку плагины -> искать плагин. В поисковой строке забиваем название плагина. Напомню: Page Peel. В результате поиска он будет на первой строчке. Устанавливаем его и активируем как обычно.

Прежде чем перейти к настройкам необходимо подготовить и закачать на сервер 2 картинки: первая 75 на 75 пикселей, а вторая 500 на 500 пикселей.

Первая маленькая картинка это изображение под уголком до момента разворота, а вторая большая после разворота. Такие картинки можно изготовить с помощью программы Paint.NET, которую Вы без труда найдете и в интернете и самостоятельно освоите, тривиальном фотошопе или другом редакторе изображений.

Закачиваем полученные картинки на сервер и копируем адреса их расположения в медиа библиотеке.

Затем входим в админ панел сайтв во вкладку настройки и находим там наш плагин Page Peel.

Настройки просты до безобразия.

Настройки плагина Page Peel

  1. В 1 строке (Page Peel Ad URL) прописываем адрес сайта на который будет осуществляться переход (переадресация) после клика мышкой.
  2. В строке Page Peel small image URL прописываем адрес расположения на сервере маленькой картинки 75 на 75 пикселей.
  3. В строке Page Peel big image URL прописываем путь к большой картинке.
  4. После заполнения всех граф жмем на Apdate Options, переходим на наш сайт и с чувством глубокого удовлетворения поднятой самооценкой наслаждаемся результатами.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *