SELAMAT SORE..!!!
Postingan kali ini saya akan memberikan langkah-langkah atau tutorial bagaimana cara membuat Animasi Teks Jatuh dan apa saja sintaks yang diperlukan untuk membuat Animasi Teks Jatuh. Untuk membuat Animasi Teks Jatuh ini kita memerlukan beberapa sintaks. Pada tutorial ini kita akan membuat Animasi Teks Jatuh menggunakan jQuery. Lets Go...!!!
Langkah I
Buatlah
struktur data menggunakan tag HTML
<!doctype html>
<html>
<head>
<title> 201453126 </title>
/* =====================================
Falling
Text Rotator- by JavaScript Kit (www.javascriptkit.com)
Visit
JavaScript Kit at http://www.javascriptkit.com/ for full source code
===================================== */
</script>
<script>
jQuery(function(){ // on DOM load
$('#headline').fallingtextrotator({
pause:1000,
cycles:
200,
ontextchange:function(msgindex,
msg, eachchar){
//console.log(msgindex,
msg, eachchar)
}
})
})
</script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<ul id="headline"
class="fallingtextrotator" style="height:7em">
<li style="text-align: center">
HAIIII.... SELAMAT DATANG DI BLOG SAYA </li>
<li>NiaElPicha37.blogspot.co.id</li>
<li>SISTEM INFORMASI</li>
<li>UNIVERSITAS MURIA KUDUS</li>
<li>TERIMA KASIH</li>
<li>201453126</li>
</ul>
</body>
</html>
Langkah II
Berikan
style CSS untuk memperindah tampilan blog
CSS I
@font-face
{
font-family:
'Orbitron';
font-style:
normal;
font-weight:
400;
src:
local('Orbitron-Light'), local('Orbitron-Regular'), url(http://fonts.gstatic.com/s/orbitron/v7/94ug0rEgQO_WuI_xKJMFc_esZW2xOQ-xsNqO47m55DA.woff)
format('woff');
}
@font-face
{
font-family:
'Orbitron';
font-style:
normal;
font-weight:
700;
src:
local('Orbitron-Bold'), url(http://fonts.gstatic.com/s/orbitron/v7/Y82YH_MJJWnsH2yUA5AuYYbN6UDyHWBl620a-IRfuBk.woff)
format('woff');
}
@font-face
{
font-family:
'Orbitron';
font-style:
normal;
font-weight:
900;
src:
local('Orbitron-Black'), url(http://fonts.gstatic.com/s/orbitron/v7/FyvTORElv6iWeP2Jf9yG3YbN6UDyHWBl620a-IRfuBk.woff)
format('woff');
}
CSS II
ul.fallingtextrotator{
font-family:
'Orbitron', sans-serif;
font-size:
70px;
color:
yellow;
text-shadow:
2px 2px #FDE0A6, 3px 3px #FDE0A6, 4px 4px #FDE0A6, 5px 5px #FDE0A6, 6px 6px
#FDE0A6;
letter-spacing:
10px;
font-weight:
10;
text-transform:
uppercase;
position:
relative;
list-style:
none;
margin:
0;
padding:
0; }
ul.fallingtextrotator
>
li
{color:
red;
position:
absolute;
opacity:
0;
top:
0;
left:
0;
-moz-transition:
all 0.3s ease-in;
-webkit-transition:
all 0.3s ease-in;
-o-transition:
all 0.3s ease-in;
-ms-transition:
all 0.3s ease-in;
transition:
all 0.3s ease-in; }
ul.fallingtextrotator
> li:nth-of-type(even)
{
color: blue;
text-shadow:
2px 2px #FDE0A6, 3px 3px #FDE0A6, 4px 4px #FDE0A6, 5px 5px #FDE0A6, 6px 6px
#FDE0A6; }
ul.fallingtextrotator
> li span[class*="char"]
{display:
inline-block;}
ul.fallingtextrotator
> li.dropdown span[class*="char"]
{opacity:
0;
-moz-transform:
translateY(300px) rotateZ(120deg);
-webkit-transform:
translateY(300px) rotateZ(120deg);
transform:
translateY(300px) rotateZ(120deg);
-moz-transition:
all 0.3s ease-in
-webkit-transition:
all 0.3s ease-in;
-o-transition:
all 0.3s ease-in;
-ms-transition:
all 0.3s ease-in;
transition:
all 0.3s ease-in; }
Langkah III
Langkah
terakhir berikan sintaks jQuery dibawah ini
jQuery I
(function($){
var
defaults = {pause:2000, ontextchange:function(msgindex, msg, $eachchar){},
cycles:1}
var
transitionsupport = typeof $(document.documentElement).css('transition') !=
'undefined'
$.fn.fallingtextrotator
= function(options){
return
this.each(function(){
var
s = $.extend({}, defaults, options)
var
$t = $(this),
wordgroup
= [], // array holding collection of either words or chars (depending on
setting)
curli
= 0,
cyclescount
= {cur:0, max:0}
var
$lis = $t.find('>li').each(function(i){
var
$this = $(this)
.data('wrapperinfo',
{wrapitem:i, transduration:$(this).css('transitionDuration'),
currenttransition:0, wordcount:0})
.lettering('words').children('span').lettering().end()
wordgroup.push(
$this.find('span[class*="char"]') )
$this.data('wrapperinfo').wordcount
= wordgroup[i].length
})
cyclescount.max
= $lis.length * s.cycles // get number of literations before rotator should
stop
$t.on('transitionend
webkitTransitionEnd', function(e){
var
$target = $(e.target),
$targetParent
= $target.offsetParent()
if
(/transform/i.test(e.originalEvent.propertyName) &&
$targetParent.hasClass('dropdown')){
$targetParent.data('wrapperinfo').currenttransition
+= 1
if
($targetParent.data('wrapperinfo').currenttransition ==
$targetParent.data('wrapperinfo').wordcount){
$targetParent.data('wrapperinfo').currenttransition
= 0
wordgroup[curli].css({transitionDelay:'0ms'})
$targetParent.css({opacity:0,
transitionDuration:'0ms'}).removeClass('dropdown')
s.ontextchange(
curli, $targetParent.text(), wordgroup[curli] )
curli
= (curli < wordgroup.length-1)? curli + 1 : 0
setTimeout(function(){rotatetext()},
50)
}
}
})
function
dropword(){
if
(transitionsupport && !window.opera){
for
(var i=0; i<wordgroup[curli].length; i++){
var
delay = Math.round( Math.random() * 1000 ) +'ms'
wordgroup[curli].eq(i).css('transitionDelay',
delay )
}
$lis.eq(curli).addClass('dropdown')
}
else{
$lis.eq(curli).css({opacity:0})
curli
= (curli < wordgroup.length-1)? curli + 1 : 0
rotatetext()
}
}
function
rotatetext(){
var
$curli = $lis.eq(curli)
$curli.css({opacity:1,
transitionDuration:$curli.data('wrapperinfo').transduration})
if
(s.cycles==0 || cyclescount.cur++ < cyclescount.max-1){
setTimeout(function(){
dropword()
},
s.pause)
}
}
rotatetext()
})
// end this.each()
}
})(jQuery)
jQuery II
(function($){function
injector(t,splitter,klass,after){var
a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span
class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var
methods={init:function(){return
this.each(function(){injector($(this),'','char','')})},words:function(){return
this.each(function(){injector($(this),' ','word','
')})},lines:function(){return this.each(function(){var
r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return
methods[method].apply(this,[].slice.call(arguments,1))}else
if(method==='letters'||!method){return
methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+'
does not exist on jQuery.lettering');return this}})(jQuery);
Setelah
script diatas ditambahkan semua, yang awalnya teks tertulis dengan rata maka
hasilnya teks akan berjatuhan secara bergantian. Seperti inilah hasilnya :
Sekian
tutorial membuat Animasi Teks Berjalan Terimakasih..
SEMOGA
BERMANFAAT
