Как горизонтально прокручивать div с эффектом линейного градиента?
Я хотел бы горизонтально прокручивать элементы (синие поля), в то время как эффект градиента контейнера (эффект белого затухания на концах) применяется только к элементам в начале и конце прокрутки. Ниже приведено самое близкое, что я получил до сих пор. Но сейчас градиент кажется запеченным в элементах, когда я прокручиваю их. Но если я не оберну элементы под контейнер, градиент не повлияет на сами элементы. Как я могу сделать так, чтобы эффект градиента был в одной позиции, и я мог перемещаться по своим элементам, чтобы только те элементы, которые прокручиваются за пределы градиента, имели эффект, как при обычной навигации?
.container {
position: relative;
display: inline-block;
white-space: nowrap;
overflow-x: scroll;
}
.container:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
}
.item {
display: inline-block;
width: 150px;
height: 150px;
background-color: blue;
}<div class = "container">
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
</div>
Ответы 2
Добавьте background-attachment: fixed;
.container {
position: relative;
display: inline-block;
white-space: nowrap;
overflow-x: scroll;
}
.container:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background-attachment: fixed;
}
.item {
display: inline-block;
width: 150px;
height: 150px;
background-color: blue;
}<div class = "container">
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
</div>Вы можете добавить еще одну точку в свой линейный CSS, чтобы «вытянуть» непрозрачность дальше, например:
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 100%);
Вам придется поиграть с двумя средними цветовыми точками, чтобы они соответствовали вашей идее. Вы также можете применить линейные градиенты только к первому и последнему DIV.