Интерактивные подсказки для сайта на CSS3

CSS3 06.04.2013

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

ДЕМО

ИСХОДНИКИ

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

Шаг 1. HTML

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

<div class="container">
 <div class="labels">
 <a id="label1" class="label" href="#">Софа
 <p>Софа это широкий диван, в котором спинка и подлокотники имеют одну высоту. В Европе софа известна с XVII века, куда она пришла с Востока </p>
 <span />
 </a>
 <a id="label2" class="label" href="#">Телевизор
 <p>Телеви́зор (телевизионный приёмник) — электронное устройство для приёма и отображения изображения и звука, передаваемых по беспроводным каналам или по кабелю </p>
 <span />
 </a>
 <a id="label3" class="label" href="#">Сундук
 <p>Сунду́к (от тюркского сандык) — изделие корпусной мебели с откидной или съёмной верхней крышкой, используется как ёмкость для хранения предметов обихода, драгоценностей и других ценных вещей. Использовался в самых разных культурах, начиная с древних времён.</p>
 <span />
 </a>
 <a id="label4" class="label" href="#">Ноутбук
 <p>Ноутбук (англ. notebook — блокнот, блокнотный ПК) — портативный персональный компьютер, в корпусе которого объединены типичные компоненты ПК, включая дисплей, клавиатуру и устройство указания, а также аккумуляторные батареи.</p>
 <span />
 </a>
 <a id="label5" class="label" href="#">Двери
 <p>Дверь — проём в стене для входа и выхода из помещения, или проём во внутреннее пространство чего-либо (самолёта, автомобиля, печи, шкафа и т. п.), а также створ или несколько створов, закрывающие этот проём.</p>
 <span />
 </a>
 <a id="label6" class="label" href="#">Гардероб
 <p>Гардеробная комната — комната для хранения одежды, платья. Наличие таких комнат приносит в квартиру уют, а также позволяет существенно сэкономить полезную площадь на шкафах, приносит порядок в хранение вещей. </p>
 <span />
 </a>
 </div>
 <div class="dialog">
 <p></p>
 <a class="close">X</a>
 </div>
 </div>

Для кнопки закрытия мы будем использовать небольшую хитрость, а именно в кнопке будет установлена просто буква Х.

Шаг 2. CSS

Со стилями все немного интереснее, нам необходимо установить общие параметры, кроме этого нам необходимо указать положение подсказок относительно широты и долготы, создать заливку RGBA, для активного и пассивного состояния тултипа. Кроме этого нам необходимо установить небольшую анимацию для подсказок при появлении.

.container {
 background: url("../images/scene.png") no-repeat scroll center top transparent;
 color: #000000;
 height: 535px;
 margin: 20px auto;
 overflow: hidden;
 position: relative;
 width: 1030px;
}
.dialog {
 background-color: rgba(187, 217, 30, 0.9);
 color: #FFFFFF;
 display: none;
 height: 140px;
 left: 343px;
 line-height: 24px;
 padding: 100px 30px;
 position: absolute;
 text-align: center;
 top: 97px;
 width: 280px;
 z-index: 10;

-moz-border-radius: 170px;
 -ms-border-radius: 170px;
 -o-border-radius: 170px;
 -webkit-border-radius: 170px;
 border-radius: 170px;
}
.dialog .close {
 background-color: #65683b;
 cursor: pointer;
 font-size: 22px;
 font-weight: bold;
 height: 36px;
 line-height: 36px;
 position: absolute;
 right: 10px;
 top: 60px;
 width: 36px;

-moz-border-radius: 18px;
 -ms-border-radius: 18px;
 -o-border-radius: 18px;
 -webkit-border-radius: 18px;
 border-radius: 18px;
}
.labels p {
 display: none;
}
.labels a {
 background-color: rgba(187, 217, 30, 0.8);
 color: #FFFFFF;
 display: none;
 height: 50px;
 padding: 30px 0 0;
 position: absolute !important;
 text-align: center;
 text-decoration: none;
 width: 80px;

-moz-border-radius: 40px;
 -ms-border-radius: 40px;
 -o-border-radius: 40px;
 -webkit-border-radius: 40px;
 border-radius: 40px;
}
.labels > a {
 background-color: rgba(187, 217, 30, 0.8);

-moz-transition: .3s;
 -ms-transition: .3s;
 -o-transition: .3s;
 -webkit-transition: .3s;
 transition: .3s;
}
.labels a:hover {
 background-color: rgba(128, 128, 128, 0.8);
}
.labels a span {
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 15px solid rgba(187, 217, 30, 0.8);
 bottom: -14px;
 height: 0;
 left: 30px;
 position: absolute;
 width: 0;

-moz-transition: .3s;
 -ms-transition: .3s;
 -o-transition: .3s;
 -webkit-transition: .3s;
 transition: .3s;
}
.labels a:hover span {
 border-top: 15px solid rgba(128, 128, 128, 0.8);
}
#label1 {
 left: 720px;
 top: 215px;
}
#label2 {
 left: 495px;
 top: 290px;
}
#label3 {
 left: 450px;
 top: 115px;
}
#label4 {
 left: 270px;
 top: 170px;
}
#label5 {
 left: 570px;
 top: 65px;
}
#label6 {
 left: 275px;
 top: 30px;
}

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

Шаг 3. JavaScript

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

jQuery(function(){
    // Инициализация
    $('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
        $('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
            $('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                $('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                    $('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                        $('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300);
                    });
                });
            });
        });
    });

    // Закрыть окно
    $('.dialog .close').click(function() {
        $(this).parent().fadeOut(500);
        return false;
    });

    $('.labels a').click(function() {
        $('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
        return false;
    });

    $('.container').click(function() {
        $('.dialog').fadeOut(500);
    });
});