Showing images on scroll - CSS animation tutorial

[Music] showing content on scroll it's time to add some animation to our page when a visitor Scrolls in this lesson we'll learn how to make use of the requestanimationframe method and detect when elements are within a viewport of the browser we'll introduce a new will change property and use that to make sure our animations are smooth and we'll put these together with some transitions to create animations that are triggered on scroll to get started open the module three sample code zip file and look for folder zero one start a completed version of this lessons code is in the folder 0 1 and in the index dot HTML file you'll find a couple of page sections the first is a header that contains the main photo and heading text beneath this we have a longer article it's made up of paragraphs and images I've added the class inline photo to each of these images will use this class to style the images as well as animate them let's see how it looks we can see the images and the text but no animation yet for this lesson we'll be using some JavaScript the idea is to check as the page is scrolled for any special elements we want to animate if any of these special elements are visible we can give them a class and use CSS to animate or transition them into view to do this we will need two things we will need the JavaScript to detect and add a class when one of these elements is visible and we'll need to set up before and after styles on the elements let's begin with our JavaScript at the end of the HTML file you'll find a reference to the javascript file show on scroll j s this is in the java scripts folder it's blank for now this is where we'll set up the code to detect scrolling and check for those elements we want to show we won't be using jQuery for this one instead we're going to use a handy method built into browsers called request animation frame back in the day when building something like this I'd have used the scroll browser event and then checked the state of the page while scrolling this might work in some ways but sadly this has a couple of big problems the first being efficiency when scrolling the console log here will fire like crazy if we're doing anything like parsing the Dom tree or other heavy tasks this will add a lot of overhead to the browser it could very easily slow things down and make our animations janky a second issue is iOS scrolling on some phones only results in this scroll trigger being fired after the scrolling is finished we'd like this to work on mobile so that's a big fail there thankfully requestanimationframe solves these issues it's a method that we can use to repeatedly check our page to see if elements are visible while making sure we don't overload the browser by checking thousands of times per second it does this by limiting how often the callback is executed to either the screens refresh rate or 60 times per second to set up our requestanimationframe method we'll apply it to a variable this way we're able to have a fallback function for browsers that don't yet support it you here we're saying that scroll should be the window requestanimationframe method or if this isn't available use this simple function that waits one sixtieth of a second before calling the callback next we'll grab the elements on the page we want to look for you this will look for all elements with class scroll and return them as an array we can loop through let's set up that looping function we begin by setting up the function loop this is the function we to live through all the elements and check if they're visible we do this using the for each method for each of the show on scroll elements find this loop will check if it's in the viewport and if so add the class is visible you otherwise it will remove the class you lastly we want to keep firing this function so we'll make use of our requestanimationframe helper we set up earlier and pass this function as a callback this means that as soon as requestanimationframe eliza's it'll repeat this function and update classes as needed as it stands this won't do much yet we need to kick it off by calling the loop function now there's one bit missing in the loop function we're calling a method is element in viewport unfortunately this isn't the browser method we'll have to write that one ourselves here's a handy one I grabbed from stackoverflow just to run through this quickly it begins by checking to see if jQuery is defined jQuery changes the way elements are made available and this corrects for a possible issue that might arise next it uses a handy method called get binding client rect this is the rectangle around the element we want to check next it does a series of checks that will return true if the element is on the page and on the screen let's save this and setup our HTML to make use of this new power while there's a bit going on there in the JavaScript the result is quite simple it's going to apply an is visible class when selected elements show on the screen let's choose which elements we want to show in our index dot HTML file we start by adding the class show on scroll to each of the photos you lastly we'll also add this class to the header of the page it'll be nice to have an animation on the titles and since this is just adding a class we can totally do that in CSS in our browser we can now test this opening the inspector we should see the is visible class appearing and disappearing as we scroll time to use this for some animation in the scroll dot CSS file in the Style Sheets folder we find some initial Styles for the photos let's set these up to be animated by making a few changes we want these to fade in so we set the opacity to zero then we also want these photos to slide into place so let's adjust the transform to translate them down for em and give them a few degrees more rotation next we set up the transition we want to happen when these photos become visible we had a transition to the transform with a duration of four seconds a quarter second delay and the exponential ease out timing function we also fade it in using the opacity property making it a little quicker than the transform we're using a delay so that if our visitor is scrolling slowly the animation won't have finished before the photo is properly visible on the screen it's a small tweak but it helps the flow of the page lastly we add a property we haven't used yet the will change property this is a way of telling the browser to prepare to animate the element we supply this property to the values transform and opacity with this done the photos will be invisible we need to add some CSS to make them visible we add a new rule for the is visible classed elements in this we make invisible with an opacity of one and reset the transform to just slight rotation here's how it looks showing the images as we scroll down the page so far so good let's make use of the same JavaScript to bring animation to the header earlier we added the show once class to the header we could make use of the is visible class to animate this part too we will need to set up a couple of different animations first we'll have it fade in then the main photo will pop into place and the text will slide up into place beneath it since we're doing this by applying a class we have a situation where there's a change from one state to another when we change from one state to another it's a good opportunity to use transitions but if we wanted to do something more advanced here we could also use the keyframe and animation approach for now though we'll get by with a couple of transitions whenever possible I like to try to use the simplest approach before jumping into more complex solutions we begin by fading in the header we create a header style block and set the opacity to zero as well as add a transition for the opacity next the header is given an opacity of one where the is visible class is applied for the header image and title we'd like to scale the photo and push the text down a bit we can add styles to do this you this sets up the initial states of the elements the photo is scaled down to 0.8 of its normal size the heading text is pushed down 1m elsewhere I'm using absolute positioning on this title text setting the left and top 250 percent of the header and this transform corrects by pulling the text back into the center and then adding an extra 1m to push it down a bit next step is to add the styles for when the header has the is visible class we start with is visible then main photo to specify the photo when its parent has the is visible class in this state we can remove the transform for the heading text we want to position it in the center of the screen with these two states defined the last thing is to add a transition we specify both the main photo and the heading for each of these we apply a transition to the transform property with a long duration of four seconds a delay as before and the exponential esight timing function we'll also add a will change property to tell the browser to optimize the transform property on these elements for animating let's see it in action here we see that onload the header fades in and the photo and text transition into place if we scroll the page we see each of the photos fading in as they enter the viewport in this lesson we were introduced to the Handy requestanimationframe method we wrote a handy JavaScript utility to detect when an element is inside the viewport and apply a clasp to it we will be able to use this anytime we want to trigger animations on an element on scroll we also made use of the will change property which allows us to hint to the browser which properties are going to be animated [Music] [Music]

Channel: CSS Animation

Views: 104,073

Keywords: css animation, tutorial, web development, animation

Id: -ths7kNIFnw

Length: 14min 52sec (892 seconds)

Published: Sun May 19 2019