0

Подскажите начинающему ломастеру как правильно реализовать плавно выезжающий блок сверху страницы...
Блок содержит фото(обложка профиля) opacity не интересен..
Более интересно в виде toggle? Соответственно после покидания страницы, чтобы этот блок так же плавно и заезжал

.prpic1 { 
  position: absolute;

  width: 100%;
  height: 0px;
  background: rgb(255, 255, 255);
  border-radius: 0px 0px 25px 25px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}
<div class="prpic1">
  <img src="img/profilepicture.jpg">
</div>

P.s.

Есть страница Home главная, и на ней есть ссылка на страницу Profile.
Так вот, я хочу, когда переходишь на страницу Profile, сверху плавно опускался блок и оставался на том же месте, пока я нахожусь на этой страницы, но когда я ухожу со страницы Profile, например на ту же страницу Home, то этот блок должен плавно подниматься вверх в обратном порядке

2
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 23 дек 2022 в 17:08
  • есть страница Home-она главная, и на ней есть ссылка на страницу Profile. так вот, я хочу, когда переходишь на страницу Profile, сверху плавно опускался блок и оставался на том же месте, пока я нахожусь на этой страницы, но когда я ухожу со страницы Profile, например на ту же страницу Home, то этот блок должен плавно подниматься вверх в обратном порядке 23 дек 2022 в 17:14

2 ответа 2

1

Всё оказалось намного проще чем ожидалось)
реализовал через функцию JQuery

$(document).ready ( function(){
  $(".prpic1").animate({height: '180'}, 700) 
});
1

Странно, что вы не говорите как у вас реализован момент отлавливания "ухода" со страницы, это важно..

По этом в качестве примера покажу вариант на кнопках.

var prpic1 = document.querySelector('.prpic1');

document.querySelector('#show').addEventListener('click', function() {
  prpic1.classList.add('prpic1--show');
});

document.querySelector('#hide').addEventListener('click', function() {
  prpic1.classList.remove('prpic1--show');
})
.prpic1 { 
  display: inline-block;
  border-radius: 0 0 25px 25px;
  background: #ccc;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 5px;
  transform: translateY(calc(-100% - 15px)); /* - 15px => тень */
  transition: transform 1s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

.prpic1.prpic1--show {
  transform: translateY(0);
}

.prpic1 img {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0;
  object-fit: contain;
}
<div class="prpic1">
  <img src="https://i.imgur.com/cVbIawF.png">
</div>

<input type="button" id="show" value="Пришёл" style="margin-top: 110px;">
<input type="button" id="hide" value="Ушёл">

Тут по сути всё завязано на CSS.
Для появления карточки вы добавляете класс .prpic1--show, а для скрытия - убираете его.


Тянуть JQ ради .animate вообще не советую, у JS анимация тоже есть

2
  • доброго вечера) да, вы абсолютно правы, эффект убирания блока я так и не реализовал((( увы не смог дойти до этого мозгами(((... дело в том что кнопками не подходит вариант... может быть подскажите как это реализовать без кнопок??? а на автоматике? 24 дек 2022 в 20:00
  • Отловить когда пользователь "пришёл" и "ушёл" стандартными средствами почти нельзя, по этому никто не заморачивается "ушёл ли" пользователь. А вот вместо "пришёл" можно использовать ивент DOMContentLoaded или load, об этом читайте в гугле. Либо используйте PJAX (Barba.js например), там уже можно отлавливать "пришёл\ушёл"
    – De.Minov
    25 дек 2022 в 12:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.