Build a Bootstrap Theme With Scroll Animation

Key Takeaways

hey guys welcome to another project build I feel like I've been neglecting my front-end developer audience a little bit lately so I wanted to do uh a simple project for you guys we're going to be building a bootstrap website or theme whatever you want to call it that implements a little bit of animation and scrolling effect so we're going to do this with a package called scroll reveal and what this does is it allows us to add add a little bit of JavaScript to make any element that we want on the page animate when it's loaded or when we scroll down to it okay there's also a lot of different options and tweaks that you can use to customize the effects so this is what we'll be building I just called it text scroll and basically we just have this uh we have a Navar up here with no background it's just plain white and we have this showcase area with a big image of the Google home device some text over here uh then we have a testimonial underneath and we have um another image here some text and then two more info text blocks and then a little contact form with a background image now if I go and I reload this you'll see that there's quite a bit of Animation going on here everything kind of slides in nice and smooth and then if I start to scroll you'll see that and then the next one okay so it doesn't actually fire off until you're you're scroll down to it and you've probably seen this effect before um I I personally like it I think it's really nice I mean you don't want too much going on but um I think that that looks pretty nice so I modeled this website or this theme after this y direction.com Advent if we reload this you'll see it has same not the exact same but but similar effects and then as we scroll down you can see that things kind of pop in I mean this is a production site so obviously this is a little better than my little site that I created in about 45 minutes um but same idea okay and for this site if we click click on a link kind of brings us down and it keeps the Navar shown just like if we go over here and we click about brings us down okay now this functionality is not from scroll reveal this is from just a block of jQuery code that we're going to use and you can use that in your future projects as well so that's what we be building this is the GitHub page for scroll reveal this has all the documentation you can see we can install it with npm or bow if we want but I'm going to go the easy way and just use the script tag all right and then what you do is take an element for instance this div with the class of Fu and just stick it in this sr. reveal and then you can apply all these different um options or conf configurations to it such as where it comes in from where the animation comes from the distance it travels the duration the delay all kinds of stuff so you can really customize it all right so that's what we will be building I'm just going to go over to my desktop and and create a new folder and I'm just going to call this text scroll okay and then we're going to open that from within the my editor I'm using adom but you can use whatever you'd like so I'm going to say add project folder desktop test uh tech scroll and then we're going to create some files so we're going to need an index HTML file and then we're going to want a folder for CSS a folder for images which I'll call a IMG and then in the CSS folder we want a file called style.css okay and that should be all the all the files that we need now uh I'm going to use the live server package for Adam which will open up the current directory on uh on my Local Host you can install that if you want if you if you're using atom you can go to settings and go to um install and we want to search for I think it's live server I believe let's see or maybe it's live reload where is it right here this is what I'm using Adam live server so if you go ahead and install that you'll be able to go up to packages live server and I'm going to start this on Port 4000 okay so there's there's our website which is blank at the moment okay now you don't have to do that you can simply open the index HTML file if you want or you could use a different kind of server whatever you want to do uh so first thing we'll do is just put in some HTML tags uh head and body and all that so in the title I'm just going to say text scroll and then what we'll do is um grab the script tag for scroll reveal which is right here okay so all we have to do is paste that in and we can use it so we're also going to need uh bootstrap I'm going to use the CDN so you can get that at bootstrap cdn.com and I'll just grab this CSS right here copy that or css link I should say and we'll put that in a link tag give it a real of stylesheet and then href and then we'll paste that in there okay I'm also going to link the stylesheet that we created so stylesheet href and that's going to be in the CSS folder and then style.css okay we're also going to want the bootstrap JavaScript link so I'm going to copy that and I'm going to put that down right above the ending body tag so we'll put script Source equals paste that in now this bootstrap JS file actually needs jQuery as well so let's grab the jQuery CDN I'm going to just grab this uncompressed version three copy that make sure that's above your bootstrap script tag and then that should do it as far as things that we need to include oh one more thing we need the fonts um so I'm going to just paste this in let me just grab it real quick all right I'm going to put this right below the title and I'm going to paste it in so this is just a link to use some Google fonts uh so fonts. googleapis.com CSS uh question mark family equals Poppins uh so you just want to copy this exact we're also using the uh Roboto or robotto font and this uh looks like Jose Finn this is just the font that that uh website that I showed you uses all right so just get that in there and if you don't want to type it all out just get it from the the project files all right so we should be all set now so we're going to start at the top and work our way down we're going to build out the interface and then we'll add the uh the animation and stuff all right so we're going to start with the navbar so when I when I uh do a bootstrap navbar I usually just go to get bootstrap and then go to getting started and examples and then the starter template and then we'll do a control U and I'll just grab this nav tab here okay this has all the markup we need for it to be responsive and all that so we'll put that right under the body the opening body tag and we're going to keep the Navar fixed top because we always want it at the top I'm going to change this to Navar default and then we're going to change the project name to text scroll and for the the navigation here we first of all we'll get rid of this active class and then home is actually going to go to the ID of showcase about is going to go to the ID of info one and contact will go to contact and that's all we need to do for the navbar As far as the markup so let's save that and if we go back and now you see we have our Navar now I want to get rid of the gray background and this border I also want to move these links over to the right so this UL right here we're just going to add navbar right and that'll float those over okay and then we're going to go to our style CSS and we want to get rid of the background of that navbar so let's do dot navbar default and we're going to change background to White and let's change the border to zero and we're going to change the font family to Poppins okay we'll save that oops and then let's go back and there we go now this branding right here I want to make that a little more prominent so that has a class of navbar dbrand and we're going to change the font size to 20 pixels we're going to change the color to Black and what else did I want to do oh yeah I want to make it bold so font weight bold so we'll save that okay now I want it completely black it looks like this isn't working what we need to do is just add on important and then that will overwrite any other styles it has good so that's it for the Navar now what I want to do is the Showcase area so let's go back to our HTML and we're going to go right under the nav and put in a section tag all right so section is an HTML 5 tag and we're going to give this an ID of showcase okay and then in the Showcase we're going to put a container okay container we'll just basically move it away from the sides put it in the middle uh and then we want a row because we're using the um the grid system bootstrap grid system and we're going to have two six column rows so if we look at the finished one this splits in half and we have a six column div here and a six column div here so that's what we want to do so let's put another div and we'll give this a class of call md6 for when this the the window is at the medium size we also want call sm6 for when it's at the small size okay both situations should be should only have um six column divs all right and then I'm just going to go copy this and go right under it and paste it in and then this is where the image is going to go now I'm going to wrap the image in a class called showcase left and I'm doing that because this is the the element that we're going to add the animation to okay it's going to have the image come down from the top you see if I reload this it comes down from the top and then we'll put the image in here so IMG Source that's going to be in the IMG folder and it's called image 1. JPEG okay and you should have these in your project files okay I'm just going to go ahead and add it uh let's see where am I text scroll IMG and I'm just going to grab all three images and paste them in okay so this is the one we're working with right now the other two two are actually PNG files just to to point out all right so we have that set now on this div we're going to have another div with the class of showcase right okay and in here we're going to have an H1 and I'm just going to grab the text real quick paste that in and then we're going to have a paragraph and I'm just going to grab that text as well which is just dummy text if you're using adom you can actually just type in laurum and then tab and it'll give you a bunch of sample content all right so the button that is on that side we don't want in the Showcase right because we want that animation separate okay remember it has a little delay so we're going to go under that div and then put in an a tag with the class of BTN BTN default BTN dlg that'll make it a little bigger and also show case- BTN which is our own class okay and that's just going to say read more so let's go ahead and save it and take a look all right now notice everything is under the Navar that's because we have the fixed top class so a solution for that is to add to the body a margin top pushing everything down so let's go back to our CSS and we're going to put in body and let's say margin top 70 pixels okay so that should push everything down good so now we just have some styles for the Showcase that we need to add so let's go back to our stylesheet and the heading right here I want this to be bigger I'm going to set that to 50 pixels and also add some margin underneath so so let's say the ID of showcase we want the H1 and we're going to set the font size to 50 pixels and then set a margin bottom to 20 pixels now all of the headings on the site I want to have the popins font so I'm going to go right under the body here H5 I mean H1 through H6 and let's say font family we're going to set that to Poppins and then for the paragraphs we're going to set that font family to uh robotto I think it is okay save that okay so you can see the font type has changed now so back to the Showcase I want this image to only be 90% of its container okay so make it a little smaller so let's go down here and say showcase image we're going to set the width of it to 90% of its container and then we just want to move it over a little so we're going to say margin what is it margin left we're going to set that to 60 pixels save that okay so now you can see it's a little smaller now I want to move this down more so it's kind of in the middle of the image and remember that has a class of showcase right so we'll say ID showcase and then class showcase right and we're just going to set margin top to 90 pixels and now that's pushed down all right I also want to just put a line line break right before that button so right here we'll just put in a br tag there we go all right so the Showcase should be all set aside from the the animation which we'll do in a little bit so now we're going to move on to the next part which is this testimonial right here so let's go back and go under the Showcase section and then we'll create another section and let's see we're going to give this an ID of testimonial and then let's put a container and in here we're going to just have a paragraph now if you're using adom or Sublime Text you can just do Lum Tab and it'll give you a bunch of sample content I'm just going to wrap this in a paragraph I'm also going to wrap it in quotes since it's a quote okay and then under that we're going to have another paragraph and that's going to have a class of customer and then here we're just going to put a hyphen and then John Doe so let's save that okay there it is so now we're going to go back to our style sheet and let's see we're going to work with the ID of testimon IO we're going to set the background of that to a really light gray so F1 three times and we're going to set the padding to 50 top zero uh 30 on the bottom and then zero okay and I want to align everything to the center so we can say text align Center and let's add a margin to the top of 40 pixels so let's see what that looks like all right now we need to do the text so I'm going to just do testimonial P for the paragraphs and let's set the font size to much larger I'm going to say 32 pixels and then the font family oops font family is going to be this uh I don't know how that's pronounced j o s e f i n josephin Sans let's actually wrap that into quotes all right and then the color of it I want to be black so we're going to say color black all right let's take a look okay that's way too long I just want to uh take some characters off that see what that looks like Ah that's too short let's try that yeah I guess that's fine but the customer right here I want that to be smaller so let's go back to the style and go say testimonial p. customer and then I'm going to set the font size and we're going to set that to 20 pixels and then make it a little lighter so color will be Tri 6 there we go all right so now the next thing we want to do is the this right here this is info one and then this is info 2 so let's go back to our HTML let's throw in our section okay and this section is going to have an ID of info one and we're going to have two six column divs here just like the Showcase so let's first put in a container all right and then in the container we're going to have a row and then we're going to have our call md6 call sm6 and I'm just going to copy that because we need two of these so on this side we're going to have an image I'm going to wrap this in a div with the class of info right I'm sorry info left for this one and then then the the image which will have a source attribute of IMG SL image 2.png okay and then on this side we'll have a div with the class of info right and in here we'll have an H2 that'll say get to no Google home and then par graph and I'm just going to grab that text real quick throw that in there we go okay and then we're going to have the button right under uh right under the par graph actually we're going to put a line break and then the button which is a link with the class of BTN and then BTN default and BTN LG that'll make it larger and this will just say read more as well well all right let's save it and let's go back to our version and reload and that's what it looks like okay so we want to do a little bit of styling over here so let's go back to style CSS and I want to basically just move this down okay so we know that we have the ID of info one and then we have a class of info right and we're just going to add a margin uh margin top and we're going to make that 90 pixels okay actually I think that's all we need to do there oh you know one thing I did want to do is set the body text the default to 16 pixels because it's a little small now so let's say font size 16 pixels and save there we go so now this text is a little bigger so that looks pretty good let's let's go on to info 2 now so we'll go back to index HTML and what I'll do is just copy info one this whole section and then we'll paste that in and change this to two and let's see I'm going to keep the info left and right I just want to remove this image and then for down here I'm going to keep the H2 I'm just going to change it to info block The Heading and we'll keep the same text and then I'm going to take away the the line break and the the button or the link okay and then we'll just copy this H2 in this paragraph copy that and paste that in here as well okay so info left and right are the same okay we'll just do we'll say block one here and then block two here all right and then let's see what else we need the floter actually let's see what that looks like first okay that's fine since both this info one and info two are both white on the background I'm just going to put an HR in the middle of them so right here there we go and now we'll move on to what the contact area so let's go under this section and put a new one all right and this section is going to have an ID of contact and it'll have a container and a row so this will be call this is actually going to be a five column so call MD D5 and then call sm-5 so we'll have a five column and a seven column okay the form will go in the five column nothing's going to go in the seven column you'll see if we look at the final version there's nothing over here in the seven okay the five the form will go in the five column so let's do that now for the form I'm going to just paste this in because I I don't want to waste too much time here with stupid stuff so I'm going to paste it in see we have a form tag we have uh form group divs one with the name the input email label email input and then a message okay and then a submit button so uh let's go ahead and save that and go to our version and it looks like this so I want the info 2 which is this right here to have a margin to kind of push this down a little so let's go back to style and we'll say info 2 and we're going to we going to add margin so top 20 pixels sides will have zero uh bottom will have 60 pixels okay and then for contact we want to set that image for the background so let's say background so we'll set URL that's going to be do do slash okay because we're in the Style Style CSS folder so we need to go up one and then into the IMG folder so that's what the do do slash does is brings us up one okay and then that image is called image 33.png all right and then I'm going to add 40 pixels padding and let's see we're going to make the color white because the image is is dark uh and then I just want a border on the top and bottom so we'll say border top which will be a dark gray that'll be 7 pixels and solid and then we'll do the same on the bottom okay save that and there we go so now for the footer which is extremely simple um basically we want to go under this this last section and say footer and I'm just going to put in a paragraph and that'll say copyright and then we'll put Amper samp copy semicolon which will give us a copyright symbol 2017 um and we'll just say I guess text scroll all right and then for this paragraph I'm going to give it a class of text Center which is a bootstrap class and let's take a look okay I just want to add a little bit of padding to that so let's go to our stylesheet say footer and we'll add padding of 40 pixels there we go actually let's do 30 okay so the basically the the markup is complete now we need to enable the animation all right so we're going to go back to index HTML and figure out what we want to do here so we want a I want a lot of different things to have an animation the Navar uh this side this the testimonial and then these two so let's go to the bottom here um yeah we're going to go under everything so under the bootstrap JS way down here okay and then we'll put in our script tag uh let's see I don't need that so to use the plugin we need to say window. Sr equal to scroll reveal and then we should be able to say sr. reveal do reveal and then the element that we want so we're going to start with let's start with the navbar so it has a class of navbar and let's see it's going to have a second parameter with the options okay so let's set uh let's see let's set the duration to 2 seconds which is going to be 2,000 because it goes by milliseconds and let's set the origin basically where we want it to come from and I'm going to say bottom all right so let's save that and see if it works so if we go yep if we reload you'll see it comes up from the bottom and it has a duration of 2 seconds all right next we're going to do the Showcase left which is the big Google home image all we have to do let's put a semicolon here and then I'll just copy this and then let's put in the class showcase left and let's see duration is going to be the same origin I want to be the top and then I also want want to add a distance because I want it to look like it's kind of coming from the very top so the distance I'm going to set that to 300 pixels save that and there we go it comes in from the top now this over here showcase right I want that to come in from the right so I'm going to just copy this again and that'll be showcase right and that's going to have an origin of right and I'm also going to say uh set that to 300 pixels distance save it there we go now the button I actually want that to have a little delay I want that to come in last so let's paste that in and then I'll change this I think it's showcase BTN for the button and then I'm just going to add a delay of 2 seconds so this should start when the other stuff stops because that has a duration of 2 seconds all right and then the origin I'm going to set that to bottom okay we'll get rid of the distance save that comes in two seconds later the button comes in good so let's see what else the testimonial if we look at the HTML I don't want the actual testimonial section I want the div underneath it okay so we're going to use testimonial and then the div which will come in which will animate so let's say ID testimonial and then the div underneath it and we're going to set that duration that's fine I want to set the origin to bottom and then get rid of the distance okay now we want info left and info right paste that in again and change this to info left and duration that's good origin I'm going to set to left and let's see distance 300 pixels now one thing I want to do is set the view Factor because we we only want that to fire off when we scroll down to it so we can set a view factor to a certain percentage and I'm going to set it to 2% so when when we see 2% of that element it's going to do the the animation so view factor and we're going to set it to 0 2 all right and then I'm just going to copy this and do the same for info right okay except that's going to have an origin of right and that should do it let's save I'm just going to reload everything comes in and then we go and start to scroll down and then we see that oh actually you know what this one info one isn't down far enough so what I'm going to do is add another line to the testimonial where is it testimonial and let's see that's not it see now if I reload it hasn't loaded down here yet because it's not in view but if we start to scroll there it is and the next one all right cool so the very last thing we want to do is the links I want to be able to click and you can see it does go down to where it's supposed to same with contact but it doesn't it's not a smooth transition so I'm just going to paste in a block of code down here that I that I use for this uh we're going to go below this script all right so we'll paste this in okay so this is just a block of jQuery that is going to implement that smooth scrolling effect let me actually set this to wrap so you guys can see the whole thing uh let's see soft wrap there we go and if you don't want to type all this out you can go ahead and just look at the uh project files I didn't I actually didn't write this I got this off I think a stack Overflow post it's not the neatest thing in the world but what I want to focus on is the scroll reveal in this project not the the the um vertical scrolling so let's save this and make sure it works so if I click about Scrolls down contact and home great so that's it we've built a bootstrap template that that has a little bit of Animation so hopefully you guys enjoyed this I know it had been a while since I did a front-end video uh we've been doing lots of PHP and some Python and all that so um that's it if you aren't subscribed and you liked this please do so I upload at least twice a week uh and thanks for watching