Code breakdown below, the demo/source can be found here:
jsfiddle demo (click ‘result’ to restart the animation)
Code breakdown
First we get set with our lines of text we’d like to have slide in, in html:
<div class="one sliding">There is some text here!</div>
<br/>
<div class="two sliding">There is some text here too!</div>
<br/>
<div class="three sliding">There is some text here three!</div>
<br/>
<div class="four sliding">There is some text here four omg!</div>
<br/>
<div class="five sliding">There is some text here five omg!</div>
<br/>
<div class="six sliding">There is some text here six omg!</div>
<br/>
<div class="seven sliding">There is some text here seven omg!</div>
Each div contains two css classes, the first class being ‘one’ ‘two’ ‘three’… etc which implements the actual sliding of the text which we will get too shortly. The second class is ‘sliding’ which places the text in the proper position and transparency to be moved into place. (the <br> tags are only being used to seperate lines, you could also do this with <p> tags etc)
Next lets take a look at the css
.sliding {
display: none;
opacity: 0.0;
position: relative;
margin-left: -120px;
width: 100%;
}
Not much going on in terms of css for this one. The display is set to none and opacity is set to 0 to make sure the text doesn’t appear early. The text is also slid to the left 120 pixels so that it slides into the proper location after the movement completes
The magic: jQuery
$(document).ready(function () {
$(".one")
.css('display', 'block')
.animate({
opacity: 1.0,
left: '120px'
}, 600);
$(".two")
.css('display', 'block')
.delay(150).animate({
opacity: 1.0,
left: '120px'
}, 600);
$(".three")
.css('display', 'block')
.delay(300).animate({
opacity: 1.0,
left: '120px'
}, 600);
$(".four")
.css('display', 'block')
.delay(450).animate({
opacity: 1.0,
left: '120px'
}, 600);
$(".five")
.css('display', 'block')
.delay(700).animate({
opacity: 1.0,
left: '120px'
}, 600);
$(".six")
.css('display', 'block')
.delay(850).animate({
opacity: 1.0,
left: '120px'
}, 600);
$(".seven")
.css('display', 'block')
.delay(1000).animate({
opacity: 1.0,
left: '120px'
}, 600);
})
So this is where the movement and fade in really happen, in the javascript/jquery animate code block.
$(".two")
First we grab the class we want to animate.
.css('display', 'block')
Next we tell it to display as a block so that it’s visible in the browser (overriding display: none as seen in the css).
.delay(150)
Then we tell jquery to wait 150 milliseconds before running the animate code block, that way this line appears to slide in second to the first one.
.animate({opacity: 1.0, left: '120px'}, 600)
Lastly in the animate block we tell the div to animate from 0 opacity to 1 (invisible to visible). We also tell it to slide from the left 120px (from the -120px earlier via css), and we tell it to do this in 600 milliseconds (the total length of the animation).
The slight adjustment of each delay as the div count increases causes the text to appear to ‘roll in’ from left to right as if its being loaded ‘live’ as opposed to just appearing, giving it a much more natural animation and feel
Summary
The end result is a very quick but distinguished left to right, fade out to in animation that makes the text feel fresh and new even if its just appearing on the page. Be sure not to let the animation get to long or the delay to great or you’ll lose the ‘live, right now’ feel and just end up with a choppy text animation.
Note:
While this could be done with css3 animations, the delay provided by jQuery is much more powerful and easy to implement for something like individual classes/lines of text as seen above and that is why I personally chose to go this route, enjoy!
Leave a Reply