» »

Переход направление вверх и вниз на CSS

Переход направление вверх и вниз на CSS

Эффект направление вверх и вниз выпадающего списка, который создан при помощи CSS, где может скрыть информацию и по клику открыть список. Если есть возможность не использования JavaScript для анимации элементов, то это будет отличным решением для любого интернет сайта. Здесь точно не могу сказать, что за материал, похоже на слайд, так как можно открыть описание и также аналогично по клику скрыть.

Что безусловно под функциональность она пригодится на любой площадке. Чтобы сделать это, нам нужно немного манипулировать классом кнопок в стилистике. Где высоту и ширину можно выставить, где все заключается в том, что вы можете скрывать она, это контент или возможно информер, или кнопка. После игры с разными свойствами CSS, бал добавлен чистый эффект скольжения CSS.

Теперь, когда панель слайда скрыта, наша задача, включить событие зависания на кнопке подписки, чтобы раскрывающийся div показывался вверху страницы. Вы могли бы спросить, почему мы установили ссылку подписки на выдвижную панель и выталкивали ее в основной контейнер, а не размещали в основном контейнере. Когда вы наводите курсор на кнопку подписки, выпадающий div появляется. Но весь процесс происходит без эффекта анимации. Единственное, что требуется сейчас, это оживить все это с помощью CSS3.

Проверяя, здесь немного изменил, добавил обвот и палитру цвете:

Чистый CSS слайд с функцией вверх и вниз

HTML

Эффект действительно требует только одного элемента, поэтому мы будем придерживаться этого:

Код
<div style="height: 185px; width: 185px; border: 2px solid #b5b3b3;">
  <div class="detukolas" id="slider">
  <p>Бла-бла-бла-бла-бла ....</p>
  </div>
  </div>

  <button onclick="document.getElementById('slider').classList.toggle('closed');">Переключатель</button>

CSS

Код
.detukolas {
  overflow-y: hidden;
  max-height: 185px;
  -webkit-transition-property: all;
  -webkit-transition-duration: .5s;
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -moz-transition-property: all;
  -moz-transition-duration: .5s;
  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -ms-transition-property: all;
  -ms-transition-duration: .5s;
  -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  background: #273e80;
  height: 185px;
  width: 180px;
  color: #f9efef;
  padding: 0px 0px 0px 5px;
}

  .detukolas.closed {
  max-height: 0;
  }

input[type='submit'], button, .button, .pagination a, .actions a, .green-button, #comment-form input[type='submit'] {
  background: #f9f9f9;
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid #eee;
  margin: 0 9px 0 0;
  text-decoration: none;
  cursor: pointer;
  color: #07a;
  margin-bottom: 10px;
}

Прежде чем попасть в трюк, давайте определим несколько очевидных свойств.

Здесь самостоятельно выставляем ширину и высоту, так как элемент не фиксирован по высоте, что в этом случае у вас есть два варианта.

Демонстрация
2018-06-12 Просмотров: 437 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Kosten
Kosten 2018-06-12 00:191
0
Просто гуляя по зарубежному сайту, вот нашел такой материал, так как перевод не очень сильно что то дал, но все же решил залить на сайт, так как считаю, что под функцию пригодится, так как на ресурсе их хватает, к применению.

Возможно кто в курсе, что за слайд, который по умолчанию открывает, хотя должно по идее наоборот, где сам пользователь по его мнению должен открывать.
-SAM-
-SAM- 2018-06-13 04:232
+2
Ну, тут такой эффект, не путать со спойлером.

Кстати, по поводу слов "действительно требует только одного элемента", то кто хочет размножить, чтобы не потерялась правильная работоспособность в других случаях, рекомендую почитать вот это (про идентификатор, а то мало ли куда захотите поставить себе).
avatar