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
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. Commented 23 дек. 2022 в 17:08
  • есть страница Home-она главная, и на ней есть ссылка на страницу Profile. так вот, я хочу, когда переходишь на страницу Profile, сверху плавно опускался блок и оставался на том же месте, пока я нахожусь на этой страницы, но когда я ухожу со страницы Profile, например на ту же страницу Home, то этот блок должен плавно подниматься вверх в обратном порядке Commented 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
  • доброго вечера) да, вы абсолютно правы, эффект убирания блока я так и не реализовал((( увы не смог дойти до этого мозгами(((... дело в том что кнопками не подходит вариант... может быть подскажите как это реализовать без кнопок??? а на автоматике? Commented 24 дек. 2022 в 20:00
  • Отловить когда пользователь "пришёл" и "ушёл" стандартными средствами почти нельзя, по этому никто не заморачивается "ушёл ли" пользователь. А вот вместо "пришёл" можно использовать ивент DOMContentLoaded или load, об этом читайте в гугле. Либо используйте PJAX (Barba.js например), там уже можно отлавливать "пришёл\ушёл"
    – De.Minov
    Commented 25 дек. 2022 в 12:18

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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