今日の人気記事

まだデータがありません。

スライドアニメーション「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

スポンサーリンク

関連記事(一部広告含む)