スライドアニメーション「Keep It Simple Stupid Animate」
当ページのリンクには広告が含まれています。
スポンサーリンク
スライドアニメーションjQueryプラグイン「Keep It Simple Stupid Animate」を紹介します。
jQueryプラグイン「Keep It Simple Stupid Animate」
さまざまなオプションがあるスライドショープラグインです。
スポンサーリンク
デモをご覧ください。ビヨーンびよーんとアニメーション効果が楽しめます。
「Keep It Simple Stupid Animate」のデモ
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Keep It Simple Stupid Animate - jQueryまとめのプラグイン</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- jquery 970x90 demo -->
<ins class="adsbygoogle"
style="display:inline-block;width:970px;height:90px"
data-ad-client="ca-pub-1282149765378839"
data-ad-slot="1037393908"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<h1>Keep It Simple Stupid Animateのデモ</h1>
<ul class="ul-wrap">
<li>
<ul class="post_list widget_cycling_posts first">
<li class="cat_post_item-1">
<a href="#">三条院</a>
<div>
</div>
<div class="post_content">
<p>心にもあらで憂き夜に長らへば 恋しかるべき夜半の月かな/p>
</div>
</li>
<li class="cat_post_item-2">
<a href="#">法性寺入道前関白太政大臣</a>
<div>
</div>
<div class="post_content">
<p>わたの原漕ぎ出でて見ればひさかたの 雲居にまがふ沖つ白波</p>
</div>
</li>
<li class="cat_post_item-3">
<a href="#">殷富門院大輔</a>
<div>
</div>
<div class="post_content">
<p>見せばやな雄島の海人の袖だにも 濡れにぞ濡れし色は変はらず</p>
</div>
</li>
</ul>
</li>
<li>
<ul class="post_list widget_cycling_posts second">
<li class="cat_post_item-1">
<a href="#" />世の中は常にもがもな渚漕ぐ 海人の小舟の綱手かなしも</a>
<div>
</div>
<div class="post_content">
<p>花さそふ嵐の庭の雪ならで ふりゆくものはわが身なりけり</p>
<p> 風そよぐ楢の小川の夕暮は 御禊ぞ夏のしるしなりける</p>
</div>
</li>
<li class="cat_post_item-2">
<a href="#" />後鳥羽院 </a>
<div>
</div>
<div class="post_content">
<p>ｶﾒﾊﾒﾊｰ!! ( *ﾟﾛﾟ)ﾊ ⊂☆＝＝＝≡≡≡）））☆</a>
</div>
</li>
</ul>
</li>
<li>
<ul class="post_list widget_cycling_posts third">
<li class="cat_post_item-1">
<a href="#">199x年 世界は核の炎に包まれた</a>
<div>
</div>
<div class="post_content">
<p>だが、人類は死に絶えてはいなかった。</p>
</div>
</li>
<li class="cat_post_item-2">
<a href="#"/>北斗百裂拳</a>
<div>
</div>
<div class="post_content">
<p> 寂しさに宿を立ち出でてながむれば いづくも同じ秋の夕暮れ</p>
</div>
</li>
<li class="cat_post_item-3">
<a href="#"/>周防内侍</a>
<div>
</div>
<div class="post_content">
<p>春の夜の夢ばかりなる手枕に かひなく立たむ名こそをしけれ</p>
</div>
</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/kiss.animate.js"></script>
<script type="text/javascript">
(function ($) {
$('ul.post_list.first').kissAnimate();
$('ul.post_list.second').kissAnimate({
limit: '2',
speed: 3000,
animeSpeed: 2000,
delay: 1000,
wrapSlideWith:'<div class="animate-wrapper"></div>',
transition: 'fadeToggle',
splitter: 'split',
css: true
});
$('ul.post_list.third').kissAnimate({
limit: '3',
speed: 5000,
animeSpeed: 1000,
delay: 3000,
wrapSlideWith:'<div class="animate-wrapper"></div>',
transition: 'slideToggle',
splitter: 'split',
css: true
});
})(jQuery);
</script>
</body>
</html>
さまざまなオプションの詳細はこちらからどうぞ。
» Keep It Simple Stupid Animate
スポンサーリンク