How to Add Web Design Elements that Fade In and Out on Scroll

Published

September 11, 2017

Author

Rik Lomas

Topics

For the launch of the second edition of Learn To Code Now, we look at how to create a fading in effect for tags on our page, hiding and showing them as we scroll using Javascript and CSS.

A common web design technique that uses the parallax effect is the idea of scrolling down a web page and then having certain elements pop into life as your user goes further and further down.

So how do we know this is using a parallax-style effect? As our users scroll pixel by pixel down the page, we can do a check to see whether or not we should animate the tag in or not. The telltale signs of a parallax effect is whether the effect depends on pixel by pixel scrolling.

Portland agency, Instrument, use this effect heavily on their site.

Let’s build up this effect and think about what we want to happen. We’re going to say as soon as certain tags are “in view” (e.g. the user can see some portion of them), then we want to fade that tag in. Every time the user scrolls, we want to do a check, and that check will be look at each tag and if it’s within the browser window, fade it in.

We’re going to put this effect on each <section> tag on the page but you can change this to fit which tags or CSS selection you want.

We want to do this fade effect in CSS itself as this is the style of the page. We want to toggle a class on each section using Javascript. We’ll start with the sections all having no opacity but when they get a newly added class, they’ll fade in. Let’s call this newly added class visible.

section {
opacity: 0;
transition: opacity 1s;
}

section.visible { 
opacity: 1;
}

Added into our CSS stylesheet, it doesn’t just to have to be just for section tags, tailor to fit your needs.

Here we’re saying by default, make all section tags have no opacity and if the opacity does change, transition its change over a second. Later, we’ll add in a class using Javascript called visible to then fade it to full opacity.

We’re going to assume that we’re using jQuery in our project. If you don’t have it already, go to jQuery and download the most recent version and add it to your project.

<script src="jquery.js"></script> 
<script src="fadein.js"></script> 

Our HTML pages should include something that looks similar to this. jQuery is the downloaded file, fadein.js is our code.

Next, in our Javascript file, we want to do an event on scroll. Where do we add that event? On the whole page as we scroll it, so adding it to the document.

$(document).on("scroll", function () {})

The scroll event will run every time a user moves the page.

Next we want to find out how far down the page we’ve scrolled. Let’s save this to a variable called pageTop (remember, you can call variables whatever you like). We can use jQuery’s scrollTop() function to calculate how far down the page we are.

$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
})

Remember, variables can be called whatever you like as long as it’s one word.

As the names pageTop and scrollTop() suggest, we’re finding the amount of pixels down the document the top of the browser currently is. If we haven’t scrolled, the top of the browser window is currently 0 pixels down the document. But the threshold for tags coming into view isn’t the top of the browser window but the bottom of the browser window. How do we get the bottom instead of the top?

It’s easier than it sounds. We just need to add the height of the browser window to the pageTop variable. We’re going to save this as another variable called pageBottom. How do we get the height of the browser window? We don’t want to select the document this time (that’s the whole page itself), but the window and get its height.

$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height()
})

window is the browser, document is the page inside it.

A quick reminder: we don’t need to put quotation marks around window and document as they’re both special words in Javascript to denote the browser and the page respectively.

The new page for the Apple iPhone X uses a very similar effect.

So far, when we scroll down the page, we’re saving numbers to two variables – not very exciting. What we want to do next is independently check each section tag to see if that tag’s top position is above the bottom of the page, and if it is, fade it in using the CSS class we added.

Firstly, let’s save the tags we want to animate to another variable:

$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height()
var tags = $("section") 
})

This needs quotes as section isn’t a special word in JS.

Next, we want to loop over each one of those tags to independently check it. Half the tags might want to fade in but the other half might not. Let’s use a loop to go over each one.

$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height()
var tags = $("section")

for (var i = 0; i < tags.length; i++) { }
})

Three parts to a loop; where it starts, where it will end and how it steps.

The tags variable is an array (or list) of tags we’ve picked. We’re starting our loop at zero, as computers count from there. We’re making sure that the loop is only for the amount of tags we have in the tags array and we’re adding one to the loop each time. Next let’s pick each individual tag within the loop itself.

$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height()
var tags = $("section")

for (var i = 0; i < tags.length; i++) {
var tag = tags[i] 
}
})

Get the individual tag in our list of section tags.

Remember that variables by their very name are changeable. Each time we run the loop, the new tag variable will be each individual tag to use. What do we want to do with each individual tag? We want to use jQuery to check its top position and if it’s visually higher up the page that the pageBottom variable, add a CSS class to it.

To get a tag’s position in jQuery, we can select it with jQuery then we can use .position(). This will give us back an object that contains its top and its left position. We want to just use the top, so we can select it by using .position() then .top – no brackets after that as we’re just picking something from an object.

$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height()
var tags = $("section")

for (var i = 0; i < tags.length; i++) {
var tag = tags[i]

if ($(tag).position().top < pageBottom) {   $(tag).addClass("visible")}
}
})

If the tag’s top position is above the bottom of the visible part of the page.

Currently this will be a one-way effect: as soon as the tag is within the viewable area, it adds the visible class to it. If it goes outside the viewable area, it doesn’t remove the tag to fade it back out. We could easily add this with an else condition to say if it goes back outside the viewable area, fade out again.

$(document).on("scroll", function () {
var pageTop = $(document).scrollTop()
var pageBottom = pageTop + $(window).height()
var tags = $("section")

for (var i = 0; i < tags.length; i++) {
var tag = tags[i]

if ($(tag).position().top < pageBottom) {
$(tag).addClass("visible")
} else {  $(tag).removeClass("visible")
}
}
})

Hide it again if we scroll back up.

A common alternative to this technique is to not just fade in the tag but to make it look like it’s moving upwards too. As this is the visual styling of how it’s fading it, we just need to alter our CSS styles to make it look different when that class is added or removed.

section {
opacity: 0;
transform: translate(0, 20px); transition: all 1s;
}

section.visible {
opacity: 1;
transform: translate(0, 0); 
}

Not just fade in… fade in and bounce up.

We’re using the CSS transform rule rather than the top rule as it’s a little smoother plus we want to clash with any other top rules we might have. We’re starting the sections with no opacity and 20px further down the page compare to the final position. Then when we add the visible class, we are making it full opacity and moving it to its correct position.

This is a really powerful web design technique that looks a lot more complicated than it actually is. In reality it’s only around 15 lines of Javascript with 9 lines of CSS. Sometimes the most visually stunning web design techniques can be done in under 100 and even under 25 lines of code.

Our book Learn To Code Now Second Edition will be available this week, but buy the printed copy today and we’ll ship you the latest edition now.

Have no idea what’s happening in this tutorial? Learn to code with students all over the world on our 8-week beginner’s course.

Share this post
About the author

Rik is a Mancunian coder, teacher and CEO of SuperHi. He was the co-founder of Steer (a code school in London) and has taught several thousand people to code. He is a bit too old to be posting memes on our social media and recently featured as a Sour Patch Kid in the Macy's Thanksgiving Parade.

Published

September 11, 2017

Author

Rik Lomas

Topics

Related posts

INTERVIEW

Catching Up With... Kelsey Gilbert-Kreiling

ADVICE

Ask a Designer #17: How do I communicate design decisions?

ARTICLE

How to Land Your First (or Next) Remote Job

Want more? Sign up for our newsletter for more articles, resources, and fresh inspiration!