Автор

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



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

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

И снова параллакс на jQuery, но довольно-таки интересный вариант и я думаю многие захотят на своем сайте иметь чтото подобное, так как практически это многослойный параллакс эффект, просто посмотрите демо и всё станет ясно!


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

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


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

Формат SVG делает сайт, более интересным. Это действительно много творческих возможностей для интересных эффектов на веб-сайт с использованием SVG. Сегодня мы хотели бы поделиться с вами двумя экспериментальными понятиями, которые используют анимацию, ставших популярными благодаря анимации на PlayStation 4 и Xbox одновременно.


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close