Отгибающийся уголок на сайте - плагин Page Peel
Заметки по jQuery

Отгибающийся уголок на сайте – без плагина

Отгибающийся уголок на сайте - без плагина

Рассмотрим как сделать на блоге отгибающийся уголок. Это привлекающий внимание пользователя визуальный эффект, расположенный например в верхний правый уголок области вашего блога. Уголок немного отгибается заманивая пользователя навести на него. После того как у пользователя не останется сил совладать со своим любопытством и огромным желанием навести указатель мыши на уголок, ему начнет повелеваться уголок. Уголок начнет отслаиваться от блога при этом приоткрывая свою тайну и покажет пользователю, что было за ним спрятано весьма заманчивое предложение. А при клике на этому предложению пользователь перейдет на заранее созданную страницу.

Отгибающийся уголок на сайте – плагин Page Peel для WordPress

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

  1. Ссылка на страницу перехода
  2. Ссылка на маленькую картинку размером 75х75 px
  3. Ссылка на большую картинку размером 500х500 px

[download=http://wordpress.org/extend/plugins/page-peel/]

Отгибающийся уголок на сайте без плагина

Для тех же кто не боится трудностей приступим к установке красивого уголка на сайт.

Для начала давайте подключим скрипты и стили css заходите в файл header.php вашего шаблона и до </head> вставляем код:

<script src="<?php bloginfo('stylesheet_directory'); ?>/peel/jquery.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/peel/jquery-ui.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/peel/turn.js"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/peel/turn.css">
<script type="text/javascript">
$(document).ready(function(){
$('#target').fold();
});
</script>

Если у вас Jquery подключен в шаблоне, то эту строчку можно удалить:

<script src="<?php bloginfo('stylesheet_directory'); ?>/peel/jquery.min.js"></script>

Далее где-нибудь после тега <body> вставляем картинку, которая должна скрываться за уголком с ссылкой на нужную вам страницу:

<a href="https://studio-gost.ru"><img id="target" src="code.png"></a>

не забываем указать ссылку на нужную вам страницу.

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

// Возможные настройки
    var defaults = {
      directory: '/wp-content/themes/Ваша_Тема/', // Папка в которой находится скрипт
      side: 'right',       // поменятйе на "left" и картика будет слева
      turnImage: 'fold-sw.png',  // картинка самого уголка 
(если переместите уголок на другую сторону необходимо поменять картинку уголка - также есть в архиве)
      maxHeight: 400,      // Максиальная высота
      startingWidth: 80,   // Высота и ширина
      startingHeight: 80,  // разворота уголка (можно поменять, если хотите чтоб уголок был более развернутым)
      autoCurl: true       // если тут указать "false", тогда уголок будет отгибаться только при перетаскивании мышкой 
    };

Теперь осталась закачать нужные файлы в тему шаблона на вашем блоге.

[download=https://studio-gost.ru/wp-content/uploads/2012/08/peel.rar]

Ну вот и все! Теперь на Вашем блоге должен быть установлен уголок.