April 10, 2020
Bootstrap 4 Animating Elements

Bootstrap 4 Animating Elements


hi guys and welcome to another bootstrap
4 video this is jamie from system 22 and web design in tech tips calm
well this is where we ended up with our last video we start our little slide in
got a little button and titles so far we’ve been doing animations with
a bit of custom CSS if I reload the page we had this logo that sort of bounces in
and stuff like that let’s continue with that a theme let’s animate our slider
caption here so it does something when we come in this time we’re going to use
a bit of pre-written script or pre-written code there’s gonna make it
really easy for us and if you can get some great results so I’m gonna go to
our site called animate dot CSS I’ll put this link below the
video here and this is a whole load of pre-written CSS
that you can you can just insert into your site and I’ll show you how to do
that in a moment but they’ve got so many different effects that you can put in
there just select one if you want to check out what its gonna look like
hit animate it and it’ll show you what its gonna do you
yeah it does it straight away and there’s some wonderful effects here and to
actually use this on your site they’ve made it so easy for you you can download
it if you want to by hitting this download animate button and what happens
when you hit that is it’ll just give you this CSS code
and you can pull this in well let’s do it select all control a troll C to copy
we open our brackets text editor here this brackets is a free text editor and
you can also download it from a link below this video let’s create a new file
and just paste what I’ve copied control-v into there and as you can see
that’s just white text because we haven’t told brackets what it actually
is at the moment and just save it as whatever you want to call it just put
dot CSS on the back it’ll let it know it’s a cascading style sheet and hit
safe and there we are you can see colored it as proper CSS now for us to
read it and of course if you want to use this way you’d have to go back to your
bootstrap index dot PHP and add a link to that style sheet I’m not gonna use
this way I’m going to show you these even easier way to use it you just put
link relative stylesheet and a link to the folder or wherever that stylesheet
you just saved is right there I’m not going to do that I’m gonna show you an easier way so if we go back to the animate CSS site to this other button here view on github they github page and if we scroll down it gives you all kinds of instruction to
have a look around here but I’ll show you briefly how to do this very easy
now instead saving that stylesheet like we just did
and pulling it in you can have it from a CDN which is a content delivery network
which means it’s just pulling it in from a site on the web so you don’t have to
do all that and to do that let’s go down to this one I’m gonna use the CloudFlare
one you can use that one if you want and I got a copy from a link opening tag
there so the closing tag just after CSS here ctrl C back to our index dot HTML
here we are and for those of you that haven’t been following along with
previous videos here’s our folder that we’ve got all our site files in a little
folder with our images in it here’s our index.html that we’ve created
just right click and open it with the brackets and this is what you get so I’m
going to drop down a couple here from the bootstrap core CSS and paste in what
we just copied from that github site there I’m just going to tidy that up
let’s give it a title I’m just gonna copy this time really I did you call it animate there we go now let’s
save that okay so we put that in there that that means we’re gonna pull in
those CSS styles so how do we make them work let’s look back at their site here you and if we look down here it says at the
class of animated to the element you want to animate keep animating you add in infinite also
and then just choose the style that you want to do and they’ve even included an example
here hey you can put this on on text classes you can put it on divs you can
put it on anything you want and again they’ve got a little button if
you if you’ve gone off the the page there you can hit this button or link I
should say and it’ll take you back to that page where you can choose whatever
it is you want you
and I do have a look through because they do have some marvelous animated
animations going on so let’s go back let’s actually add some of these to our
site now here’s our site at the moment and
this is what I want to work on today here’s our indexed or HTML page and that
was our carousel captions which is here here and here because we’ve got three
slides so let’s use the zoom in one
well I mean use any one you want you so we’ve got zoom in zoom in left
looming right I’ll use a couple of these just for examples
very easy but just notice that the in the eyes capitalized the DS capitalized
L are you and you need to put that in correctly so it said I had a class of animate or animated and let’s loop use that zoom
in capital I can’t get say that and see if it’s done what we wanted it to do try
s to say this is our first slight caption here you can put different ones
on each of these if you want to but I’m just using it on the whole or block here
which is the heading the paragraph and the button
so we’ve saved that let’s go back to our site refresh and that should now do that
little zoom in animation there we go you yeah very easy to do let’s apply it to
this element there we should do the other slide let’s do
the other slides as well I’m just literally copying this and
pasting it I’ll do different animations on these I’m gonna zoom in
right and zoom in left like I say experiment play with these do
make it your own and you can get some really cool effects going on ctrl s to
save let’s go back to the site and refresh here’s our first one the second slide
should animate to the left I think it was and third once the right there we go you a little over the top there but you can
do whatever you want with that so let’s apply something to this one
here back to our HTML very easy like I say I’m going to copy this over a couple
of times it’s give it a bit of margin top and bottom new bootstrap for class
you can just write MT for margin top and it goes from one to five five being the
most and one being the least and and be for bottom and if it’s not enough you’ll
have to add regular CSS let’s copy this few times control s to say back to the site will
we got here there we go we now got a something to
work with down here that Scrolls down the page okay let’s add some different
ones to this one yeah that’ll do rotating down left yeah well I will use that one okay back
to our site and again I’ll just copy that class I mean and we want to make sure we get this
right or it will not work I’m gonna put it on the whole div again like I say you
can put it on the h1 or the P or whatever you want to well let’s do that
let’s do this live on the heading title this time class equals open and close
from inverted commas here it’s pasted in our little code there and
I can’t move well so that rotate in right wasn’t it
rotate in down left capital D capital L athol I rotate leaned down left and I
don’t want to get there Kate and we’ll copy that and we’ll do on the paragraph
text let’s have that going the other way perhaps it’s got a class in there already so
just copy that bit paste it after the class that’s in there already it’s fine
to have multiple classes and we’ll say right for this one now capital are there I’m sure say that
and see what we’ve got they you can see those two rotating in like that
and obviously you can copy your classes down if you want to on your skull but
this one every other dealer I think sure
got there let’s put this one
you you
all these other tips here and refresh
there you have a Yuko yeah animations all over the place
like I say play with it get something that suits you you might want to keep
the same style throughout but that’s entirely up to you you can change the
duration and stuff like that on there and just read through there descriptions on that github page here
it’s all kind of different stuff you can do with it and it like I say it’s really
easy to you in our next video I think what I’d like
to see with this is if i refresh the page everything’s working great but what
I’d like to actually see happen I’d like to see these actually animate when they come into view and again
that’s pretty easy to do and we’re gonna use another bit of pre-written code so I
hope you found this useful if you have please like share and subscribe the
video if you’re interested in web development
take a look below we’ve got some great free web development classes there’s
also some great premium classes there with huge discounts for our YouTube
subscribers so once again this has been Jamie from
system 22 and web design and tech tips comm thanks for watching have a great
day

Leave a Reply

Your email address will not be published. Required fields are marked *