Автор

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

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


 

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

 

ДЕМО
ИСХОДНИКИ

 

Для достижения данного эффекта нам понадобиться две библиотеки 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);
    });
});

 

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

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

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.


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

Продолжаем рассматривать интересные галереи для сайта. В сегодняшнем уроке мы рассмотрим весьма интересную вещь, а именно технологию drag-and-drop ("перетащи-и-брось"), добавив к ней плагин fancybox, который позволит открывать изображение в оригинальный размер, в модальном окне. Смотрится достаточно красиво, весьма заинтересовывая пользователей своей оригинальностью и свободой действий, а именно, перетаскивание изображений по холсту. Вот что у нас с этого вышло..


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

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


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

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close