さまざまな効果のスクロール・アニメーションを実装「rlSmooth」
当ページのリンクには広告が含まれています。
スポンサーリンク
さまざまな効果のスクロール・アニメーションを実装するプラグイン「rlSmooth」を紹介します。
jQueryプラグイン「rlSmooth」
このプラグインを使えば、スライド・フェイド・ショーアップ・スライドアップなどのスクロール・アニメーションを簡単に実装することができます。
また、アニメーションを登場させるy座標を指定することができるので、おもしろいスクロール・アニメーションをつくることができそうです！
スポンサーリンク
デモを上下にスクロールしてみてください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="RLSmooth のデモでーす。">
<title>RLSmooth - jQuery Plugin Demo</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script src="js/jquery.min.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/rlsmooth.js"></script>
<script>
$(function() {
$(".slide-option").rlSmooth();
$(".slideOut-option").rlSmooth('slideOut',{
y: 1700,
on: 1000,
off: 800
});
$(".slideHide-option").rlSmooth('slideHide',{
y: 1900
});
$(".fade-option").rlSmooth('fade',{
y: 500
});
$(".showUp-option").rlSmooth('showUp',{
y: 800
});
$(".showOut-option").rlSmooth('showOut',{
y: 1500
});
});
</script>
</head>
<body>
<div class="smooth-style slide-option">オプション：slide</div>
<div class="smooth-style slideOut-option">オプション：slideOut</div>
<div class="smooth-style fade-option">オプション：fade</div>
<div class="smooth-style showUp-option">オプション：showUp</div>
<div class="smooth-style showOut-option">オプション：showOut</div>
<div class="height">
<p>下にスクロール</p>
<p>下にスクロール</p>
<p>下にスクロール</p>
<p>下にスクロール</p>
<p>上にスクロール</p>
</div>
<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/rlsmooth/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク