Barron Webster but with Text

Published

September 20, 2017

Difficulty

Beginner

Posted by

Rik Lomas

Topics

On the last video, we spoke about how to make the Barron Webster site, this time we show you how to make it not with images, but with text.

Share this post

Transcript

00:00

[Instructor] Hey everyone the other day we talkedabout how to make images stretch when we move themaround the page and someone asked mehow do we use text instead of an image.Just wanted to talk very, very quicklyabout how you do this.So I'm gonna create a new project,I'm gonna call this one stretch text for instance like that.

00:21

Now we're gonna start off with a totally brand new project.I'm gonna get rid of my HTML and put in H1which is just gonna say SuperHI for now if we see thisin the project we just have SuperHI looking like that.I go to my style sheet and what I'm going to dois remove my margin width so want to put it inthe top left corner so see it's right up there.Now with the H1 itself, we're gonna fix this into positionso we're gonna do position fixed so it'll stay thereif you scroll up and down the page.We're also gonna fix it in the top left corner soat the moment it'll stay there as if it looks like normal.So the idea of what we're going to do to stretch with textis we're going to use a brand new CSS rule calledtransform and what transform can do is it can do rotations,it can do scale, it can do scew,it can also move things around the page as well.So I'm just gonna give it a quick scale 2.Now what scale 2 will do is make it twice as bigas it's usual size now by default what this will dois it'll make it bigger from the center of the text.So we just wanna quickly also add one new rule,called transform origin.

01:37

Now transform origin works a little bit like backgroundposition you could set the point of which we grow from.So at this point we want to do it fromthe top left corner as well zero and zero.So zero across zero down.So this looks twice as big we've not changed the font sizewe've just changed the scale of this.Now with scale we can add two different numbers in thererather than just one.At the moment we've got scale 2 we can also say scale 2in the x direction which goes across the page and commathree down the page so we have this kind of stretch lookon the text itself.Now this is the idea of what we want to do.Now we don't wanna do this with CSS we want to do thiswith JavaScript instead.So what I'm gonna do is the idea is I want to addthis transform with the scale,x and y down the page we don't know what x and y isit depends on the mouse cursor.So for now we're gonna get rid of transformbecause were gonna do this in JavaScript.So I'm gonna use jQuery to speed things up.Now someone asked me how does jQuery work.Now jQuery is basically a library.Lots of people have been writing code to make JavaScripteasier to write now all we need to do is go todownload jQuery we can download the compressedor even the uncompressed version and save itwhatever we like, I've called it on my desktopjQuery.js over here in the corner.So what I'm gonna do is quickly just drag it intomy project now if we look at jQuery it's just a messof JavaScript code.Basically it's a compressed version of JavaScriptwe don't need to touch it.Other people have written this for us.We're going to write our own JavaScript file.So to do that I'm gonna add a new script tag calledStretch.js doesn't mean anything we're just making iteasier for us to know what it means so just correct these.So jQuery is something someone else has writtenstretch is something that we're gonna write in a minute.So we need to add these two to our index.html sounderneath here script tag with source as jquery.js.

03:49

And under the script tag with the source equal tothe one we just made stretch.js.Now at the moment this won't do anything because we gotthe jQuery and we've not written any code for ourselves.So in stretch what we want to do is find the originalwidth and height because we need to know what the basekind of scale is so I'm just gonna add a new variablecalled original width.Now the variable again we can call this whatever we likethis can be called potato or Rick or bacon or some sort ofbut original width kinda makes sense.We're gonna use jQuery to select the H1 and find its width.

04:31

Then we're also gonna make a new variable calledoriginal height and similar to that we're gonna selectthe H1 and find its height.

04:42

Now what we want to do is none of this is gonna doanything we've just held some variables whichkinda store the width and height of this H1.We want to do things when we move the cursor around the pageso we're gonna select the whole pageand then do something on an event.

05:00

So how do we know what the events are?you can just Google them so the way that I usually look upis jQuery events and underneath here,the first result is events in jQuerywe can see a list of all the different events thatwe can use most of them we don't ever touch.Most of them are quite useless to be quite honestones that we're gonna use are mouse.mov which is justdown here so I'm gonna use on, mouse.mov,now we need to do something when we run our events.Gonna use a comma then run a function space,round brackets, space, curly brackets.Now just make it a little bit easier to read the codeI'm gonna open up my curly brackets.Now this little end bit always looks a bit weird to meproblem is don't worry this just attaches to thisfunction up here.Now we need to know where the cursor is when we runthis event.So we're gonna pass in a new variable in ourround brackets called events.Now event is just a variable name again this canbe called anything it could be called E,it could be called F, it could be called Rick,could be called potato, it's up to us.Now the way that we find the event is we need tobasically find out how far across the page we areand then divide it by the original width.The idea for that is we want to see how far as atentage we've moved away from the start point of the widthand the start point of the height.Because if we're about here on a page it's about twicethe width and then three times the height.So we need to do a little bit of calculation sowe're gonna make a new variable called scale xand this is gonna be equal to we used to find outwhere on the page we are, event.pagexnow we're gonna divide this by the original width.So this is basically when we're at the edge of the tagthe scale x is 1 if we twice the way over it'll betwo we're gonna work out how far across the page we are.Now we need to do this every single time we movethe mouse cursor, the original width stays the same,we're just gonna work out the new scale.Gonna do the same with y as well because it's gonnabe different, scale y divided by the original height.

07:27

Now this is just gonna make two variables that we'renot gonna use at the moment if we move around the page,again, nothing happened just yet.What we want to do is change the H1 so we're gonna selectthe H1 and change its CSS.

07:43

Now in our CSS originally what we had was this transformand then scale so transform and we want to change this toa scale, now I'm just gonna start it with two and three.Now these are hard coded in we put them in the stringwe see the change so if we see the page at the momentsoon as I move my mouse cursor it changes to thisnew scale.

08:07

But what we want to do is not have two and three,we want to put in the scale x and the scale y.Now this is a little bit complicated I'm just gonnadelete the number two.I'm gonna put the first bit in the quotes and add itto scale x and add this to quotesso sometimes it's double quotes,basically what I want to do isthis is always gonna stay the same,this is gonna change every single time and this bitis gonna stay the same.So we're just doing it in the x direction at the moment,let's just see if this works.We we move our cursor across the page we see this stretch.Just in the one direction so far.Now the same thing we need to do with number three,I'm gonna get rid of the number three,I'm gonna add the quotes and plus scale ythen plus end quote now this is another double quote again.So what we're doing here is saying at this stays the same,infinite changes, something that stays the same,something that changes to something thatstays the same so we've added basicallya string to a variable to a stringto a variable to a string.So now when we move the page, this works in twodifferent directions.Basically when we're around here, this is where scale xand scale y is one and one because we know how faracross the page we are and as we grow around the pageit uses this kind of ratio of where we are current withthe mouse cursor to where it originally was.Now just gonna put this here so you can see thisas stretch-text-superhi.com if you want to playaround with it and see the code yourself.

Published

September 20, 2017

Difficulty

Beginner

Posted by

Rik Lomas

Topics

More videos

Beginner

23:17

INTERVIEW

Planning, Designing + Coding Your First iOs App with Lou

Beginner

13:53

TUTORIAL

How to Make a Javascript Accordion

Intermediate

17:52

TUTORIAL

How to Add International Times with Timezones to Your Website

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