Home Web Design CSS CSS Text Fade Out On Scrolling Effect | Pure CSS Fade Out...

CSS Text Fade Out On Scrolling Effect | Pure CSS Fade Out Text

June 30, 2019

9557

How we can create a text fade out effect using HTML & CSS? Solution: CSS Text Fade Out On Scrolling Effect, Pure CSS Fade Out Text effect on the scroll.

Maybe you know about fade out effect, Fade out is a transition where the object slowly disappears. That same effect we can implement on texts on the webpage also. This fade-out effect will work when you scroll up or down to read the article. You can use this on your website or blog.

Today you will learn to create fade-out transition effect on texts or paragraphs. That’s not a difficult thing to create or understand, this is a very short program with fewer codes. Actually, this fade-out effect is based on background-clip and background-attachment property in CSS.

So, Today I am sharing CSS Text Fade Out On Scrolling Effect. A pure CSS fade out text effect, which works on the scroll. When any user will start scrolling down to read the article, then the text goes upper side with fade out transition effect. I know this is a very basic but useful thing to your knowledge.

If you are thinking now how this text fade out effect actually is, then see the preview given below.

Preview Of Paragraph Fade-Out Transition

See this video preview to getting an idea of how this effect looks like.

https://webdevtrick.com/wp-content/uploads/text-fade-out-effect-on-scrolling.mp4?_=1

Now you can see this visually. If you like this then get the source code of its.

CSS Text Fade Out On Scrolling Effect Source Code

Before sharing source code, let’s talk about it. For creating this fade-out effect I used display: grid; in the body tag. I positioned the last paragraph at bottom using body :last-child { margin-bottom: 0; }. I have used an image & a google font in this program. The main thing is in this concept I a background gradient for the paragraph, that creates the fade-out effect.

With the gradient, I have used background-clip: text; in the P tag. This also has a responsive design using CSS @media query. I have just reduced the font size on small screens. Left other things you will understand after getting the codes.

For creating this you have to create only 2 files, One for HTML, & one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com )  -->
<html>

<head>
  <meta charset="UTF-8">
  <title>Text Fade Out Text | Webdevtrick.com</title>
  
  <link href="https://fonts.googleapis.com/css?family=Bahianita&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="./style.css">
  
</head>

<body>
  <div class="text">
  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>

<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>

<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>

<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>

<p>Vestibulum euismod vehicula sollicitudin. Duis nibh justo, rhoncus ac ullamcorper nec, rutrum sit amet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum varius posuere nisi sed aliquet. Etiam dolor nisi, placerat vel congue tempus, posuere sed erat. Phasellus turpis eros, molestie sed consequat in, pretium at erat. In sed faucibus metus. Vestibulum fermentum libero nec eros fermentum dapibus. Duis nec libero eros. Pellentesque magna ligula, sagittis dictum fringilla at, posuere porttitor sem. Donec aliquam, ipsum quis pulvinar dapibus, augue sem viverra sapien, nec tempus odio nulla ac metus. Nunc ut augue mi, nec consequat urna.</p>
</div>
  

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Text Fade Out Text | Webdevtrick.com</title>

</head>

<body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.

Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.

Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.

Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.

Vestibulum euismod vehicula sollicitudin. Duis nibh justo, rhoncus ac ullamcorper nec, rutrum sit amet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum varius posuere nisi sed aliquet. Etiam dolor nisi, placerat vel congue tempus, posuere sed erat. Phasellus turpis eros, molestie sed consequat in, pretium at erat. In sed faucibus metus. Vestibulum fermentum libero nec eros fermentum dapibus. Duis nec libero eros. Pellentesque magna ligula, sagittis dictum fringilla at, posuere porttitor sem. Donec aliquam, ipsum quis pulvinar dapibus, augue sem viverra sapien, nec tempus odio nulla ac metus. Nunc ut augue mi, nec consequat urna.

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com )  **/
  

html {
  height: 100%;
  display: grid;
}

body {
  width: 80%;
  max-width: 20em;
  padding: 25vh 1em;
  margin: auto;
}
body :last-child {
  margin-bottom: 0;
}

html {
  background: #333;
  background-image: url(https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  color: white;
  font-family: 'Bahianita', cursive;
  font-weight: 500;
  font-size: 3.5vw;
}

.text {
    background-image: linear-gradient(transparent 10%, currentColor 30%, currentColor 70%, transparent 90%);
	-webkit-background-clip: text;
    background-clip: text;
    background-attachment: fixed;
  }
  .text > * {
    color: transparent;
  }

@media (min-width: 800px) {
  html {
    font-size: 28px;
  }
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

html {

height: 100%;

display: grid;

}

body {

width: 80%;

max-width: 20em;

padding: 25vh 1em;

margin: auto;

}

body :last-child {

margin-bottom: 0;

}

html {

background: #333;

background-image: url(https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg);

background-position: center center;

background-size: cover;

background-attachment: fixed;

color: white;

font-family: 'Bahianita', cursive;

font-weight: 500;

font-size: 3.5vw;

}

.text {

background-image: linear-gradient(transparent 10%, currentColor 30%, currentColor 70%, transparent 90%);

-webkit-background-clip: text;

background-clip: text;

background-attachment: fixed;

}

.text > * {

color: transparent;

}

@media (min-width: 800px) {

html {

font-size: 28px;

}

That’s It. Now you have successfully created CSS Text Fade Out On Scrolling Effect. In other words, Pure CSS Fade Out Text effect on the scroll. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.