Автор

Интерактивные подсказки для сайта на 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);
    });
});

 

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Изображение, которое расширяется при нажатии, переходит в полную ширину и превращается в галерею.


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

Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.


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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close