Предыстория: Несколько дней назад я наткнулся на сайт, на котором в правом верхнем углу был заманчивый анимированный отгибающийся уголок. При наведении курсора на это уголок он отворачивается еще сильнее и за ним находится изображение, как правило с призывающим мотивирующим заголовком. Область за открывшимся уголком кликабельная и при нажатии на нее переадресовывает Вас на какой-либо ресурс.
Вся фишка этого уголка в его анимированности и врожденном людском любопытстве. Когда вы видите такой вот интересный болтающийся уголок, он несомненно привлечет Ваше внимание, и вызовет желание поинтересоваться, что же там за ним.
Как оказалось, существуют два способа создания таких вот анимированных отгибающихся уголков для сайта.
Способы создания анимированного отгибающегося уголка для сайта:
- Способ с использованием плагина.
- Способ с помощью скрипта.
Создание анимированного отгибающегося уголка для сайта с помощью плагина Page Peel
Как обычно входим в админ панель своего сайта во вкладку плагины -> искать плагин. В поисковой строке забиваем название плагина. Напомню: Page Peel. В результате поиска он будет на первой строчке. Устанавливаем его и активируем как обычно.
Прежде чем перейти к настройкам необходимо подготовить и закачать на сервер 2 картинки: первая 75 на 75 пикселей, а вторая 500 на 500 пикселей.
Первая маленькая картинка это изображение под уголком до момента разворота, а вторая большая после разворота. Такие картинки можно изготовить с помощью программы Paint.NET, которую Вы без труда найдете и в интернете и самостоятельно освоите, тривиальном фотошопе или другом редакторе изображений.
Закачиваем полученные картинки на сервер и копируем адреса их расположения в медиа библиотеке.
Затем входим в админ панел сайтв во вкладку настройки и находим там наш плагин Page Peel.
Настройки просты до безобразия.
Настройки плагина Page Peel
- В 1 строке (Page Peel Ad URL) прописываем адрес сайта на который будет осуществляться переход (переадресация) после клика мышкой.
- В строке Page Peel small image URL прописываем адрес расположения на сервере маленькой картинки 75 на 75 пикселей.
- В строке Page Peel big image URL прописываем путь к большой картинке.
- После заполнения всех граф жмем на Apdate Options, переходим на наш сайт и с чувством глубокого удовлетворения поднятой самооценкой наслаждаемся результатами.