2.8 Revealing the Main Content

Hello and welcome back, we've gotten to the point where our preloader has animated off but once it fades out, we were reveal a website with no background image and obviously we need to change that. So I want to apply this background image that we finally finished loading and want to apply that as the background for our main content section. So, you can find the link for our starting pen in your course notes, once you open that up, we can click on Fork to create a new copy of it and in this new copy we'll get started. So, we'll see our animation again over on the right and after all of our images load we should see that animate off. So, let's scroll back down and let's find our loaderOut method here and then inside that loaderOut method we have a series of new animations that we created, where our circles are fading off, our larger circle is expanding to the full width of the browser and then to the full height of the browser. And then we're fading off our preloader to reveal the content behind it. So when we reveal that content behind it, we want that image to already be in place. And the good thing is, that by the time we've reached this method, this loaderOut function, that image has already completely loaded into our browser cache. So all we need to do now is apply it as the background of our content and if we go back to our HTML, this image container div here which has our welcome text in it. This image container div is the one we need to apply that background image to. So I'm just gonna highlight that class name and copy it and then we'll jump back into our JavaScript. Now remember, before, we used to have it as the background image in our CSS and we're not doing it in CSS anymore. Instead we're going to apply it to our CSS background image using jQuery. So let's jump back into our JavaScript and we need to figure out where this is going to happen and there are a couple of different places we could do it. But I'm going to do it right here inside this second to last tween here, where we're animating the height of our purple rectangle to 100%. One thing we can do inside a TweenMax object is, let's do this after our ease statement, let's add a comma there. And I'm gonna add another property here called onStart with a capital S, and I'm gonna set this equal to a functions, we're gonna have the word function() ,and then {}, and we can put whatever code we want inside this function. And again we know that by the time we reach this code, our image has already been loaded into the browser cache. That's what we've been doing this whole time and now that it's loaded, we can apply it as the background image to that image container class. So again using jQuery, we're going to point to that image container class. So we have a ".img-container" inside quotation marks and then inside parenthesis for our jQuery selector And then we're going to call on the .css method of jQuery and here I want to edit the background-image property. And if we scroll all the way back up, let's just apply this very first image here and so we point to the first item inside this imageUrls array. So let's go back to our code down here. So we have our background-image property, comma space and then the value we want to store in that property which again is imageUrls[0]; which will point us to the very first URL there, and then a semi-colon to end our statement. So at the very beginning of this animation, where our rectangle starts to take up the full height of the stage, we will go ahead and then add that image as the background image. And you'll notice that once the animation finishes that that doesn't do the trick. Because remember, when we're assigning a background image to CSS, if we jump back to our CSS, you'll see that we need more than just the URL. We actually need to put the word URL and then the set of parentheses and then inside those parentheses we can add the actual URL. So let's do that in JavaScript and this will be easier if we do it inside a variable. So just before that jQuery selector we're gonna create a variable and we can just call it cssurl and I'm going to set this = "url(". And then outside the quotation mark we're going to add the actual URL, so we're gonna take imageurl and then [0] which will give us that very first image URL. And then we need to finish it off by adding a ); to end our statement. And then instead of pointing to imageUrls[0]); here, we're just gonna point to that cssUrl that we just finished constructing. So our page will reload, we'll see our animation occur over and over again as we wait for our ten images to load. And then, once all ten of those images load, we'll see our altro animation, followed by a fade out, where we can actually see our image in the background, and that's how you can pre-load an entire web page using a GreenSock Animation. Thank you so much for watching, let's save our work, and we'll get started with our second project in the next lesson.