Gradually fade out element on scroll

A popular effect is to fade out an element when you start to scroll. You can do that by checking how far the user has scrolled and then perform a fade out animation and do the reverse if the users scrolls back up. But the effect gets even a little bit nicer if you gradually fade out the element according to how far the user has scrolled.
You can achieve this effect with just a few lines of jQuery.

First we store the element we want to animate in a variable we don’t have to look for it on every scroll event.

var myElement = $('.js_my-element');

If the user scrolls we grab the scroll position and store it in variable.

$(window).on('scroll', function() {
    var st = $(this).scrollTop();

Then we update the opacity value on our element. For that we divide the scroll position by a value of our choice. A higher value means the user has to scroll a longer distance before the element has completely faded out. Then we subtract the result from 1 and apply the result as the new opacity value.

    'opacity' : 1 - st/600

This is the complete code:

var myElement = $('.js_my-element');

$(window).on('scroll', function() {
    var st = $(this).scrollTop();
        'opacity' : 1 - st/600

How to Style Input Type Range in Chrome, Firefox, and IE

Brenna O’Brien:

The new HTML5 range input gives you a nifty slider UI component. But of course it looks wildly different and kind of blah across browsers. Don’t worry, you can style input[type=range] in any browser!

It’s nice to see that there is a way to style the input type range cross browser, but the vendor prefixes are from hell. Please browser vendors, work together not against each other…


Seti UI is an incredibly good Sublime Text 3 Theme and ColorScheme. I love pretty much everything about it. Give it a try.

Custom WordPress Template Includes

What if <?php get_header(); ?>, <?php get_footer(); ?> and the other few WordPress includes aren’t enough and you would like to split your template files into smaller parts?

There is a quite nice and easy way to import PHP template parts into your usual WordPress templates:

<?php include (TEMPLATEPATH . '/includes/my-template-part.php'); ?>

TEMPLATEPATH points into the folder of your theme. There I usually create a folder for includes. Hope that helps!


Or you could use get_template_part.

<?php get_template_part( 'includes/my-template-part' ); ?>

Sublime Text for Front End Developers

Wes Bos:

Rather than being a step by step guide on Sublime Text, this post is filled with hot tips, tricks and packages that will make you amazing with Sublime Text.

You are working with Sublime Text? Then this article is for you.

mobile-friendly pages criteria

Google Webmaster Central Blog:

A page is eligible for the “mobile-friendly” label if it meets the following criteria as detected by Googlebot:

Avoids software that is not common on mobile devices, like Flash

Uses text that is readable without zooming

Sizes content to the screen so users don’t have to scroll horizontally or zoom

Places links far enough apart so that the correct one can be easily tapped

If you’re wondering which criteria you have to meet, here you go. At the moment the mobile-friendly tag is a helper for users but Google is also experimenting with integrating it into the ranking. So make sure your site gets the mobile-friendly tag.

Google Mobile-Friendly Test

Google is adding small “mobile-friendly” tags to search results if the site is eligible. With the linked tool you can analyze if you site is a match.

Performance Budget Metrics

Tim Kadlec:

The purpose of a performance budget is to make sure you focus on performance throughout a project. The reason you go through the trouble in the first place though is because you want to build a site that feels fast for your visitors.

Tim analyses the different metrics you can use as a performance budget and explains how effective they are.

Your developers aren’t slow

Justin Jackson:

Feel like your team isn’t shipping fast enough? Chances are, your developers aren’t to blame.

It’s often the process, which is to blame. As a developer who has worked in agencies I was nodding my head while reading this article. I guess you will do the same.

Workplaces of Web Professionals, Part 2

After the positive feedback of Part 1 of Workplaces of Web Professionals I reached out to more people in our industry and asked them if they want to contribute their workplace to the next post.

It was a little bit harder and took a while to gather enough photos but in the end it worked out, even though I sadly didn’t get a response from everyone I approached. I want to thank all of the participants for their time and for letting us taking a look into their private spaces.

Lara Hogan (at Etsy) 

Read Article …