Автор

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

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

Простой, отзывчивый слайдер с радиальным эффектом перехода на основе SVG clipPath и элементов маски.


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

Контактна форма является важной составляющей сайта, с помощью данной формы посетитель может связаться с администрацией сайта.


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

Эффект параллакса стал весьма интересовать веб-разработчиков, своей оригинальностью и заинтересованностью пользователей, в данном уроке мы рассмотрим как создать весьма привлекательный слайдер для сайта с помощью CSS3 и jQuery. С помощью анимаций CSS мы можем контролировать каждый элемент на слайде и создавать поразительные эффекты за счет их взаимного смещения. Слайдер будет содержать несколько слайдов, которые будут смещаться, создавая интересный эффект. В демонстрации будет использоваться автоматическая и ручная прокрутка..


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close