SLIDING TEXT IN A BOX
POST CREATED Nov 28, 2014 4:20:08 GMT -8
Kratos, SEADRA, and 10 more like this
Post by Wolf on Nov 28, 2014 4:20:08 GMT -8
I've got 3 exams in the space of 3 days. So the smartest thing to do right now is make a tutorial right? Right.SLIDING TEXT. HOW DO?In this tutorial, I will be showing how I make neat hovers effects. It's not the only method, but it's the one which works best for me.
Without further ado, let's start! First of all, you need to install iPokemon's nifty plugin for my method to work. Note: Whilst you're fiddling around with this plugin as you code, you would not be able to see the full effect when you edit this in Preview mode.
So here's an example of what I mean by sliding text:[attr="class","pop"]
I'm well aware that this box looks really ugly right now. But I'm going to keep the coding simple so that those who quote to look at the coding won't have a hard time. So that means no fancy padding, text nor borders.
[newclass=".pop"]width:200px;height:0;padding-top:200px; overflow:hidden; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass]
[newclass=".pop:hover"]height:200px;padding-top:0;[/newclass]
STEP 1
Let's break this down. I made a div box and assigned with a class. I called the class 'pop'.[div][attr="class","pop"]
[/div]
Assigning this with a class allows me to add a hover to it.
I want its normal appearance to be a 200 x 200 square. So, I let the width be 200px. The height is not so simple. Instead of making the height 200px as well, I let the height:0; and the padding-top:200px;.[newclass=".pop"]width:200px;height:0;padding-top:200px;[/newclass]
Why? Well, the padding-top will increase the area on top of the box. So if you add padding-top: 10px, then the box's 'apparent height' will appear to be its assigned height plus 10px.
In this instance, its assigned height is 0 and the padding-top is 200px. Hence, its apparent height will be 0 + 200px = 200px.
STEP 2
Add dummy text to the div box so that you can see where the text starts.
And add a 'overflow:hidden;' so that the text doesn't go outside the box.
And add "transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;" to the newclass tags so that the movement will be smooth. (Right now, you wouldn't see any movement until the next step.)
STEP 3
Now to give it cool effects, add this:[newclass=".pop:hover"]height:200px;padding-top:0;[/newclass]
As you can see, this is now the reverse of before. The height has gone from 0 to 200px and the padding-top has gone from 200px to 0.
When you hover over the box, you should be able to see that the text appears to slide into view from the 'hidden' bottom.
How does this work?
When you change the padding-top from 200px to 0, then the height of area at the top of the box should decrease until it disappears. Simultaneously, when you change the height from 0 to 200px, the previously non-existent height will begin to increase in size.
Because these two effects occur at the same time, there would be no visible change in the box's apparent height. Think of a bucket of water which had a leak in it, but is also constantly being refilled by a tap. The water leak removes the same amount as the tap water that enters the bucket. Hence, there should be no visible change in the total amount of water in the bucket.
If you've been following these steps, your entire code should look like this:[div][attr="class","pop"]Text here text here text here
[/div]
[newclass=".pop"]width:200px;height:0;padding-top:200px; overflow:hidden; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass]
[newclass=".pop:hover"]height:200px;padding-top:0;[/newclass]
Aaand, you should be done if all you wanted to have a 'pop-out-of-nowhere' effect! Congratulations!
BUT WAIT! THERE'S MORE!
If a single solid background that stays the same is too bland for you, you can try making a different colour appear along with your text.[attr="class","pop"]
There are these two young fish swimming along, and they happen to meet an older fish swimming the other way, who nods at them and says, “Morning, boys, how's the water?” And the two young fish swim on for a bit, and then eventually one of them looks over at the other and goes, “What the hell is water?”
[newclass=".pop"]width:200px;height:0;padding-top:200px; background:whitesmoke; overflow:hidden; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass]
[newclass=".pop:hover"]height:200px;padding-top:0;[/newclass]
To do this, give the 'text here text here text here' section a separate div, AKA a child element.
In other words, give it this:[div]Text here text here text here
[/div]
So that the whole thing looks like this:[div][attr="class","pop"][div]Text here text here text here
[/div][/div]
[newclass=".pop"]width:200px;height:0;padding-top:200px; overflow:hidden; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass]
[newclass=".pop:hover"]height:200px;padding-top:0;[/newclass]
Give the child element the same height as its parent element so that it fits snuggly when you hover over it. In this case, height:200px;.
Now you can customise the child element by giving it a background. I used darkslategray.It's kinda ugly, but whatevs.[div style="height:200px;background: darkslategray;"]Text here text here text here
[/div]
This new colour should cover up the parent element's (your first div) background when you hover over it.
You can try experimenting by making the background of either parent and/or child element an image instead.
HELP! MY TEXT IS TOO LONG TO FIX THE BOX!
No worries, add your aforementioned child element with an 'overflow:auto' to give it the scrolly thing.
GOODBYE
Now you've got the basics down, try customising the rest of your box.
Here's some random examples I've whipped up. Feel free to quote and take a look at what codes I've used.[attr="class","out"]If at this moment, you're worried that I plan to present myself here as the wise old fish explaining what water is to you younger fish, please don't be. I am not the wise old fish. The immediate point of the fish story is that the most obvious, ubiquitous, important realities are often the ones that are the hardest to see and talk about. Stated as an English sentence, of course, this is just a banal platitude — but the fact is that, in the day-to-day trenches of adult existence, banal platitudes can have life-or-death importance. That may sound like hyperbole, or abstract nonsense.
[newclass=".out"]width:400px;height:0;padding-top:150px; background: url(http://i.imgur.com/8436dKp.png); overflow:hidden; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass]
[newclass=".out:hover"]height:150px;padding-top:0;[/newclass][attr="class","oaut"]A huge percentage of the stuff that I tend to be automatically certain of is, it turns out, totally wrong and deluded. Here's one example of the utter wrongness of something I tend to be automatically sure of: Everything in my own immediate experience supports my deep belief that I am the absolute center of the universe, the realest, most vivid and important person in existence. We rarely talk about this sort of natural, basic selfcenteredness, because it's so socially repulsive, but it's pretty much the same for all of us, deep down.
[newclass=".oaut"]width:175px;height:0;padding-top:290px; background: url('http://i.imgur.com/q1Wg20a.png'); overflow:hidden; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s;[/newclass]
[newclass=".oaut:hover"]height:290px;padding-top:0;[/newclass]
I hope this tutorial was helpful in some way. If you have any questions, don't hesitate to ask! Have fun and happy coding!
Wolf