Я начинаю и пытаюсь отобразить детали карты/плитки со скользящего дна страницы над действием клика. Я уже нашел один из шаблонов с моими требованиями и попытался настроить. Я нашел несколько примеров кода, как сделать эффект скольжения снизу. Я смог найти решение, но он работает с действием наведения, где я пытаюсь сделать это, как показано ниже.
Сценарий: как показано на скриншоте макета >> Карты будут отображаться на главном экране >> пользователи нажимают на один из Карт >> фон должен быть прозрачным на 50%, а детали фильма должны отображаться в скользящей панели кнопок >> PLAY NOW should быть активным
Как и загрузка левого меню в данном шаблоне ниже - шаблон playdo
один из подобных примеров я нашел, но, как я уже упоминал, это функция зависания - Сдвижная нижняя панель через HTML, CSS и JS
Другой из верхнего скользящего - http://hoveralls.design-way.ro/
Шаблон на скриншоте, который я использую, - https://github.com/tomclaus/playdo
Привет и добро пожаловать в внешний мир.
Вам нужно создать два разных класса css, которые содержат вещи, которые вы хотите изменить (в этом случае верх и прозрачность). Один из них, когда ваша карта/плитка "сведена к минимуму" и одна для "максимизирована".
.minimized{
background-color: rgba(255,255,255, 0.5);
top: 90%;
}
.maximized{
background-color: rgba(255,255,255, 1);
top: 75%;
}
а затем примените событие click к вашей карте/названию, используя jQuery или Javascript, и замените эти классы, чтобы дать правильное поведение.
$("#card").click(function(){
if($(this).hasClass('minimized')){
$(this).removeClass('minimized');
$(this).addClass('maximized');
}
else{
$(this).removeClass('maximized');
$(this).addClass('minimized');
}
});
Убедитесь, что CSS для вашей карты/плитки включает в себя следующее:
-webkit-transition: all ease 1s;
Эта линия даст плавный переход, когда вы замените минимизированные и максимизированные классы.
Пожалуйста, проверьте этот jsfiddle, чтобы увидеть код в действии.
пс. Поскольку я использую префикс "-webkit-" для перехода, этот пример будет работать только с браузерами webkit (сафари и хром)
Хорошо, я наконец понял, что вы хотите сделать с макетом. Ну, идея такая же, и я уверен, что она может быть реализована многими другими способами, но я надеюсь, что это поможет вам понять, что происходит.
В значительной степени вам нужны два состояния (классы) для действий, которые вы хотите достичь.
Минимизирован и Максимизирован для div, в котором содержатся детали фильма.
#details{
z-index: 4;
position: absolute;
-webkit-transition: all ease 1s;
background-color: #2980b9;
color: white;
padding: 30px;
width: 100%;
height: 300px;
}
.minimized{
top: 100%;
}
.maximized{
top: 40%;
}
И еще два для "серого халата", который сидит на вершине карт, когда детали отображаются.
#courtain{
position:absolute;
background-color: rgba(100,100,100, 0.5);
width: 100%;
height: 100%;
}
.active{
z-index: 2;
}
.deactive{
z-index: -1;
}
Все это должно контролироваться или переключаться с помощью Javascript с событием клика для Карты.
function hideAndShow(){
var details = $('#details');
var courtain = $('#courtain');
if(details.hasClass('minimized')){
courtain.removeClass('deactive');
courtain.addClass('active');
details.removeClass('minimized');
details.addClass('maximized');
}
else{
courtain.removeClass('active');
courtain.addClass('deactive');
details.removeClass('maximized');
details.addClass('minimized');
}
}
Важно проверить значения "z-index" на состояниях, чтобы правильно их разместить над другим, тот, который имеет наибольшее значение z-индекса, остается тем, что остается на вершине.
Я обновил JSFiddle, проверьте его и, надеюсь, все это делает смысл.