画面をスクロールするとコンテンツがふわっと浮かび上がる効果を「Flow Up」
当ページのリンクには広告が含まれています。
スポンサーリンク
画面をスクロールするとコンテンツがふわっと浮かび上がる効果を実装するプラグイン「Flow Up」を紹介します。
jQueryプラグイン「Flow Up」
このプラグインを使えば、画面をスクロールして新しく表示されるコンテンツがふわっと上へ浮遊するようなアニメーション効果をサイトに実装することができます。
いろいろなショートカットキーが用意されているので、おもしろいスクロールをサイトに付加することができます。
オプションではアニメ効果の速度などを調節することができます。
スポンサーリンク
それではデモページをスクロールしてみてくさい。
デモのソース（HTML + jQuery）
<!DOCTYPE html> |
<html> |
<head> |
<meta charset="utf-8"> |
<meta name="description" content="FlowUp のデモでーす。"> |
<title>FlowUp - jQuery Plugin Demo</title> |
<style> |
body p { |
border: solid 1px blue; |
height: 300px; |
text-align: center; |
vertical-align: middle; |
font-size: 1.5em; |
margin: 20px; |
} |
</style> |
</head> |
<body> |
<a href="https://webkaru.net/jquery-plugin/flow-up/">「jQueryプラグインまとめ」に戻る</a> |
<h1>FlowUpのデモでーす。</h1> |
<p>画面をスクロールしてみてください。</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<p>スクロール！</p> |
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> |
<script src="flowup.js"></script> |
<script> |
$(document).ready(function() { |
$("body").flowUp("p", { |
transalteY: 350, |
duration: 10 |
}); |
}); |
</script> |
</body> |
</html> |
スポンサーリンク