Исчезать дочерние элементы flexbox по краю прокрутки div? - PullRequest
Новая
       33

Исчезать дочерние элементы flexbox по краю прокрутки div?

0 голосов
/ 30 марта 2019

У меня есть контейнер flexbox с дочерним элементом div: 

.flex-l, .flex-c {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-l {
  justify-content: flex-start;
}

.flex-c {
  justify-content: center;
}

.sidebar {
  width: 100%;
  height: 100vh;
  background: rgba(0 ,0 ,0 ,0.05);
}

.selector-bar {
  width: 90%;
  height: 5vh;
  overflow: auto;
}

.selector-bar::-webkit-scrollbar {
  display: none;
}

.sidebar-group-img, .sidebar-friend-img {
  height: 2.2vw;
  width: 2.2vw;
  margin: 0.2vw;
  flex-shrink: 0;
}

.sidebar-group-img {
  background: rgba(46, 204, 113, 0.6);
}

.group-chat-text {
  opacity: 0;
  transition: 1s;
  position: relative;
  z-index: 10;
  transform: translate(21px);
}

.group-chat-img {
  opacity: 1;
  transition: 1s;
  position: relative;
  z-index: 11;
  transform: translate(-17px)
}

.sidebar-group-img:hover .group-chat-text {
  opacity: 1;
  transition: 0.2s;
}

.sidebar-group-img:hover .group-chat-img {
  opacity: 0.25;
  transition: 0.2s;
}
<div class="flex-l selector-bar">
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-1.jpg" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-2.jpg" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-3.jpg" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-4.png" alt="Group Logo">
  </div>
  <div class="flex-c sidebar-group-img">
    <h4 class="group-chat-text">Chat</h4>
    <img class="group-chat-img" src="./img/logo-5.jpg" alt="Group Logo">
  </div>
</div>

Я бы хотел добавить эффект затухания к контейнеру selector-bar примерно так: https://codepen.io/timothylong/pen/RodjKW

Проблема в том, что мой контейнер прозрачен, поэтому я не могу просто использовать linear-gradient. Я пытался, но не могу придумать, каким образом я не умаляю непрозрачность.

Я также видел это: https://codepen.io/annalarson/pen/GesqK Я тоже не хочу этого, поскольку хотел бы визуально видеть постепенное исчезновение без взаимодействия с пользователем.

Единственный способ, которым я вижу, как это сделать - это нацелиться на сами дочерние элементы и заставить их исчезать, когда они находятся близко к краю контейнера. Я не могу понять JS.

Я также использую ванильный JS. Не jQuery.

Возможно ли это?

1 Ответ

0 голосов
/ 30 марта 2019

Вы можете добавить элемент div под контейнером всех элементов и задать ему абсолютную позицию и градиентный фон. Вам также нужно иметь другой элемент контейнера с относительным положением и поместить в него оба этих контейнера.это пример: 

<div id="mainContainer">
    <div id="itemsContainer">
        <div class="itemOuter">Item 1</div>
        <div class="itemOuter">Item 2</div>
        <div class="itemOuter">Item 3</div>
        <div class="itemOuter">Item 4</div>
    </div>
    <div id="overlayContainer"></div>
  </div>

#mainContainer{
    position: relative;
}
#overlayContainer{
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    height: 100%;
    pointer-events: none;
background: -moz-linear-gradient(top, rgba(30,87,153,0) 50%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 50%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,0) 50%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
...