Частный вебмастер г. Псков.
Создание сайтов - Магия & Креатив!

Admin
Дата: 15-08-2016
Просмотров: 1176
Комментарии: 0

Анкор 3D

Анкор 3D

Статья рассказывает о применении различных эффектов "анкору" при помощи jQuery и стилей css.


MODX Revolution

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

1. Понадобится скрипт, он представлен ниже, его вы сможете скачать в конце статьи:

(function ($) {
    $.fn.anchor3D = function (options) {
        var defaultVal = {
            linkBg: "",
            linkHoverBg: "",
            linkColor: "",
            linkHoverColor: "",
            enableReminder: false,
            effect: ""//['roll', 'moveToLeft']
        };

        var latency = 5000;

        reminder = function (link) {
            var linkObj = $(link).parent().parent();
            linkObj.addClass('hovered');
            setTimeout(function () {
                linkObj.removeClass('hovered');
            }, latency / 2);
        };

        var obj = $.extend(defaultVal, options);

        return this.each(function () {
            var effectClass = defaultVal.effect !== "" ? defaultVal.effect : "roll";
            $(this).addClass(effectClass);
            $(this).addClass('niceAnchor');
            
            var anchorTxt = $(this).text();
            var innerSpan = "" + anchorTxt + "";
            var outerSpan = "" + anchorTxt + innerSpan + "";
            
            var link = $(this).html(outerSpan).find("span.outerSpan")
                .css('backgroundColor', defaultVal.linkBg)
                .css('color', defaultVal.linkColor)
                .find("span.innerSpan")
                .css('backgroundColor', defaultVal.linkHoverBg)
                .css('color', defaultVal.linkHoverColor);

            if (defaultVal.enableReminder) {
                setInterval(function () { reminder(link) }, latency);
            }
        });
    };
})(jQuery);

2. Стили css, также представлены, так сказать "default", вы можете использовать свои:

a.niceAnchor
{
    display: inline-block;
    overflow: hidden;
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    perspective: 400px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}
        
a.niceAnchor span
{
    display: block;
    position: relative;
    padding: 0 2px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
        
a.roll:hover span,
a.roll.hovered span
{
    -webkit-transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
    -moz-transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
    transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
}

a.moveToLeft:hover span,
a.moveToLeft.hovered span
{
    -webkit-transform: translate3d( -100%, 0px, 0px ) rotateX( 90deg );
    -moz-transform: translate3d(-100%, 0px, 0px ) rotateX( 90deg );
    transform: translate3d( -100%, 0px, 0px ) rotateX( 90deg );
}


a.niceAnchor span.innerSpan
{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px;
    white-space: nowrap;
    color: #fff;
    background: black;
}
      
a.roll span.innerSpan
{
    -webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
    -moz-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
    transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}

a.moveToLeft span.innerSpan
{
    -webkit-transform: translate3d( 100%, 0, 0px ) rotateX( -90deg );
    -moz-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
    transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}

3. Далее, я приведу несколько примеров с использование различных настроек, которые будет необходимо разместить перед закрывающим тегом </head>:

Пример 1 (скрытие):

$(function () {
    $("a.test1").anchor3D({
        linkHoverBg: "#999",
        effect: 'moveToLeft'
    });
});

Содержимое ресурса ссылка далее...

Пример 2 (замена):

$(function () {
		$("a.test2").anchor3D({
        linkHoverBg: "#0382c8",
        linkHoverColor: '#fff',
	});
});

Содержимое ресурса ссылка далее...

Пример 3 (автозамена):

$(function () {
		$("a.test3").anchor3D({
        linkHoverBg: "#c5000c",
        linkHoverColor: '#fff',
        enableReminder: true
	});
});

Содержимое ресурса ссылка далее...

4. Остается добавить ссылке тот или иной класс.

Скачать
Анкор учитывается поисковыми системами, когда речь заходит о ранжировании и определении релевантности страниц, они записываются в анкор лист. Важно понимать, что правильно подобранные "анкоры" способствуют продвижению в ТОП поисковых систем и увеличивают посещаемость сайта.
Вернуться

Комментарии (0)