How do I blur incoming and outgoing text/elements when scrolling?

Question

Edit: neokio in the comments has answered my question. I don't know if you can accept a comment as a best answer, however, I'm going to do a little digging and see if you can before marking this question as solved. To those searching for the same thing, search for "gradient transparency masking".

Edit 2: This is the code I have used on my website for those who want to achieve this effect:

 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(5%, rgba(1,1,1,1)), color-stop(95%, rgba(1,1,1,1)), color-stop(100%, rgba(0,0,0,0)));

 mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 5%,
    rgb(0, 0, 0, 1) 95%,
    rgba(0, 0, 0, 0) 100%
    );

I would like to achieve the effect mentioned here for both the top and bottom of a div.

When I had a solid background, I could achieve it fine. However, I am now using a changing background with a gradient and I can no longer use anything that relies on a fixed gradient or colours.

I want to blur the incoming and outgoing content into the background when I scroll, rather than having it disappear abruptly (the div that is scrollable is within the page, it is not the entire page.

I have looked at seeming duplicates, however, none of them achieve this. All of them ultimately rely on using a solid colour or background image.

Thanks in advance.

I think you are looking for [parallax scrolling effect](https://www.youtube.com/watch?v=TawH-AqHTXc]=) — Weilory, Sep 15 '20 at 00:37
If I understand correctly, you're looking for gradient transparency masking (not background color masking). Search for that, and you'll come up with examples like this ... https://css-tricks.com/webkit-image-wipes/ — designosis, Sep 15 '20 at 02:18

score 0 · Answer 1 · answered Sep 15 '20 at 03:04

div {
  height: 100px;
  width: 200px;
}

ul {
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  height: 100%;
}

li {
  font-family: Arial;
  font-weight: bold;
}

<div>
  <ul>
    <li>1) Item 1 - Test</li>
    <li>2) Item 2 - Test</li>
    <li>3) Item 3 - Test</li>
    <li>4) Item 4 - Test</li>
    <li>5) Item 5 - Test</li>
    <li>6) Item 6 - Test</li>
    <li>7) Item 7 - Test</li>
    <li>8) Item 8 - Test</li>
    <li>9) Item 9 - Test</li>
  </ul>
</div>

How do I blur incoming and outgoing text/elements when scrolling?

1 Answers1