News

Use CSS and HTML to create a blur text effect

Stylise your typography with professional blur effects using HTML, CSS and Skrollr

BlurText

When typefaces are the very nature of your business, such as with Font Font, who design and produce some of the best typefaces in the industry, then your site must show these off in all their glory. The ffmark.com site has some lovely touches on the website, such as being able to edit type on books, page layouts and even with a world clock.

Not only does the user have the ability to edit these typefaces but they can change them and see them in action before purchasing the associated type. This site really shows off the rich typography that is now available for all web designers to use today.

TECHNIQUE

Style the body

We’re going to start this project by adding some CSS which can be placed either in the head of the document or in a separate CSS file. Here we are making the font weight bold and increasing the default size of the text on the page. As we are blurring text, it’s a good idea to make it just a little bigger.

Position the text

We now position our text that will be placed into a container with the ID of intro. We are making this fixed on the screen so that as the scrollbar moves down the page we can still see the text. This is important as we’ll be blurring the text. We centre the text on the page.

001 #intro {
 002     position: fixed;
 003     width:80%;
 004     left:50%; top:1em;
 005     margin-left:-40%;
 006     padding:2em;
 007     text-align:center;
 008 }
 009 .top { margin-bottom: 80px;}
 010 </style>

Add body copy

We will now move to the body section of our HTML document and add in the intro ID <div> to place our text inside. We then add our text to another <div> that has a data element. This will be picked up by JavaScript with the Scrollr (github.com/Prinzhorn/skrollr) library that we’ll add in the final step.

001 <div id=”intro”> 
 002    <div class=”top” data-0=”color:     transparent; text-shadow: 0 0 0.1px     rgba(0,0,0,1);” data-1000=” text-    shadow:     0 0 32px rgba(0,0,0,0.5);”>
 003        <h1>FOCUS YOUR MIND</h1>
 004        <p>Scroll down to focus the text</    p>
 005    </div>

The remaining text

The first text will blur out as the user scrolls and the next text will become sharp. We are doing this by setting a 32px text-shadow blur at 0px scroll, while at 1000px scroll we change the text-shadow blur to 0 – so no blurring at all. We then hide the original text so that we can only see the text shadow.

001 <div data-0=”color: transparent;     text-shadow: 0 0 32px rgba(0,0,0,0.5);”     data-1000=”text-shadow: 0 0 0         rgba(0,0,0,1);”>
 002        <h2>ALL WILL BE REVEALED</h2>
 003        <p>CSS text-shadow blur controlled     by scrolling</p>
 004    </div>
 005 </div>    

Finishing touches

Download the Scrollr library from GitHub and move the ‘dist’ folder into your local folder. Then, before the closing body tag, add the code shown below to link up the library and start it all up. Now save the document and view it in the browser to see everything in action.

×