Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Lining.js

Let’s turn our attention to the Lining.js library to style individual lines within a paragraph.

Relevant Links

4.1 Lining.js

Hello and welcome back. In this lesson we're going to talk about the lining.js library which is very similar to the kerning and lettering and textillate libraries we've already talked about. Except instead of separating a block of text into individual letters, lining.js separates them into individual lines. So, ideally you would use this in something like a paragraph where you wanted complete control over each individual line of that paragraph and it's very easy to use. All you need to do is to take whatever element you want to apply it to, and give it ad, the attribute of data-lining. You don't set it equal to anything, you just put data-lining in that opening tag. And then you will have access to all of the individual lines so that you can style them separately in your CSS. So you can find the LINING.JS website at, and there's a lot of good information here. If we scroll down we can see some examples of the types of things that are done with lining.js. and you can even show the code to see what that looks like. So you can see all of the CSS that's been applied to that particular item. So again there's a lot of examples here, and one of the really fun parts of it is it also allows us to very easily animate the individual lines. So once we get down to this part of the page you'll see number of effects that we can apply and we click on go and we can see that animation take place. So if we go all the way down to the bottom, you'll notice that there is a CDN link here that you can copy into your own page if you're not using code pen or you can download it on get hub and do it that way. But I'm going to jump over to code pen now and you can find the URL for the opening of code pen here and your course notes for this lesson. And here we have a simple paragraph. It's an h3 and then a paragraph and the paragraph is all we really need to deal with here and what I want to do is to break this up so that I can access each individual line. Now in our settings you'll notice that in our JavaScript tab here we've already pointed to jquery and the lining at .min.js file. That's found at the line that js CDN and so we're good to go. So once you open up that starting pen we can click on Fork to create a new copy of it and we can get started. So as I mentioned before all we need to do is we need to find the element to that we're going to apply this particular effect to you and then in the opening tag we're just gonna give it an attribute of data lining. Now by default we're not going to see anything different. But if we come over here and right click on a paragraph and chrome and click on inspect you can now see that our paragraph is broken up into individual elements called Text hyphen line. And each of those elements has a class of line as well as an index value and so now we can access each of these separate lines using CSS. So let's do just that I'm gonna jump into our CSS and will get started. So there are a couple of ways that we can point to our individual lines. First of all let's point to that paragraph which has a class of main-text applied to it and then we can point to the line class inside that paragraph. But I don't want to create a rule for all of the lines instead I wanna do one at a time. And so what I'm gonna do here is inside square brackets, we can refer to the first line by just typing in the word first. First, if you wanted to do something specific to the last line you could use the word last instead. Another option is we can type index equals and then inside quotation marks whatever the index number. So the first line will have an index of one. So we can do that either way but just to show a little variety I'm gonna type in the word first year for the first one and then we'll use index for the rest of them. So here let's say we wanna set our text color to a certain value, let's say F2E3E3 and our font size to 20px. So we're gonna have a different font size and a different text color as we move down. So what I wanna do is I'll basically want to fade these lines out so it looks like they're slowly fading out as we move down and the text size is slowly going to be getting smaller. So we could do the same thing for the next one. We could do .main-text space line and then instead of first or last or whatever we would use an index. So index equals a point to the second line here sp we'll do 2 and then we could enter in a different color here for the second one we'll use E5C7C7 and for are font size we'll use 19 pixels. So it's a little bit smaller. And then, instead of watching me type in each color individually, I'm going to copy a bunch of CSS that I have in another file and I will paste it here. And we can see the effect of that. So as we move down the text is gradually changing color, becoming more like the background. You could do this with opacity to if you preferred. And then we have a font size which is gradually getting smaller and it gives us a really nice effect. Similarly, if we wanted to we could indent each line of text a little bit more as we moved down the paragraph. So we could set a left margin on each of these lines except for the first line and leave it as is. And I'm gonna hold onto option and click and drag down and you'll notice that allows me to select that particular column for it for every single line that I've selected. If using a PC you hold on to alt and click and drag down if you're using a Mac. It's option click and drag down. So here I'm just going to set margin hyphen left, and as I type it you can see it's adding that to every single line and for now I'm going to set them all to five pixels. And then we'll click and drag this over so that we can see them a little bit better. And I'm just going to increase that by five pixels with every new line. So the second one is gonna be ten pixels the third one will be 15, then 20, 25. And so now as our text gets smaller and fades out we see that it's also becoming gradually more and more indented. So as you can imagine there's a lot that you can do with this particular plug-in. Anything you can dream up with CSS you can obviously apply to your paragraph. So those are the basics of what the lining.js framework allows you to do and the next lesson will take this a step further and take a look at the animations that we can apply to our individual lines of our paragraphs. So thank you for watching. Let's save our work and I'll see you in the next lesson.

Back to the top