Cara Menambahkan Kutipan Animasi

by Fansublogger

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Ani Quote  -->
<div id="words">
<ul class="word-container">
<li data-author="--- Jose Mujica " data-easeout="lightSpeedOut">Saya disebut presiden termiskin di dunia, tetapi saya tak merasa miskin. Orang miskin adalah mereka yang bekerja hanya untuk menjaga gaya hidup mewahnya dan selalu menginginkan lebih.</li>
<li data-author="--- Thomas Alva Edison " data-easeout="fadeOutDown"> Banyak kegagalan dalam hidup ini dikarenakan orang-orang tidak menyadari betapa dekatnya mereka dengan keberhasilan saat mereka menyerah.</li>
<li data-author="---  Mohandas Gandhi " data-easein="fadeInDown">Mereka yang berjiwa lemah tak akan mampu memberi maaf yang tulus. Pemaaf sejati hanya melekat bagi mereka yang berjiwa tangguh.</li>
<li data-author="---  Voltaire " data-easeout="bounceOut"> Pendidikan mengembangkan kemampuan, tetapi tidak menciptakannya.</li>
<li data-author="---  Soekarno " data-easein="bounceIn"> Laki-laki dan perempuan adalah sebagai dua sayapnya seekor burung. Jika dua sayap sama kuatnya, maka terbanglah burung itu sampai ke puncak yang setinggi-tingginya; jika patah satu dari pada dua sayap itu, maka tak dapatlah terbang burung itu sama sekali.</li>
<li data-author="---  La Fontaine " data-easein="lightSpeedIn"> Kemenangan yang paling indah adalah bisa menaklukkan hati sendiri.</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>
<div class='credit'>
  <a class='blog-link' href='http://bloggercsstrick.blogspot.com/2014/04/cara-menambahkan-kutipan-animasi.html' target='_blank'>Kembali Ke Tips</a>
</div>

CSS

.quote {
padding-right: 0;
font-size: 1.8em;
}

.quote-author {
margin-top: 0px!important;
}

 cite,
 li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


.word-container{
	display: none;
}
/*.text-block{
	display: inline-block;
	padding: 2px;
	font-size: 24px;
}
*/
.quote{
	display: block;
	width: 100%;
	margin: 0;
	margin-top: 120px;
	font-size: 23px!important;
	text-align: center;
	line-height: 35px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
}

cite {
	margin-top: 14px;
	margin-right: 48px;
	font-size: 15px;
 	float: right;
}

.quote-content span, .quote-author span{
	display: inline-block;
}


.animate0{
   	-webkit-animation-duration: .5s;
	-webkit-animation-delay: 0s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .5s;
	-moz-animation-delay: 0s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .5s;
	-ms-animation-delay: 0s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .5s;
	animation-delay: 0s;
	animation-timing-function: ease;
	animation-fill-mode: both;
}

.animate1{
   	-webkit-animation-duration: .5s;
	-webkit-animation-delay: .2s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .5s;
	-moz-animation-delay: .2s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .5s;
	-ms-animation-delay:...

JavaScript

var easeInTypeArr = ['rollIn', 'fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'bounceIn', 'bounceInDown', 'bounceInUp', 'bounceInLeft', 'bounceInRight', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'fadeInLeftBig', 'fadeInRightBig', 'fadeInUpBig', 'fadeInDownBig', 'flipInX', 'flipInY', 'lightSpeedIn', 'tada', 'swing', 'shake', 'wobble', 'wiggle', 'pulse'];
var easeOutTypeArr = ['rollOut', 'fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'bounceOut', 'bounceOutDown', 'bounceOutUp', 'bounceOutLeft', 'bounceOutRight', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'fadeOutLeftBig', 'fadeOutRightBig', 'fadeOutUpBig', 'fadeOutDownBig', 'flipOutX', 'flipOutY', 'lightSpeedOut'];
(function (_0x30b5x3) {
    _0x30b5x3['fn']['quoteRotator'] = function (_0x30b5x4) {
        var _0x30b5x5 = {
            container: '.word-container',
            easeIn: 'fadeInLeft',
            easeOut: 'fadeOutLeft',
            easeInTypeArr: ['fadeIn', 'fadeInDown', 'fadeInUp', 'fadeInLeft', 'fadeInRight', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight'],
            easeOutTypeArr: ['fadeOutLeft', 'fadeOutRight', 'fadeOutUp', 'fadeOutDown', 'rollOut', 'bounceOut', 'lightSpeedOut'],
            slideshow: true,
            slideshowDelay: 3000,
            hoverToPause: false,
            clickToNext: true
        };
        if (_0x30b5x4) {
            _0x30b5x3['extend'](_0x30b5x5, _0x30b5x4);
        };
        var _0x30b5x6 = this;
        var _0x30b5x7 = [];
        var _0x30b5x8 = [];
        var _0x30b5x9 = [];
        var _0x30b5xa = [];
        _0x30b5x3(_0x30b5x5['container'], _0x30b5x6)['find']('li')['each'](function (_0x30b5xb) {
            _0x30b5x7[_0x30b5xb] = _0x30b5x3(this)['text']();
            _0x30b5x8[_0x30b5xb] = _0x30b5x3(this)['data']('author');
            _0x30b5x9[_0x30b5xb] = _0x30b5x3(this)['data']('easein');
           ...