画像フェードイン・フェードアウトのアニメーション「Tesselate Grid-based FX」
当ページのリンクには広告が含まれています。
スポンサーリンク
画像のフェードイン・フェードアウト アニメーションを作成するプラグイン「Tesselate Grid-based FX」を紹介します。
jQueryプラグイン「Tesselate Grid-based FX」
このプラグインにはjsファイルに同梱されたcssファイルがあるので、簡単に画像のアニメーションを実装することができます。
フェードイン・フェードアウトといったアニメーションなど、さまざまな効果をサイトに加える事ができます。
スポンサーリンク
「デモ」ボタンをクリックしてみてください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Tesselate Grid-based FXのデモでーす。">
<title>Tesselate Grid-based FX - jQuery Plugin Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.tesselate.js"></script>
<link rel="stylesheet" href="jquery.tesselate.css">
</head>
<body>
<div class="container">
<h1>Tesselate Grid-based FXのデモでーす。</h1>
<p>ここをクリック → <button id="start">デモ</button></p>
<div>
<img id="element" src="orange.png" />
</div>
<script>
$(document).ready(function(){
var element = $('#element');
element.tesselate({ rows: 5, cols: 5});
function vanish() {
element.tesselate({
progression: 'random',
effect: function(cell) {
cell.animate({
'margin-left':'50px',
'margin-top':'34px',
'opacity':'0'
}, 1000 );
}, delay: 50,
callback: function () {
window.setTimeout(appear, 1000);
}
});
}
function appear() {
element.tesselate({
progression: 'random',
effect: function(cell) {
cell.animate({
'margin-left':'0px',
'margin-top':'0px',
'opacity':'1'
}, 1000 );
}, delay: 20
});
}
$('#start').click(vanish);
});
</script>
</body>
</html>
スポンサーリンク