今日の人気記事

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

指定した要素をフェイド・スライド「Slide and Fade」 - jQueryプラグイン

当ページのリンクには広告が含まれています。

スポンサーリンク

指定した要素をフェイド・スライドするjQueryプラグイン「Slide and Fade」を紹介します。

Slide and Fade

指定した要素をスライドさせながらフェードイン、クリックアクションでスライドさせながらフェードアウトしてくれます。要素ごとにスライドさせる位置を指定できるので、細やかな設定ができます。が、少しだけCSSの設定がめんどくさいかもしれません。

スポンサーリンク

デモで、フェード・スライドの挙動を確認してみてください。なかなかかっこいいですよ。

「Slide and Fade」のデモ

デモのソース（HTML + jQuery）

ソースを表示
印刷SyntaxHighlighterについて
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="slide and fadeのデモでーす。">
<title>Jquery plugin to slide and fade elements - jQuery Plugin Demo</title>
<style>
div.display-screen-description {
  width: 400px;
  height: 300px;
  margin: 20px auto;
  position: relative;
  border: 1px solid blue;
}
 
div.fragment {
  position: absolute;
  width: 345px;
  height: 24px;
  font-size: 18px;
}
 
#a {
  top: 30px;
  left: 30px;
}
 
#b {
  top: 60px;
  left: 30px;
}
 
#c {
  top: 90px;
  left: 30px;
}
 
#d {
  top: 188px;
  left: 30px;
}
 
#e {
  top: 218px;
  left: 30px;
}
 
#f {
  top: 248px;
  left: 30px;
}
</style>
</head>
<body>
<h1>slide and fadeのデモでーす。</h1>
 
<div class="display-screen-description" id="display-screen">
  <div class="displayBox" id="displayBox_0">
    <div class="fragment" id="a">スライドしながら！！！！</div>
    <div class="fragment" id="b">フェイド・イーーーン！！！</div>
    <div class="fragment" id="c">クリックしてね。</div>
  </div>
  <div class="displayBox" id="displayBox_1">
    <div class="fragment" id="d">もういっちょ！</div>
    <div class="fragment" id="e">フェイド・イーーーン！！！</div>
    <div class="fragment" id="f">クリックしてね。</div>
  </div>
</div>
 
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="jquery.slideandfade.min.js"></script>
<script>
$(function() {
  var screenToDisplay = 1;
  var displayScreen = $('#display-screen');
  displayScreen.click(function() {
    var settings = {callback : function() { screenToDisplay = screenToDisplay == 0 ? 1 : 0; } };
    $('#display-screen').slideandfade($('#displayBox_'+screenToDisplay), settings );
  });
  displayScreen.slideandfade($('#displayBox_0'));
});
</script>
 
</body>
</html>

jsファイルのダウンロード、その他オプションの詳細はこちらからどうぞ。

スポンサーリンク

関連記事（一部広告含む）