Tech­nique

Web Designer - - Web Workshop -

1. Cre­at­ing the in­tro text

Open the project files and you will see that there is the ve­loc­ity.js and blast.js li­brary. Blast splits text up, while ve­loc­ity is a tween engine. There are three off­set vari­ables to make each piece of text move at dif­fer­ent in­ter­vals.

<script> var off­set1 = 0; var off­set2 = 0; var off­set3 = 0;

</script>

2. Split­ting the text

Us­ing blast, each of the text char­ac­ters are split into their own span el­e­ment. Then the top layer of text is looped through and the off­set is in­creased for each let­ter so they an­i­mate in­de­pen­dently.

$(“h1”).blast({ de­lim­iter: “char­ac­ter”

}); func­tion anim() { var $spans = $(“#top”).find(‘span’); $spans.each(func­tion() { off­set1 += 40;

3. Adding ve­loc­ity

Now the ve­loc­ity li­brary adds the move­ment and opac­ity so that the let­ters move up and fade in. Each let­ter is off­set, and the du­ra­tion and eas­ing are set for each of the let­ters.

$(this).ve­loc­ity({ trans­latey: -100, opac­ity: 1

}, { de­lay: off­set1, du­ra­tion: 800, eas­ing: “ease­out­back”

});

});

}

4. Call­ing the ac­tion

Now the ‘anim’ func­tion is called and this trig­gers the an­i­ma­tion to be­gin. A ‘set­time­out’ func­tion now stag­gers the sec­ond block of text that will be yel­low. Again, it is trig­gered us­ing ve­loc­ity as in the first ex­am­ple. anim(); set­time­out(func­tion() { var $spans = $(“#mid­dle”).find(‘span’); $spans.each(func­tion() { off­set2 += 40; $(this).ve­loc­ity({ trans­latey: -100, opac­ity: 0.8

}, {

5. Mov­ing on

The de­lay, du­ra­tion and eas­ing are set so that the sec­ond yel­low text moves cor­rectly. Then the last piece of text which is orange is con­trolled in the next ‘set­time­out’ func­tion to de­lay this mov­ing a lit­tle longer be­fore start­ing. de­lay: off­set2, du­ra­tion: 800, eas­ing: “ease­out­back”

});

});

}, 100); set­time­out(func­tion() { var $spans = $(“#bot­tom”).find(‘span’);

6. Fi­nal let­ters

Now the fi­nal let­ters are moved into place. This gives the same ef­fect as Pa­trick Heng’s site, which has lay­ers of text mov­ing. Pa­trick ac­tu­ally uses WEBGL to move the text but this is a sim­pler way with DOM el­e­ments. $spans.each(func­tion() { off­set3 += 40;

$(this).ve­loc­ity({ trans­latey: -100, opac­ity: 0.8

}, { de­lay: off­set3, du­ra­tion: 800, eas­ing: “ease­out­back”

});

});

}, 150);

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.