Как сделать разметку текста под изображением, прокрутив его вверх? - PullRequest
Новая
       42

Как сделать разметку текста под изображением, прокрутив его вверх?

0 голосов
/ 21 апреля 2020

Можно ли постепенно скрыть текст с сайта после его прокрутки вверх под изображением? Только с использованием HTML и CSS?

Это мой body пример: 

<img src="./image.gif">
<p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p>

1 Ответ

0 голосов
/ 21 апреля 2020 

img{
  position:fixed;
  top:0;
  left:0;
}
/* or like this */
#grad{
  position:fixed;
  left:300px;
  top:0px;
  height:150px;
  width:300px;
  z-index:10;
  background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

body{
margin-top:170px;
}
<img src="https://29comwzoq712ml5vj5gf479x-wpengine.netdna-ssl.com/wp-content/uploads/2020/01/default.svg">
<div id="grad"></div>

<p> some text to scroll up... some text to scroll up... some text to scroll up... some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p>
...