Как реализовать подобное боковое выезжающее окно?

Question

[Александр]

Доброго времени суток!
Честно я даже не знаю, как правильно сформулировать вопрос. Подскажите пожалуйста как можно или как правильно называется библиотека с помощью которой возможно реализовать подобное всплывающие окно, как на примере сайта пример сайта . При нажатии на примеры домов, всплывает подробная информация о объекте.

Comments

[OVK2015]

jQuery?

custom.js 296 строка:

$('.item').live('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
if (visiblePartY == 'top') {
.......

Answer 1

[Stalker_darkway]

В таком случае смотрите исходный код страницы. В данном случае подключено много скриптов, но погуглите вот такие: "owl.carousel.min.js", "jquery.nouislider.all.min.js". Я думаю один из них.
В противном случае можете написать свой.
При клике на дом, блок с домами уменьшается в ширину, со свойством float: right, transition: 1s и появляется блок с описанием. Хотя лично мне такая реализация не нравится.

Comments

[Александр]

Возможно Вы поделитесь примера с подобными эффектами?

[Stalker_darkway]

Александр: Ну вот на этом сайте немного не такой эффект, но принцип тот же, просто боковое меню за пределы видимости уезжает: iflinn.ru
В калькуляторе добавляйте и удаляйте товар. И увидите как боковое меню появляется и пропадает.

Answer 2

[Евгений Бакулин]

То, что надо показать по клику - display: none - в CSS
На элементе - обработчик onclick - на обычном JavaScript - нужно установить у того, что должно быть показано, display: block
Для плавности переходов используйте transition
На крестике - обработчик onclick - устанавливаем обратно display: none

В общих чертах - как-то так... - CSS+JavaScript/jQuery